页面文字闪烁输入效果

最近最弄html5，不经意间发现挺好玩的，记录一下

 

html代码：

 1 <div id="code">
 2 <p>
 3 <font color="#FF0000">
 4 <span class="say">你说我啰嗦，</span><br>
 5 <span class="say"> 有些东西因为越在乎所以越怕失去</span><br>
 6 <span class="say"> </span><br>
 7 <span class="say">因为我太爱你了，所以我害怕失去你</span><br>
 8 <span class="say"> </span><br>
 9 <span class="say">因为我太爱你了，所以我对你总啰嗦</span><br>
10 <span class="say"> </span><br>
11 </font>
12 <br />
13 <br />
14 </p>
15 </div>

html代码

 

 

js方法：

 1 <script>
 2 (function () {
 3 var typewriter = function (id) {
 4 var $ele = document.getElementById(id);
 5 var str = $ele.innerHTML, progress = 0;
 6 $ele.innerHTML = '';
 7 var timer = setInterval(function () {
 8 var current = str.substr(progress, 1);
 9 if (current == '<') {
10 progress = str.indexOf('>', progress) + 1;
11 } else {
12 progress++;
13 }
14 $ele.innerHTML = str.substring(0, progress) + (progress & 1 ? '_' : '');
15 if (progress >= str.length) {
16 clearInterval(timer);
17 }
18 }, 75);
19 return this;
20 }
21 
22 </script>

文字闪烁输入效果

 

 

调用：

typewriter('code')

转载于:https://www.cnblogs.com/chao0219/p/4503935.html