                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

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

源自：JavaScript进阶篇 8-4

关注问题我要回答

1524

操作

收起

3 回答

从心所欲
2017-03-03

//一秒后运行函数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 回复有任何疑惑可以回复我~

收起回答

大年糕提问者

为什么JS要放到<body>里面，放到<head>里，在执行顺序上有什么问题吗？

2017-03-08 回复有任何疑惑可以回复我~

从心所欲回复大年糕提问者

1.JS的加载会阻塞其它内容的加载，就是页面要等待JS下载完成，解析运行完成才能继续加载其它内容，JS放在页面开始，如果网速慢或JS复杂，会造成长时间页面空白，用户体验不好。 2.JS一般会对DOM树进行操作，如果放在页首head中，DOM元素还没有加载完，一般还是要在onload等事件中运行JS，放在页尾，DOM树已经加载完成，可以直接运行。

2017-03-08 回复有任何疑惑可以回复我~

大年糕提问者
2017-03-03

改哪里啦？

0 回复有任何疑惑可以回复我~

收起回答

weibo_金刚不再葫芦娃_0
2017-03-03

<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>