热门关键字:
jquery > jquery教程 > jquery教程 > js之跑马灯广告,js跑马灯

js之跑马灯广告,js跑马灯

311
作者:管理员
发布时间:2020/2/16 18:00:32
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=815

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




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐