setInterval和setTimeout定时器延时器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器延时器</title>
</head>
<body>
    <input type="button" name="#" value=" 点击开始" id="btn">
    <input type="button" name="#" value=" 点击停止" id="btn2">
    <p id="txtbox">1</p>
</body>
<script type="text/javascript">

//   以下是定时器特效


// var objbtn=document.getElementById('btn');  //获取点击开始按钮对象
// var ding='';      //定义全局变量为空
//     objbtn.onclick=function(){   //   点击开始按钮  运行函数方法
//         if(ding==''){     //  判断全局变量是否为空
//             ding=setInterval(fun,1000);    //  运行定时器  fun  为运行的函数 .fun()带括号是运行函数的结果。  1000为毫秒   就是1秒钟运行一次  
//         }
        
//     };
//     function fun(){   
        
//         document.getElementById("txtbox").innerText=parseInt(document.getElementById("txtbox").innerText)+1;
//         //id为txtbox元素内的值等于本身的值加一   parseInt   把获取到的值转换为整数
//     }
//     document.getElementById('btn2').onclick=function(){    //  点击停止按钮  运行函数
//         clearInterval(ding);                 //清除定时器  
//         ding='';            
//     }



    //  以下是延时器特效



var objbtn=document.getElementById('btn');  //获取点击开始按钮对象
var ding='';      //定义全局变量为空
    objbtn.onclick=function(){   //   点击开始按钮  运行函数方法
        if(ding==''){     //  判断全局变量是否为空
            ding=setTimeout(fun,9000);    //  运行延时器  fun  为运行的函数 .fun()带括号是运行函数的结果。  1000为毫秒   一秒钟后运行函数
                                        //只运行一次是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 
        }
        
    };
    function fun(){   
        
        document.getElementById("txtbox").innerText=parseInt(document.getElementById("txtbox").innerText)+1;
        //id为txtbox元素内的值等于本身的值加一   parseInt   把获取到的值转换为整数
    }
    document.getElementById('btn2').onclick=function(){    //  点击停止按钮  运行函数
        clearTimeout(ding);                 //清除定时器  
        ding='';            
    }
</script>
</html>

 

posted @ 2017-11-21 14:26  Jinsuo  阅读(335)  评论(0)  编辑  收藏  举报