<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> var c=0; //设置全局变量 c 并赋值0,t var t; function timeCounter() { document.getElementById("txt").value=c; //将c的值赋值给id为txt的元素的值 c = c+1; //产生计时效果 加一 t=setTimeout("timeCounter()",1000); //每一秒执行一次这个函数 } </script> </head> <body> <input type="button" onclick="timeCounter()" value="计时" /> <input type="text" id="txt" /> </body> </html>
开始我自己写的时候是将变量写入函数中 如下
function timeCounter() { var c=document.getElementById("txt").value; c=0 c = c+1; var t=setTimeout("timeCounter()",1000); }
这样的函数不会产生什么效果,难道这样和正确的有什么不一样吗?慢慢分析,这个函数是将元素的值赋值给了c,则主体为c,不管c怎么变,元素的值都不会变化,更不可能会显示了。后来我再次修改
function timeCounter() { var c=0; document.getElementById("txt").value=c; c = c+1; var t=setTimeout("timeCounter()",1000); }
这回总是以元素的值为主体了吧,结果显示的效果是,点一下计时出现一个0,然后一直就是0。再分析一下,这个函数怎么弄它都是0,它这里的元素值是c=0的时候赋的值,自然不会有变化。那么怎么它会有变化呢?我再次修改
var c=0; function timeCounter() { document.getElementById("txt").value=c; c = c+1; var t=setTimeout("timeCounter()",1000); }
当c为全局变量的时候,便可以产生计时的效果。
时间: 2024-10-06 08:11:49