當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS实现走马灯效果
document.getElementById('sunshine') 通過(guò)選擇器找到這個(gè)標(biāo)簽
? ? ? ? 獲取標(biāo)簽中間的內(nèi)容 ? innerHTML
? ? ? ? 標(biāo)簽中間可以有子標(biāo)簽 也可以有文本 ?標(biāo)簽和文本統(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，籃球,開(kāi)業(yè)大酬賓！洗剪吹只要九塊九！燙染僅需199！辦卡充值1000送600，機(jī)不可失，失不再來(lái)，</div><script>// document.getElementById('sunshine') 通過(guò)選擇器找到這個(gè)標(biāo)簽 // 獲取標(biāo)簽中間的內(nèi)容 innerHTML // 標(biāo)簽中間可以有子標(biāo)簽 也可以有文本 標(biāo)簽和文本統(tǒng)稱為innerHTMLfunction test1() {var titles = document.getElementById('sunshine').innerHTML;var arr = titles.split(""); //拆成數(shù)組 var first = arr.shift(); //取出第一個(gè) arr.push(first); //放到數(shù)組結(jié)尾titles = arr.join(""); // 把數(shù)組拼接成字符串 // console.log(titles);document.getElementById('sunshine').innerHTML = titles;// 給標(biāo)簽中間重新賦值 }// setInterval(test1,1000);// setInterval("test1()",1000);// setInterval(function(){test1()},1000);var i;//這個(gè)i 要注意作用域 防止停止的時(shí)候//沒(méi)有權(quán)限拿到這個(gè)i </script><button onclick="test1();i = setInterval(function(){test1()},1000)">點(diǎn)擊開(kāi)始</button><button onclick="clearInterval(i)">停止</button><!-- 上面一點(diǎn)擊 開(kāi)始 需要讓頁(yè)面直到這是第幾個(gè)定時(shí)器 --><!-- setTimeout setInterval 兩個(gè)方法都有一個(gè)返回值 返回值是一個(gè)數(shù)字 這個(gè)數(shù)字就代表第幾個(gè)定時(shí)器 --><!-- 停止的時(shí)候 我們通過(guò)這個(gè)數(shù)字來(lái)停止指定的定時(shí)器 --> </body></html>總結(jié)
- 上一篇： ssm+jsp计算机毕业设计车辆违章查询
- 下一篇： WPS和office办公软件的word同