Question

我正在做这个练习项目，我取得了一半的成绩，但无法弄清楚如何进行另一半。基本上我在父div2中有0宽度和0高度的div1，宽度和高度分别为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>

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;

这是因为我们会在seconds的开头立即减少addEventListener。

以下是JSFiddle

的工作修改版本

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

1 个答案: