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

Question

I am doing this project for practice and I am achieving half the results but can't figure out how to the other half.我正在做这个项目的练习，我实现了一半的结果，但不知道如何实现另一半。 Basically I have div1 with 0 width and 0 height inside a parent div2 with 280px width and height each with border radius of 50%.基本上，我在父 div2 内有 0 宽度和 0 高度的 div1，宽度和高度均为 280 像素，边框半径为 50%。 There is a sibling div3 of div1 with value inside. div1 有一个同级 div3，里面有值。 On clicking the div2 the div3 text converted into seconds and then set interval will run a function that increases the width and height proportionate to the seconds such that when seconds reach 0 height and width of div1 should be equal to parent div2.单击 div2 时，将 div3 文本转换为秒，然后设置时间间隔，将运行一个函数，该函数会根据秒数按比例增加宽度和高度，以便当秒数达到 0 时，div1 的高度和宽度应等于父 div2。 I am achieving this far and now I want to reassign seconds = 70 and decrease the width and height of div1 proportionally.我已经实现了这么远，现在我想重新分配 seconds = 70 并按比例减小 div1 的宽度和高度。 My explanation might not be enough so please refer to the code snippet attached.我的解释可能还不够，所以请参考所附的代码片段。 Thanks for your help in advance.提前感谢您的帮助。

 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

There are some mistakes in your code:您的代码中有一些错误：

1- The following if clause is useless because its contents never executes: 1- 以下if子句是无用的，因为它的内容永远不会执行：

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

It never executes because this if is outside addEventListener and setInterval .它永远不会执行，因为这个if在addEventListener和setInterval之外。 It will run one time at the beginning, when width and height are still 0 .当width和height仍然为0时，它会在开始时运行一次。

2- The following code should be at the beginning of setInterval : 2- 以下代码应位于setInterval的开头：

  if ( seconds > 0 ) {
    seconds--;

The reason is, imagine what happens when seconds reaches 0 :原因是，想象一下当seconds达到0时会发生什么：

These lines will be executed: width += (280-width)/seconds and height += (280-height)/seconds .将执行这些行： width += (280-width)/seconds和height += (280-height)/seconds 。
seconds is 0 , so a division by zero will happen! seconds是0 ，所以会发生除以零！
width and height will be NaN (Not a Number). width和height将为NaN （非数字）。

3- The code in (2) should be: 3- (2) 中的代码应该是：

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

first, we check if seconds is above 1 not 0 , to stop seconds from being 0 , and in that case, we decrease by 1.首先，我们检查seconds是否高于1而不是0 ，以阻止seconds为0 ，在这种情况下，我们减少 1。
If seconds is 1 , then we've reached the max (or min) width and height .如果seconds是1 ，那么我们已经达到了最大（或最小） width和height 。
- In this case, if we are increasing, we will reverse , and vice versa.在这种情况下，如果我们正在增加，我们将reverse ，反之亦然。
- In addition, we will reset seconds to 70 based on your specification.此外，我们将根据您的规格将seconds重置为70 。

4- Based on the above changes, the initial value of seconds should be 61 , not 60 : 4- 基于以上变化， seconds的初始值应该是61 ，而不是60 ：

seconds = parseInt(time.textContent)*61;

That's because we will decrease seconds right away in the beginning of addEventListener .那是因为我们将在addEventListener开始时立即减少seconds 。

Here is a working modified version on JSFiddle这是JSFiddle上的一个工作修改版本

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-11-02 05:06:39

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-11-02 05:06:39

解决方案1
2 已采纳 2017-11-02 05:06:39