js之跑马灯广告
程序员文章站
2022-07-06 12:01:29
目标效果：每过1秒重复把广告的第一个字符放到最后，达到动态跑马灯效果 代码如下： ......
目标效果：每过1秒重复把广告的第一个字符放到最后，达到动态跑马灯效果
代码如下：
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="txt" style="color: white;background-color: red;text-align: center;font-size: 50px;">大甩卖</div>
9 <script type="text/javascript">
10 setinterval(function ()//通过定时器重复动作
11 {
12 var otxt = document.getelementbyid('txt'); //获取标签
13 var txt = otxt.innertext; //获取标签文本内容
14 // console.log(typeof txt) 页面控制台查看是string
15 var first_i = txt[0]; //字符串索引取值
16 var last_i = txt.slice(1,txt.length);//字符串切片
17 var new_txt = last_i + first_i;//字符串拼接
18 otxt.innertext = new_txt; //拼接后的字符串放到标签文本内容
19 },1500)
20 </script>
21 </body>
22 </html>