setInterval和setTimeout定时器延时器

时间：2022-04-04 23:29:35
<!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>

 

标签：

相关文章