Question

我创建了一个页面，其中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>

Answer 1

无法暂停计时器，但是您可以停止当前正在运行的计时器，然后再启动一个计时器。

（仅供参考：所有使用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>

Answer 2

您可以完全在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 id="color-changer">
  <div id="muck"></div>
</body>

Answer 3

虽然这并不能真正起到间隔作用，但可以非常紧密地模拟您的需求。您可以使用一个标志..类似这样的：

    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;
        });

来自Javascript - Pausing setInterval()

如何在鼠标悬停时暂停间隔并在鼠标不再悬停时恢复

3 个答案: