clearInterval 函数无法运行问题！麻烦大家看看给详细讲解下！

源自：8-4 取消计时器clearInterval()

clearInterval 函数无法运行问题！麻烦大家看看给详细讲解下！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var i;
//一秒后运行函数clock
i=setInterval("clock()",1000);
//隐藏开始按钮
var staClock=document.getElementById("a");
var stpClock=document.getElementById("b");
staClock.style.display="none";
//clock函数
function clock()
{
   var myDate=new Date();
   var atTime=myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds();
   document.getElementById("clock").value=atTime;
}
//停止时间隐藏停止按钮并显示开始按钮
function stopClock()
{
   clearInterval(i);
   staClock.style.display="block";
   stpClock.style.display="none";
}
//开始时间隐藏开始按钮并显示暂停按钮
function startClock()
{
   i=setInterval(i);
   staClock.style.display="none";
   stpClock.style.display="block";
}
</script>
</head>
<body>
<input type="text" id="clock" size="6px" />
<input id="b" type="button" value="暂停" onclick="stopClock()" />
<input id="a" type="button" value="开始" onclick="clockStart()" />
</body>
</html>

提问者：大年糕 2017-03-03 16:58

个回答

从心所欲

2017-03-03 18:34:31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<input type="text" id="clock" size="6px" />
<input id="b" type="button" value="暂停" onclick="stopClock()" />
<input id="a" type="button" value="开始" onclick="clockStart()" />
<script type="text/javascript">
//页面加载顺序问题js代码写在页面下方
//一秒后运行函数clock
var i=setInterval("clock()",1000);

//函数外定义一个未定义的变量用于添加和删除计时器
var j;

//隐藏开始按钮
var staClock=document.getElementById("a");
var stpClock=document.getElementById("b");
staClock.style.display="none";

//clock函数
function clock()
{
  var myDate=new Date();
  var atTime=myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds();
  document.getElementById("clock").value=atTime;
}

//停止时间隐藏停止按钮并显示开始按钮
function stopClock()
{
  clearInterval(i); //此处函数外的计时器已经清除了，所以你没法再调用
  clearInterval(j);
  staClock.style.display="inline-block"; //input内联块状元素，你改成block后会单独占一行
  stpClock.style.display="none";
}

//开始时间隐藏开始按钮并显示暂停按钮
function clockStart()    //此处函数名你写错了。。。。。
{
  //i=setInterval(i); //此处函数外的计时器已经清除了，所以你没法再调用，而且写法错误，没有这种写法
  j=setInterval("clock()",1000); //此处重新定义计时器
  staClock.style.display="none";
  stpClock.style.display="inline-block";
}
</script>
</body>
</html>

0
大年糕

2017-03-03 17:51:53

改哪里啦？

0
weibo_金刚不再葫芦娃_0

2017-03-03 17:45:50

<body>
<input type="text" id="clock" size="6px" />
<input id="b" type="button" value="暂停" onclick="stopClock()" />
<input id="a" type="button" value="开始" onclick="startClock()" />

<script type="text/javascript">
var i;
//一秒后运行函数clock
i=setInterval("clock()",1000);
//隐藏开始按钮
var staClock=document.getElementById("a");
var stpClock=document.getElementById("b");
staClock.style.display="none";
//clock函数
function clock()
{
    var myDate=new Date();
    var atTime=myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds();
    document.getElementById("clock").value=atTime;
}
//停止时间隐藏停止按钮并显示开始按钮
function stopClock()
{
    clearInterval(i);
    staClock.style.display="block";
    stpClock.style.display="none";
}
//开始时间隐藏开始按钮并显示暂停按钮
function startClock()
{
   setInterval("clock()",100)
    staClock.style.display="none";
    stpClock.style.display="block";
}
</script>
</script>
</body>
</html>

0