zoukankan      html  css  js  c++  java
  • 16.JavaScript用setTimeout函数做出计时效果

    JavaScript使用setTimeout函数做出计时效果:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <button id="btn1">开始计时</button>
        <button id="btn2">结束计时</button>
        <div>0</div>
        <script>
            var num = 0;
            var timer = null;
            var div = document.querySelector("div");
            var btn1 = document.querySelector("#btn1");
            var btn2 = document.querySelector("#btn2");
            btn1.onclick = function () {
                interval(function(){
                    num++;
                    div.innerHTML = num;
                }, 1000);
            }
            //使用setTimeout函数实现定时器
            function interval(callback, time) {
                timer = setTimeout(function(){
                    callback();
                    interval(callback, time);//重新调用interval(),异步执行
                }, time);
            }
            btn2.onclick = function(){
                clearTimeout(timer);
            }
        </script>
    </body>
    
    </html>
    index.html
  • 相关阅读:
    20 模块之 re subprocess
    19 模块之shelve xml haslib configparser
    18 包 ,logging模块使用
    vue项目的搭建使用
    课程模块表结构
    DRF分页组件
    Django ContentType组件
    跨域
    解析器和渲染器
    DRF 权限 频率
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12792780.html
Copyright © 2011-2022 走看看