qq_陈大吹_0
2018-06-30 09:45
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clck").value = time;
i=setInterval(clock,1000);
}
var i=setInterval(clock,1000);
</script>
</head>
<body>
<form>
<input type="text" id="clck" size="50" />
<input type="button" value="start" onclick="clock()"/>
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>
还有如果你非要把 var i=setInterval(clock,1000);放到clock()函数中,会导致clock()函数递归,系统会每隔1秒调用1次clock()函数并生成一次计时器。。。所以你点了stop键也没用,但是如果你的手速足够快,1秒钟内点击2次以上吧,会发现计时器能够停止计时。。。。如果点慢了,则递归函数会重新生成计时器并刷新时间。
不好意思,我弄错了。下一节里面会讲到这种用法,涉及到递归。
你这里之所以运行不出来,是因为html中程序是从上往下运行的,文档一开始先加载上面的JavaScript文件,这时body标签中的input里的内容都没有加载完成,而你的写法中JavaScript里 document.getElementById("clck").value = time;这一句含有input标签的id “clck”,因为"clck"还没有定义,所以系统无法识别。
解决方式是使用window.onload=function(){你的js代码};功能是文档内容加载完成之后,再最后加载你的js代码,这样系统就能够识别你的id“clck”了。
另外你的函数中i没有声明,函数外面的i却声明了,有点混乱。
仔细看一下setInterval()的两种用法:
第一种:setInterval(clock,1000);
第二种:setInterval(“clock()”,1000);
如果你把setInterval(clock,1000)放到clock()函数里面,那么这里函数clock()还没有定义完成,系统无法识别setInterval(clock,1000)中的clock是什么东西,故无法运行。
语法不支持
JavaScript进阶篇
468060 学习 · 21891 问题
相似问题