初学JS--自制计时器

最新推荐文章于 2024-06-05 15:33:33 发布

ReE锐

最新推荐文章于 2024-06-05 15:33:33 发布

阅读量508

点赞数

本文链接：https://blog.csdn.net/fang858/article/details/18187805

版权

之前错误的写法1:

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<script type="text/javascript">

var sec = 1;
var timeId = setInterval("countNum(str);", 1000);

function countNum(str){

if (str == "start") {//假如用if去判断的话,sec只有增加一次,正确的写法是去掉判断直接一开始就使用里面的语句
document.getElementById("num").innerHTML = sec++;
}

if (str == "shop") {
var shopTime = clearInterval(timeId);
}
}

</script>
<font id="num">0</font>秒钟
<input type="button" value="开始" οnclick="countNum('start')">
<input type="button" value="停止" οnclick="countNum('shop')">
</html>

之前错误的写法2:

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<script type="text/javascript">

var sec = 1;
var timeId = setInterval("countNum(str);", 1000);

function countNum(str){

document.getElementById("num").innerHTML = sec++;

if (str == "shop") {
var shopTime = clearInterval(timeId);
}
}

</script>
<font id="num">0</font>秒钟
<input type="button" value="开始" οnclick="countNum()">
<input type="button" value="停止" οnclick="countNum('shop')">
</html>

更改了上面的错误后,开始键可以使用了，但发生了新的错误，按停止键的时候id=num的文本内容在停止前会加上1，原因是停止键执行的是停止timeId的表达式，但是该表达式是指定的函数会去执行一次countNum()函数，该函数里面有第一条增加sec的值，所以还是错了，根据这个逻辑把开始和停止分开写函数终于可以正常运行了

正确的代码：

var sec = 0;
var timeId = setInterval("countNum();", 1000);

function countNum(){

document.getElementById("num").innerHTML = sec++;
}

function shopNum(){
var shopTime = clearInterval(timeId);
}

</script>
<font id="num">0</font>秒钟
<input type="button" value="开始" οnclick="countNum()">
<input type="button" value="停止" οnclick="shopNum()">
</html>

早上运行代码又错了，

只要执行过停止键后，再按开始计时就失效了，只能没按一次加1秒，沿着逻辑往上找，终于知道原因了，因为var timeId在外面的原因，value=开始绑定了countNum函数，所有要按键才开始，而当停止过后再去执行的只是countNum()里面的函数。根据逻辑修改，成下面的版本

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<script type="text/javascript">
var sec = 1;

function countTime(){
timeId = setInterval("document.getElementById('num').innerHTML = sec++;", 1000);
}

function countshop(){
var shopTime = clearInterval(timeId);
}

</script>
<font id="num">0</font>秒钟
<input type="button" value="开始计时" οnclick="countTime();">
<input type="button" value="停止计时" οnclick="countshop();">
<input type="button" value="从新开始" οnclick="countshop();">
</html>