javaScript计时器

最新推荐文章于 2025-05-04 16:04:03 发布

原创最新推荐文章于 2025-05-04 16:04:03 发布

· 1.1w 阅读

23 ·

版权

文章标签：

#javascript #开发语言 #ecmascript

javascript 专栏收录该内容

7 篇文章

订阅专栏

一.计时器

什么是计时器?

Window中为我们提供了两种计时器,即: 定时器setTimeout() 和延迟计时器setInterval()

定时器setTimeout()为一次性计时器,即在规定时间后执行,且只执行一次;而延迟计时器setInterval()可以实现在指定时间内重复执行.

计时器的语法

1.定时器

创建定时器:
```
var timer = setInterval(function(){
                        
                    },ms);
```
- 注:
  - 这里我们使用setInterval()方法之后返回一个timer,timer是该计时器的唯一标识.
  - 参数ms即为在ms毫秒之后执行此定时器中的方法.
删除定时器:
```
clearInterval(timer);
```
- 使用此方法即可以清除计时器,参数即为待清除计时器的唯一标识.

2.延迟器

创建延迟器:
```
var timer = setTimeout(function(){
                        
                    },ms);
```
- 注:
  - 这里与定时器相同,我们在创建延迟器之后也会返回一个计时器的唯一标识.
  - 参数ms即为在ms毫秒之后重复执行此定时器中的方法.
删除延迟器:
```
clearTimeout(timer);
```
- 使用此方法即可以清除计时器,参数即为待清除计时器的唯一标识.

二.计时器使用实例

在这里我们使用计时器实现了一个倒计时的功能.我们通过点击登录按钮出现一个倒计时10秒钟的计时器.且在计时过程中按钮不再可以被点击. 这种计时器我们也很常见,比如在某些网页中,我们刚进入必须浏览某些内容达到指定时间才能正式进入网页.

首先是代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
        
            var time = 10;
            function settime(val){
                if(time==0){
                    val.removeAttribute("disabled");
                    val.value="登录";
                    time=10;
                }else{
                    val.setAttribute("disabled",true);
                    val.value="登录("+time+")";
                    time--;
                    setTimeout(function(){
                        settime(val)
                    },1000)
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="but" onclick="settime(this)" value="登录"/>
    </body>
</html>