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

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

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

大年糕

2017-03-03 16:58

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

写回答关注

3回答

从心所欲

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

从心所欲回复大年糕

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

2017-03-08 16:17:35

共 2 条回复 >
大年糕

2017-03-03 17:51:53

改哪里啦？

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

1 0

大年糕

为什么放在body之间才好使呢？

2017-03-03 17:54:00

共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468060 学习 · 21891 问题

查看课程

相似问题

麻烦大家帮忙给看一下是哪里的问题

回答 2

各路大牛，麻烦帮忙看看并详细解释下，问题图中已备注。谢谢

回答 2

回答 1

回答 2

回答 5