<!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为全局变量的时候，便可以产生计时的效果。
原文：http://www.cnblogs.com/yogi/p/6687787.html