JavaScript-输入计数事件_Javascript_Intervals

JavaScript-输入计数事件

javascript

JavaScript-输入计数事件,javascript,intervals,Javascript,Intervals,我正在尝试编写一个代码，从第一个文本框到第二个文本框进行计数，并显示该计数，每秒钟计数一次我刚开始学习JS，所以我不知道代码中有什么错误 let firstSubmit = document.getElementById('beginTime'); let secondSubmit = document.getElementById('endTime'); let showElement = document.getElementById("show"); setInterval(funct

我正在尝试编写一个代码，从第一个文本框到第二个文本框进行计数，并显示该计数，每秒钟计数一次

我刚开始学习JS，所以我不知道代码中有什么错误

let firstSubmit = document.getElementById('beginTime');
let secondSubmit = document.getElementById('endTime');
let showElement = document.getElementById("show");

setInterval(function  setUp(){
    let firstNumber = input.value;
    let secondNumber = input.value;
    let result = 0;

    for (set i = firstNumber; i <= secondNumber; i++) {
        result += i;
        let newItem = document.createElement("ul");
        newItem.innerHTML = String(i);
        showElement.appendChild(newItem);
    },1000);
}

let firstSubmit=document.getElementById（'beginTime'）；
让secondSubmit=document.getElementById（'endTime'）；
让showElement=document.getElementById（“show”）；
setInterval（函数设置（）{
设firstNumber=input.value；
设secondNumber=input.value；
设结果=0；
对于（set i=firstNumber；i所以，我为您构建了一些东西。自从您从JS开始以来，我添加了注释，以便您了解代码中的情况
let firstSubmit = document.getElementById('beginTime');
let secondSubmit = document.getElementById('endTime');
let showElement = document.getElementById("show");

setInterval(function  setUp(){
    let firstNumber = input.value;
    let secondNumber = input.value;
    let result = 0;

    for (set i = firstNumber; i <= secondNumber; i++) {
        result += i;
        let newItem = document.createElement("ul");
        newItem.innerHTML = String(i);
        showElement.appendChild(newItem);
    },1000);
}

我遗漏了很多检查正确的输入，只是为了保持代码简短
首先，我们从html文件开始，我对该文件做了一些修改，只是重命名了元素的ID并删除了空值：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="count.js" type="text/javascript"></script>
    <title></title>
</head>

<body onload="setUp()">
    <h1>Timer</h1>
    <p>
        <input type="text" id="beginTimeInput"> to <input type="text" id="endTimeInput">
        <button type="button" id="startButton">Start</button>
    </p>
    <ul id="show"></ul>
</body>
</html>

在行动中看到它：

函数设置（）{
//获取我们需要的元素
让firstSubmit=document.getElementById（'beginTimeInput'）；
让secondSubmit=document.getElementById（'endTimeInput'）；
让startButton=document.getElementById（'startButton'）；
让showElement=document.getElementById（“show”）；
//为startButton提供onclick功能
startButton.onclick=函数（）{
//让我们清理并删除showElement的所有内容
//总是从“新鲜”开始
showElement.innerHTML=''；
//获取输入的值。
//请注意，用户可能没有输入数字或什么都没有！
//空字符串将变为0，数字为（“”）
让firstNumber=Number（firstSubmit.value）；
设secondNumber=Number（secondSubmit.value）；
//如果用户输入zwo编号，我们会进行快速检查，然后检查计数器
//允许开始，否则我们不开始计数。这不是
//最好的解决方案，但您刚刚开始使用JS，所以我们保持简单。
//isNaN是一个函数，用于检查传递的值是否不是数字。
//！isNan的意思是“不是一个数字”…我希望你明白了
//如果firstNumber和secondNumber相同，我们也不会启动。
如果（！isNaN（firstNumber）&&！isNaN（secondNumber）&&firstNumber！=secondNumber）{
//将结果设置为firstNumber-1，以便在第一个间隔处打勾
//它会增加到firstNumber，然后添加到
让结果=第一个数字-1；
//设置从firstNumber到secondNumber的计数间隔
//将新的LI元素添加到showElement（在本例中为UL元素）
//intervalID是一个数字，表示计时器的ID值
//已设置。计数完成后，我们使用此ID停止创建的
//间隔，因此当
//工作已经完成了。
让intervalID=setInterval（函数（）{
结果++；
//创建新的LI元素并将其附加到showElement
让newItem=document.createElement（'li'）；
newItem.innerText=字符串（结果）；
showElement.appendChild（newItem）；
//检查我们是否达到第二个数字，如果是，让我们停止间隔
//通过使用之前存储的intervalID
如果（结果>=secondNumber）{
clearInterval（intervalID）；
}
}, 1000);
}
};
}

计时器

到
开始


有几个问题。请查看此代码。这不是一个答案，但它会让你更接近。我注释掉其中的一部分，因为我不知道你想做什么。它每秒钟都会运行你的循环，所以有办法打破它
let firstSubmit = document.getElementById('beginTime');
let secondSubmit = document.getElementById('endTime');
let showElement = document.getElementById("show");

setInterval(function() {
  let firstNumber = firstSubmit.value;
  let secondNumber = secondSubmit.value;
  let result = 0;

  for (i = firstNumber; i <= secondNumber; i++) {
    result += i;
    console.log(i);
    /*let newItem = document.createElement("ul");
    newItem.innerHTML = String(i);
    showElement.appendChild(newItem);*/
  }
}, 1000);

let firstSubmit=document.getElementById（'beginTime'）；
让secondSubmit=document.getElementById（'endTime'）；
让showElement=document.getElementById（“show”）；
setInterval（函数（）{
让firstNumber=firstSubmit.value；
设secondNumber=secondSubmit.value；
设结果=0；
对于（i=firstNumber；我欢迎使用SO，请分享您想要的计数，计数时间（秒）或者输入字符？还有，请发布html，这样我们就可以复制它。计数是这样的：第一次输入是6秒是9秒，计数将是6到9秒每1秒感谢Tom，这帮了大忙。如果我想设置一个键来暂停倒计时并继续，是不是按键事件？比如，如果我想设置空格键来暂停count，然后再次按空格键继续。
let firstSubmit = document.getElementById('beginTime');
let secondSubmit = document.getElementById('endTime');
let showElement = document.getElementById("show");

setInterval(function() {
  let firstNumber = firstSubmit.value;
  let secondNumber = secondSubmit.value;
  let result = 0;

  for (i = firstNumber; i <= secondNumber; i++) {
    result += i;
    console.log(i);
    /*let newItem = document.createElement("ul");
    newItem.innerHTML = String(i);
    showElement.appendChild(newItem);*/
  }
}, 1000);