以设定的间隔增加和减少 div 的宽度和高度

Question

我做这个项目是为了练习，我已经完成了一半的结果，但不知道如何完成另一半。基本上我在父 div2 中有宽度为 0 和高度为 0 的 div1，宽度和高度分别为 280px，边框半径为 50%。 div1 有一个兄弟 div3，里面有值。单击 div2 时，div3 文本转换为秒，然后设置间隔将运行一个函数，该函数会按秒增加宽度和高度，这样当秒达到 0 时，div1 的高度和宽度应等于父 div2。我已经实现了这一点，现在我想重新分配 seconds = 70 并按比例减少 div1 的宽度和高度。我的解释可能还不够，所以请参阅随附的代码片段。提前感谢您的帮助。

var display, time, loader, width, height, reverse, seconds, running, interval;

display = document.getElementById("display");
time = document.getElementById("time");
loader = document.getElementById("loader");
width = 0;
height = 0;
reverse = false;
running = false;
seconds = parseInt(time.textContent)*60;


if ( width === 280 && height === 280 ) {
   reverse = true;
   time.textContent = 70;
}

display.addEventListener("click" , function(){
  
  if ( running === false ) {
    running = true;
    interval = setInterval(function(){
     
      if ( reverse === false ) {
        width  += (280-width)/seconds;
        height += (280-height)/seconds;
      }
      else {
        width  -= (width/seconds);
        height -= (height/seconds);
      }
      
      loader.style.width = Math.round(width) + "px";
      loader.style.height = Math.round(height) + "px";
      console.log(width + " " + height);
      time.textContent = seconds;
      

      
      if ( seconds > 0 ) {
        seconds--;
      }
    },1000);
  }
  
  else {
    running = false;
    clearInterval(interval);
    console.log("Inteval cleared");
  }
  
});

#display {
  width : 280px;
  height: 280px;
  border: 1px solid #5fcf80;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
}

#time {
  font-size: 120px;
  text-align: center;
  line-height: 280px;
  position: relative;
  z-index: 9;
}

#loader {
  z-index: 1;
  width: 40px;
  height: 40px;
  background: #5fcf80;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="display">
    
    <div id="time">1</div>
    <div id="loader"></div>
    
  </div>

</body>
</html>

Answer 1

你的代码有一些错误：

1- 以下 if 子句无用，因为它的内容永远不会执行：

if ( width >= 280 && height >= 280 ) {
   reverse = true;
   time.textContent = 70;
}

它永远不会执行，因为这个 if 在 addEventListener 和 setInterval 之外。一开始会运行一次，此时width和height还是0。

2-下面的代码应该在setInterval开头：

  if ( seconds > 0 ) {
    seconds--;

原因是，想象一下当 seconds 达到 0 时会发生什么：

将执行这些行：width += (280-width)/seconds 和 height += (280-height)/seconds。
seconds 是 0，所以会被零除！
width 和 height 将是 NaN（不是数字）。

3-(2)中的代码应该是：

if ( seconds > 1 ) {
  seconds--;
} else if ( seconds == 1 ){
  reverse = reverse ? false : true;
  seconds = 70;
}

首先，我们检查 seconds 是否高于 1 而不是 0，以阻止 seconds 变为 0，在这种情况下，我们减少 1.
如果 seconds 是 1，那么我们已经达到最大值（或最小值）width 和 height。
- 在这种情况下，如果我们增加，我们将 reverse，反之亦然。
- 此外，我们会根据您的要求将 seconds 重置为 70。

4-根据以上修改，seconds的初始值应该是61，而不是60：

seconds = parseInt(time.textContent)*61;

那是因为我们将在 addEventListener 开始时立即减少 seconds。

这是 JSFiddle

上的工作修改版本

以设定的间隔增加和减少 div 的宽度和高度

Increase and decreasing width and height of a div with set interval

html

javascript

css

event-listener

setinterval