我做这个项目是为了练习，我取得了一半的成绩，但是我不知道如何去做另一半。基本上，我有一个0宽0高的div1在一个280px宽和高的父div2中，每个都有50%的边界半径。有一个div1的兄弟div3，其中包含值。单击div2时，将div3文本转换为seconds，然后设置interval将运行一个函数，该函数将增加与seconds成比例的宽度和高度，以便当seconds达到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--;
原因是，想象一下当
seconds达到0时会发生什么：将执行这些行：
width += (280-width)/seconds和height += (280-height)/seconds。seconds是0，因此将发生被零除的情况！width和height将是NaN（不是数字）。（2）中的代码应为：
if ( seconds > 1 ) {
seconds--;
} else if ( seconds == 1 ){
reverse = reverse ? false : true;
seconds = 70;
}
首先，我们检查
seconds是否高于1而不是0，以阻止seconds成为0，在这种情况下，我们减少1。如果
seconds是1，那么我们已经达到了max（或min）width和height。在这种情况下，如果我们增加，我们将
reverse，反之亦然。此外，我们将根据您的规格将
seconds重置为70。4-根据上述变化，
seconds的初始值应为61，而不是60：seconds = parseInt(time.textContent)*61;
那是因为我们会在
seconds开始时立即减少addEventListener。以下是JSFiddle
关于javascript - 按设置的间隔增加和减少div的宽度和高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47064664/