即使在创建框的过程中，我也想随时更改创建框的速度。到目前为止，我有 4 个可用的按钮——一个生成随机大小/颜色框的按钮，一个增加框大小的按钮，一个重置功能的按钮，以及一个根据速度(毫秒)自动创建的按钮输入值。如您所见，每次输入新值时速度都会发生变化。前面提到，我想要实现的是在不刷新浏览器的情况下自由改变速度。我已经开始使用 Change 功能，但被困在那里。感谢您的阅读。
let num = 0;
var dispDiv = document.getElementById("display");
// Creating Random Boxes Function
function CreateRandomBoxes() {
var newDiv = document.createElement("div");
dispDiv.appendChild(newDiv);
newDiv.className = "boxes";
newDiv.id = "box" + num;
num++;
var ranWidth = Math.round(Math.random()*50)+50;
var ranHeight = Math.round(Math.random()*50)+50 ;
let r = Math.round(Math.random()*255),
g = Math.round(Math.random()*255),
b = Math.round(Math.random()*255);
newDiv.style.width = ranWidth + "px";
newDiv.style.height = ranHeight + "px";
newDiv.style.backgroundColor = "rgb("+r+","+g+","+b+")";
}
// Random Boxes
document.getElementById("createR").addEventListener("click",function(){
CreateRandomBoxes();
});
// Increments
var iw = 50;
var ih = 50;
document.getElementById("createI").addEventListener("click",function(){
var newDiv = document.createElement("div");
dispDiv.appendChild(newDiv);
newDiv.className = "boxes";
newDiv.style.width = iw + "px";
newDiv.style.height = ih + "px";
iw += 5;
ih += 5;
if (iw > 100) {
iw = 50;
}
if(ih > 100) {
ih = 50;
}
});
// Reset Function
document.getElementById("reset").addEventListener("click",function(){
// disDiv.textContent = "";
document.body.removeChild(dispDiv);
dispDiv = document.createElement("div");
dispDiv.id = "display";
document.body.appendChild(dispDiv);
});
// Auto Creation
document.getElementById("auto").addEventListener("click",function(){
var spd = document.getElementById("speed").value;
setInterval(function(){
CreateRandomBoxes();
window.scrollTo (0,document.body.scrollHeight);
} , spd);
});
// Changing speed while boxes are being created
document.getElementById("speed").addEventListener("change",function(){
});* {
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
.controls {
margin:10px auto;
display:flex;
align-items: center;
justify-content: center;
}
.controls .create,.remove {
width:150px;
height:50px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
font-size:1rem;
border-radius:50px;
color:#333;
border:1px solid #eee;
margin:0 3px;
}
.boxes {
width:100px;
height:100px;
background-color:#333;
display:inline-block;
}
input {
width:100px;
float:right;
padding:10px;
background-color:#fff;
border:1px solid #eee;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:1.5rem;
color:#333;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="index.css" rel="stylesheet">
<title>CRUD</title>
</head>
<body>
<div id="controls" class="controls">
<button id="createR" class="create">create random</button>
<button id="createI" class="create">create incremental</button>
<button id="reset" class="remove">reset</button>
<button id="auto" class="create">auto create</button>
<input type="number" id="speed" min="1" value="1000"/>
</div>
<div id="display"></div>
<script src="index.js"></script>
</body>
</html>最佳答案
一开始，你可以用你的变量来声明它(不知道是否有必要，但我想在尝试清除它之前检查它实际上是一个正在运行的计时器)。
var intvl = false;
第一次设置间隔时，将其分配给变量:
intvl = setInterval(function(){
CreateRandomBoxes();
window.scrollTo (0,document.body.scrollHeight);
} , spd);
然后，在您的更改函数中，如果计时器正在运行，则首先调用 clearInterval，然后用新时间启动它:
document.getElementById("speed").addEventListener("change",function(){
if(intvl !== false) {
clearInterval(intvl);
}
var spd = document.getElementById("speed").value;
intvl = setInterval(function() {
CreateRandomBoxes();
window.scrollTo(0, document.body.scrollHeight);
}, spd);
});
我评论中的 fiddle :http://jsfiddle.net/swk51b6q/
编辑:我建议设置一个最短时间限制 - 每 20 毫秒出现一个新框是疯狂的。
再次编辑:如果您不想更改计时器值以自动启动计时器，则可以将整个更改功能放在 if(intvl !== false) block 中已经开始了:
document.getElementById("speed").addEventListener("change",function(){
if(intvl !== false) {
clearInterval(intvl);
var spd = document.getElementById("speed").value;
intvl = setInterval(function() {
CreateRandomBoxes();
window.scrollTo(0, document.body.scrollHeight);
}, spd);
}
});
关于javascript - 更改在发生过程中创建框的速度(与 DOM "change"事件相关)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51529153/