跑马灯小案例

Posted 雷大侠!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跑马灯小案例相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="i1">123456789</div>
 9 
10     <script>
11         function func(){
12             // 根据ID获取指定标签的内容,定于局部变量接受
13             var tag = document.getElementById(‘i1‘);
14             // 获取标签内部的内容
15             var content = tag.innerText;
16 
17             var f = content.charAt(0);
18             var l = content.substring(1,content.length);
19 
20             var new_content = l + f;
21 
22             tag.innerText = new_content;
23         }
24         setInterval(‘func()‘, 500);
25     </script>
26 </body>
27 </html>

字符串操作:

a="123456789";

a.chartAt(索引位置)

a.substring(起始位置,结束位置)

a.lenght 获取当前字符串的长度

定时器:

setInterval(‘执行的代码’,间隔时间);

以上是关于跑马灯小案例的主要内容,如果未能解决你的问题,请参考以下文章

跑马灯小案例

vue小案例(跑马灯)

跑马灯小效果

跑马灯案例

跑马灯案例的制作

js简单跑马灯案例