首頁猿問如何在鼠標懸停時暫停間隔并在鼠標不...

如何在鼠標懸停時暫停間隔并在鼠標不再懸停時恢復

JavaScript

冉冉說 2021-12-23 16:47:05

我創建了一個頁面，其中 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>

查看完整描述

3 回答

有只小跳蛙

TA貢獻1824條經驗獲得超8個贊

沒有辦法暫停計時器，但您可以停止當前正在運行的計時器，然后啟動一個新的計時器。

（僅供參考：所有 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>

反對回復 2021-12-23

慕勒3428872

TA貢獻1848條經驗獲得超6個贊

您可以純粹在 CSS 中執行此操作，但您需要使用動畫。我還添加了一些 CSS 變量，以便更容易更改動畫。

body {

background: #FDCA40;

margin: 0;

padding: 0;

}

/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

from {background-color: red;}

to {background-color: yellow;}

}

@keyframes example {

0% {background-color: red;}

20% {background-color: blue;}

40% {background-color: green;}

80% {background-color: pink;}

100% {background-color: red;}

}

div#muck {

--animation-transition-speed: 0.9s;

--number-of-colors: 4;

width: 100%;

height: 100vh;

-webkit-animation-name: example;

-webkit-animation-duration: calc(var(--animation-transition-speed) * var(--number-of-colors));

animation-name: example;

animation-duration: calc(var(--animation-transition-speed) * var(--number-of-colors));

animation-iteration-count: infinite;

}

div#muck:hover {

animation-play-state: paused;

}

</body>

反對回復 2021-12-23

九州編程

TA貢獻1785條經驗獲得超4個贊

雖然這并沒有真正構成間隔，但它非常接近地模仿了你需要的東西..你可以使用一個標志..像這樣：

var output = document.getElementById('id')

var isPaused = false;

var counter = 0;

window.setInterval(function() {

if(!isPaused) {

counter++;

if (counter >= colors.length) {

counter = 0;

};

colorChange.style.background = colors[counter];

}

}, 1000);

document.getElementById('muck').addEventListener('mouseenter', function(e) {

isPaused = true;

});

document.getElementById('muck').addEvenetListener('mouseleave', function(e) {

isPaused = false;

});

反對回復 2021-12-23

3 回答
0 關注
297 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在鼠標懸停時暫停間隔并在鼠標不再懸停時恢復

如何在鼠標懸停時暫停間隔并在鼠標不再懸停時恢復

3 回答

添加回答