Wil*_*ill 1 javascript setinterval
我创建了一个页面，其中 div 的背景颜色经常变化。我想做到这一点，以便当鼠标悬停（或悬停）时，只要鼠标悬停在那里，颜色变换器就会在其所在的位置暂停。当鼠标不再悬停在 div 上时，颜色会继续从上次停止的位置发生变化。我在这个网站上遇到的最接近的例子使用了 JQuery 解决方案。我不是在寻找 JQuery 解决方案。我正在寻找一个 JavaScript 解决方案。我感谢您的所有回复。谢谢你！
var dammit = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;
function changer() {
if (counter >= colors.length) {
counter = 0;
};
colorChange.style.background = colors[counter];
counter++;
};
var myTimer = setInterval(changer, 3000);body {
background: #FDCA40;
margin: 0;
padding: 0;
-webkit-transition: background 0.9s;
-moz-transition: background 0.9s;
transition: background 0.9s;
}
div#muck {
width: 100%;
height: 100vh;
}<body id="color-changer">
<div id="muck"></div>
</body>无法暂停计时器，但您可以停止当前正在运行的计时器，然后启动一个新的计时器。
（仅供参考：所有 5 年内的浏览器至少支持 CSS 转换。无需供应商前缀。）
var source = document.getElementById("muck");
var colorChange = document.getElementById("color-changer");
var colors = ["red", "blue", "green", "pink"];
var counter = 0;
function changer(){
if (counter >= colors.length){
counter = 0;
};
colorChange.style.background = colors[counter];
counter++;
};
var myTimer = setInterval(changer, 1000);
// Stop the current timer when mouseover
source.addEventListener("mouseover", function(){ clearInterval(myTimer)});
// Start a new timer when mouse out
source.addEventListener("mouseout", function(){ myTimer = setInterval(changer, 1000);});body{
background: #FDCA40;
margin: 0;
padding: 0;
transition: background 0.9s;
}
div#muck{
width: 100%;
height: 100vh;
}<body id="color-changer">
<div id="muck"></div>
</body>| 归档时间： |
|
| 查看次数： |
2386 次 |
| 最近记录： |