找回密码
当前位置：前端开发者 > JavaScript > 正文

前端原生Js打印效果

2018-10-19 分类：JavaScript 阅读(736) 评论(0)
前端开发技术的起源与历史
现在前端开发主要技术
前端的开发技术

主要用到以下几个知识点：

1.nbsp;半角的不断行的空白格（推荐使用）2.ensp; 半角的空格 3.emsp; 全角的空格,每个字符前面都加上&

2.string.charAt()返回指定位置的字符

3.indexOf(),array.indexOf(item,start)返回某个指定的字符串在字符串中首次出现的位置

4.substring(),code.substring(0,pos)中的substring()用于提取字符串中介于两个指定下标之间的字符，substring()方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。

5.classList.add(),classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加add，移除remove及切换toggle css 类。
源代码如下：

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″ />
    <meta name=”Keywords” content=”” />
    <meta name=”Description” content=”” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewpoint” content=”width=device-width,initial-scale=1,user-scalable= no” />
    <title>0116 printer</title>
    <style type=”text/css”>
        .typewriter {
            display: none;
            width: 40em;
            line-height: 1.6;
            border: 1px solid #2dcb70;
            padding: 1em 3em;
            margin: 5em auto;
            font-family: Microsoft Yahei;
            font-weight: normal;
            white-space: normal;
            -webkit-font-smoothing: antialiased;
            /*字符反锯齿*/
            ;
            color: hsla(0, 10%, 20%, 0.9);
        }
        .typewriter:after {
            content: “_”;
            animation: flash .6s steps(2, start) infinite;
            -webkit-animation: flash .6s steps(2, start) infinite;
        }
        .typewriter.gameover:after {
            display: none;
        }
        @keyframes flash {
            0% {
                visibility: visible;
            }
            100% {
                visibility: hidden;
            }
        }
        @-webkit-keyframes flash {
            0% {
                visibility: visible;
            }
            100% {
                visibility: hidden;
            }
        }
    </style>
</head>
<body>
    <div class=”typewriter”>
        <!–1.&nbsp; 半角的不断行的空白格（推荐使用）2.&ensp; 半角的空格 3.&emsp; 全角的空格–>
        1. Whatever is worth doing is worth doing well.
        &emsp;任何值得做的，就把它做好。
        2. Happiness is a way station between too much and too little.
        &emsp;幸福是太多和太少之间的一站。
        3. In love folly is always sweet.
        &emsp;恋爱中，干傻事总是让人感到十分美妙。
        4. The hard part isn’t making the decision. It’s living with it.
        &emsp;做出决定并不困难，困难的是接受决定。
        5. Your happy passer-by all knows, my distressed there is no place hides.
        &emsp;你的幸福路人皆知，我的狼狈无处遁形。
        6. You may be out of my sight, but never out of my mind.
        &emsp;你也许已走出我的视线，但从未走出我的思念。
    </div>
</body>
<script>
    (function () {
        var typewriter = document.querySelector(“.typewriter”),
            code = typewriter.innerHTML,
            pos = 0,
            len = code.length;
        typewriter.innerHTML = “”;
        typewriter.style.display = “block”;
        function typewriting() {
            pos++;
            if (pos <= len) {
                switch (code.charAt(pos)) //charAt()返回指定位置的字符
                {
                    case “<“: //<>代码开始的字符
                        pos = code.indexOf(“>”, pos); //array.indexOf(item,start)返回某个指定的字符串在字符串中首次出现的位置
                        break;
                    case “&”:
                        pos = code.indexOf(“;”, pos);
                        break;
                }
                typewriter.innerHTML = code.substring(0, pos);//substring()用于提取字符串中介于两个指定下标之间的字符，substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。
                setTimeout(typewriting, 100);
            }
            else {
                typewriter.classList.add(“gameover”);//classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 css 类。
            }
        }
        typewriting();
    })();
</script>
</html>
前端web开发技术架构
web前端开发技术 课件
前端开发技术和工具
赞(0)
前端开发者 » 前端原生Js打印效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论