美文网首页
定时器的使用

定时器的使用

作者: 虎三呀 | 来源:发表于2018-02-08 14:08 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                
                window.onload = function(){
                    
                    //获取count
                    var count = document.getElementById("count");
                    
                    //使count中的内容,自动切换
                    /*
                     * JS的程序的执行速度是非常非常快的
                     *  如果希望一段程序,可以每间隔一段时间执行一次,可以使用定时调用
                     */
                    /*for(var i=0 ; i<10000 ; i++){
                        count.innerHTML = i;
                        
                        alert("hello");
                    }*/
                    
                    /*
                     * setInterval()
                     *  - 定时调用
                     *  - 可以将一个函数,每隔一段时间执行一次
                     *  - 参数:
                     *      1.回调函数,该函数会每隔一段时间被调用一次
                     *      2.每次调用间隔的时间,单位是毫秒
                     * 
                     *  - 返回值:
                     *      返回一个Number类型的数据
                     *      这个数字用来作为定时器的唯一标识
                     */
                    var num = 1;
                    
                    var timer = setInterval(function(){
                        
                        count.innerHTML = num++;
                        
                        if(num == 11){
                            //关闭定时器
                            clearInterval(timer);
                        }
                        
                    },1000);
                    
                    //console.log(timer);
                    
                    //clearInterval()可以用来关闭一个定时器
                    //方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
                    //clearInterval(timer);
                    
                };
                
                
            </script>
        </head>
        <body>
            <h1 id="count"></h1>
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:定时器的使用

          本文链接:https://www.haomeiwen.com/subject/mnrttftx.html