使用javascript制作简单计时器，但行为怪异
我是Javascript的初学者。我想做一个计时器。它工作得很好，但是当涉及到使用javascript制作简单计时器，但行为怪异,javascript,timer,Javascript,Timer,我是Javascript的初学者。我想做一个计时器。它工作得很好，但是当涉及到暂停和停止按钮时，它们根本不能正常工作 对于暂停按钮。。假设计时器在0:58上，当按下Pause按钮时，计时器在0:58停止，但当我再次按下它以恢复 倒计时。。它只是变成了0:57。。然后停下来，它 直到0点才继续 对于停止按钮。。当我简单地按下它时，它给出了这个错误 : 未捕获引用错误：未定义checkstate 下面是全部代码的组合，所以你们可以测试它，如果还有其他内容，请告诉我： <!DOCTYPE h
暂停停止- 对于
按钮。。假设计时器在暂停
上，当按下0:58
按钮时，计时器在Pause
停止，但当我再次按下它以恢复 倒计时。。它只是变成了0:58
。。然后停下来，它 直到0点才继续0:57 - 对于
按钮。。当我简单地按下它时，它给出了这个错误 : 未捕获引用错误：未定义checkstate停止
<!DOCTYPE html>
<html>
<head>
<style>
html, body, p, input, button {
margin:0;
padding:0;
}
html , body {
height : 100%;
}
#mainContent {
width : 300px;
height : 200px;
margin: 50px auto;
}
#seconds {
padding : 10px;
font-size : 15px;
font-weight:bold;
}
button {
padding : 10px;
}
#interfereButton {
margin : 0 40px;
}
#timer {
width : 200px;
height: 100px;
margin-top: 20px;
font-weight:bold;
font-size : 60px;
text-align : center;
}
</style>
<title>Timer</title>
</head>
<body>
<div id="mainContent">
<div id="userControl">
<input type="text" name="seconds" id="seconds"/>
<button id="start">Start</button>
</div>
<p id="timer">0:00</p>
<div id="interfereButton">
<button id="pause">Pause</button>
<button id="stop">Stop</button>
</div>
<script>
var timer = document.getElementById("timer");
var start = document.getElementById("start");
var startPoint = document.getElementById("seconds");
var userControl = document.getElementById("userControl");
var userInterfere = document.getElementById("interfereButton");
var pause = document.getElementById("pause");
var stop = document.getElementById("stop");
var timerHandle;
var tempValue;
function checkState(){
if (timer.innerHTML == "0:00"){
userControl.style.display = "block";
userInterfere.style.display = "none";
timer.style.color = "black";
} else {
userControl.style.display = "none";
userInterfere.style.display = "block";
}
}
function activate(x){
var min = x.split(":")[0];
var sec = x.split(":")[1];
if(min >= 0){
sec--;
if(sec < 0){
sec = 59;
min--;
if(min < 0) {
sec = "00" ;
min = 0 ;
clearInterval(timerHandle);
}
} else if(sec < 10) {
sec = "0" + sec;
timer.style.color = "red";
}
timer.innerHTML = min + ":" + sec ;
} else {
clearInterval(timerHandle);
}
checkState();
}
start.onclick = function() {
if(!isNaN(startPoint.value)){
timer.innerHTML= startPoint.value + ":00" ;
userControl.style.display = "none";
userInterfere.style.display = "block";
timerHandle = setInterval("activate(timer.innerHTML)" , 1000);
} else {
alert("Sorry, only numerical values are allowed.");
}
}
pause.onclick = function() {
if(pause.innerHTML == "Pause"){
tempValue = timer.innerHTML;
clearInterval(timerHandle);
pause.innerHTML = "Resume";
} else if(pause.innerHTML == "Resume"){
timerHandle = setInterval("activate(tempValue)" , 1000);
pause.innerHTML = "Pause";
}
}
stop.onclick = function(){
clearInterval(timerHandle);
timer.innerHTML = "0:00";
checkstate();
}
window.onload = function(){
userInterfere.style.display = "none";
}
</script>
</div>
</body>
</html>
html、正文、p、输入、按钮{
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
#主要内容{
宽度：300px；
高度：200px；
保证金：50px自动；
}
#秒{
填充：10px；
字体大小：15px；
字体大小：粗体；
}
钮扣{
填充：10px；
}
#干扰按钮{
利润率：0.40px；
}
#计时器{
宽度：200px；
高度：100px；
边缘顶部：20px；
字体大小：粗体；
字体大小：60px；
文本对齐：居中；
}
计时器
开始
0:00
暂停
停止
var timer=document.getElementById（“计时器”）；
var start=document.getElementById（“start”）；
var startPoint=document.getElementById（“秒”）；
var userControl=document.getElementById（“userControl”）；
var userInterfere=document.getElementById（“interferButton”）；
var pause=document.getElementById（“pause”）；
var stop=document.getElementById（“stop”）；
var-timerHandle；
var值；
函数checkState（）{
如果（timer.innerHTML==“0:00”）{
userControl.style.display=“block”；
userInterfere.style.display=“无”；
timer.style.color=“黑色”；
}否则{
userControl.style.display=“无”；
userInterfere.style.display=“block”；
}
}
功能激活（x）{
var min=x.split（“：”[0]；
var sec=x.split（“：”[1]；
如果（最小值>=0）{
第二节；
如果（秒<0）{
秒=59；
闵--；
如果（最小值<0）{
sec=“00”；
最小值=0；
clearInterval（timerHandle）；
}
}否则，如果（第10节）{
秒=“0”+秒；
timer.style.color=“红色”；
}
timer.innerHTML=min+“：”+秒；
}否则{
clearInterval（timerHandle）；
}
checkState（）；
}
start.onclick=function（）{
如果（！isNaN（起始点值））{
timer.innerHTML=startPoint.value+“：00”；
userControl.style.display=“无”；
userInterfere.style.display=“block”；
timerHandle=setInterval（“激活（timer.innerHTML）”，1000）；
}否则{
警报（“对不起，只允许使用数值。”）；
}
}
pause.onclick=函数（）{
如果（pause.innerHTML==“pause”）{
tempValue=timer.innerHTML；
clearInterval（timerHandle）；
pause.innerHTML=“恢复”；
}否则如果（pause.innerHTML==“Resume”）{
timerHandle=setInterval（“激活（tempValue）”，1000；
pause.innerHTML=“暂停”；
}
}
stop.onclick=函数（）{
clearInterval（timerHandle）；
timer.innerHTML=“0:00”；
checkstate（）；
}
window.onload=函数（）{
userInterfere.style.display=“无”；
}
stop.onclick中，你调用的是checkstate（），而函数名为checkstate。JavaScript区分大小写。您的问题是，当您尝试恢复时，您正在调用set interval passingtempValue
<代码>临时值setInterval(function(){
activate(timer.innerHTML);
}, 1000);
(function(globalScope) {
'use strict';
var timer, start, startPoint, userControl, userInterfere, pause,
stop, timerHandle, tempValue;
function tick() { .... }
... other functions here ...
window.onload = function(){
setGlobals();
setupBindings();
userInterfere.style.display = "none";
};
}(this));