使用jq实现打印机的效果
本例中使用的是jq和es6的语法,代码如下:
html:
<div id="box"> this is test <br/> 这是测试用的 </div>
css样式表:
<style> #box { display: none; border: 1px solid #ccc; margin: 20px 30em; padding: 20px; line-height: 1.8; font: 14px/1.8 "microsoft yahei"; } #box:after { content: "_"; animation: flash .6s steps(2, start) infinite; } @keyframes flash { 0% { visibility: visible; } 100% { visibility: hidden; } } </style>
jq:
<script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script> <script> $(() => { let index = 0; let code = $("#box").html(); $("#box").html("").css("display","block"); let start = () => { index++; if (index <= code.length) { switch (code.charAt(index)) { case "<": index = code.indexOf(">", index); break; case "&": index = code.indexOf(";", index); break; } $("#box").html(code.substring(0, index)); setTimeout(start, 100) } }; start(); }) </script>
效果如下: