目標效果:每過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>