1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>基于jQuery实现的打字机效果</title>
6 <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
7 <style>
8 </style>
9 </head>
10 <body>
11 <div class="autotype" id="autotype">
12 <p>一场雨把我困在这里</p>
13 <br>
14 <p>你温柔的表情</p>
15 <p>会让我伤心</p>
16 <br>
17 <p>六月的雨，只是无情的你~</p>
18 </div>
19
20 <script>
21 $.fn.autotype = function() {
22 var $text = $(this);
23 console.log(‘this‘, this);
24 var str = $text.html(); //返回被选 元素的内容
25 var index = 0;
26 var x = $text.html(‘‘);
27 //$text.html()和$(this).html(‘‘)有区别
28 var timer = setInterval(function() {
29 //substr(index, 1) 方法在字符串中抽取从index下标开始的一个的字符
30 var current = str.substr(index, 1);
31 if (current == ‘<‘) {
32 //indexOf() 方法返回">"在字符串中首次出现的位置。
33 index = str.indexOf(‘>‘, index) + 1;
34 } else {
35 index++;
36 }
37 //console.log(["0到index下标下的字符",str.substring(0, index)],["符号",index & 1 ? ‘_‘: ‘‘]);
38 //substring() 方法用于提取字符串中介于两个指定下标之间的字符
39 $text.html(str.substring(0, index) + (index & 1 ? ‘_‘: ‘‘));
40 if (index >= str.length) {
41 clearInterval(timer);
42 }
43 },
44 100);
45 };
46 $("#autotype").autotype();
47 </script>
48
49 </body>
50 </html>
原文地址：https://www.cnblogs.com/Sinhtml/p/8336970.html
时间： 2024-10-02 02:13:13