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

我正在进行这个元素的练习，我取得了一半的结果，但不知道如何实现另一半。基本上，我的 div1 的宽度和高度为 0，父级 div2 的宽度和高度均为 280px，边框半径为 50%。 div1 有一个兄弟 div3，里面有值。单击 div2 时，div3 文本会转换为秒，然后设置间隔将运行一个函数，该函数会与秒成比例地增加宽度和高度，这样当秒达到 0 时，div1 的高度和宽度应等于父 div2。我已经实现了这一点，现在我想重新分配秒= 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>

最佳答案

您的代码中有一些错误:

1- 下面的 if 子句没有用，因为它的内容永远不会执行:

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

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

2- 以下代码应位于 setInterval 的开头:

  if ( seconds > 0 ) {
    seconds--;

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

将执行以下行:width += (280-width)/Seconds 和 height += (280-height)/Seconds。
秒是0，所以会被零除!
宽度和高度将为NaN(不是数字)。

3- (2) 中的代码应为:

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

首先，我们检查 秒 是否高于 1 而不是 0，以阻止 秒 成为 >0，在这种情况下，我们减少 1。
如果秒为1，那么我们就达到了最大(或最小)宽度和高度 。
- 在这种情况下，如果我们增加，我们就会反转，反之亦然。
- 此外，我们还会根据您的指定将秒重置为70。

4- 基于上述更改，秒 的初始值应为 61，而不是 60:

seconds = parseInt(time.textContent)*61;

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

这是 JSFiddle 上的工作修改版本

关于javascript - 以设定的间隔增加和减少 div 的宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47064664/

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

上一篇：jquery - 使用javascript循环遍历元素的id

下一篇：html - 是否可以在电子邮件中使用 'Open Sans'