当前位置: 移动技术网 > IT编程>开发语言>Jquery > js之跑马灯广告

js之跑马灯广告

2018年12月27日  | 移动技术网IT编程  | 我要评论

目标效果:每过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>

 

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网