當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现走马灯效果
document.getElementById('sunshine') 通過選擇器找到這個標簽
? ? ? ? 獲取標簽中間的內容 ? innerHTML
? ? ? ? 標簽中間可以有子標簽 也可以有文本 ?標簽和文本統(tǒng)稱為innerHTML
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#sunshine{width: 100%;height: 30px;background: black;color: lightcoral;}</style> </head><body><div id="sunshine">走馬燈效果，歡迎光臨紅浪漫，唱跳，rap，籃球,開業(yè)大酬賓！洗剪吹只要九塊九！燙染僅需199！辦卡充值1000送600，機不可失，失不再來，</div><script>// document.getElementById('sunshine') 通過選擇器找到這個標簽 // 獲取標簽中間的內容 innerHTML // 標簽中間可以有子標簽 也可以有文本 標簽和文本統(tǒng)稱為innerHTMLfunction test1() {var titles = document.getElementById('sunshine').innerHTML;var arr = titles.split(""); //拆成數(shù)組 var first = arr.shift(); //取出第一個 arr.push(first); //放到數(shù)組結尾titles = arr.join(""); // 把數(shù)組拼接成字符串 // console.log(titles);document.getElementById('sunshine').innerHTML = titles;// 給標簽中間重新賦值 }// setInterval(test1,1000);// setInterval("test1()",1000);// setInterval(function(){test1()},1000);var i;//這個i 要注意作用域 防止停止的時候//沒有權限拿到這個i </script><button onclick="test1();i = setInterval(function(){test1()},1000)">點擊開始</button><button onclick="clearInterval(i)">停止</button><!-- 上面一點擊 開始 需要讓頁面直到這是第幾個定時器 --><!-- setTimeout setInterval 兩個方法都有一個返回值 返回值是一個數(shù)字 這個數(shù)字就代表第幾個定時器 --><!-- 停止的時候 我們通過這個數(shù)字來停止指定的定時器 --> </body></html>總結
- 上一篇： ssm+jsp计算机毕业设计车辆违章查询
- 下一篇： WPS和office办公软件的word同