一、js 定时器有两种方法：
第一种： Setinterval() :
含义： 按照指定的周期，(以毫秒计)， 来调用函数或计算表达式
过程： 这个方法会不停地调用函数，一直到停止或者关闭它
返回值：返回的 ID 值可用作 关闭（clearInterval()）方法的参数
对应方法 Setinterval() : clearInterval()；
格式：setInterval(code,millisec)
Code 要调用的代码块或者函数
Millisec 周期性执行代码块或函数的间隔，以毫秒计
setInterval(function(){},1000)； //相隔一秒持续执行， function(){} //持续执行function()里面的操作。
clearInterval(); //实现关闭
案例：首先实现一个 不进行关闭的效果
1 <head> // 这个最终实现效果是： 每个一秒就让 num 这个值进行加一。 2 <meta charset="utf-8"> 3 <title></title> 4 <script type="text/javascript"> 5 window.onload = function(){ 6 var num = 0; //首先要明白 参数一是一个一直不断的执行，如果把 num 定义放在后面的话，就会一直是0 7 setInterval(function(){ //穿的两个参数，一个是你要执行的代码块，一个是相隔多少秒 8 document.write(num++); 9 },1000) 10 } 11 </script> 12 </head> 13 <body> 14 </body>
案例2：实现两个方法相互对应操作。
1 <head> 2 <meta charset="utf-8"> 3 <title></title> 4 <style type="text/css"> 5 #id{ 6 height: 150px; 7 width: 150px; 8 background-color: #D2691E; 9 } 10 </style> 11 <!-- --> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 var oId = document.getElementById('id'); 15 var isBlack = false; // 设置一开始是关闭的 16 var zhixing = null; 17 function coleRomde(){ 18 oId.style.background = "rgb(" + parseInt(Math.random()*255+1) + "," + parseInt(Math.random()*255+1) + "," +parseInt(Math.random()*255+1)+")"; 19 console.log(oId.style.background); 20 } 21 oId.onclick = function(){ 22 if(isBlack){ 23 zhixing = setInterval(function(){ 24 coleRomde(); 25 },1000) 26 isBlack = false; 27 }else{ 28 /* 首先一开始是false，所以就会先执行这个false */ 29 clearInterval(zhixing); 30 isBlack = true; //当一开始给isBlsck设置为false，所以就要先进行执行这个关闭， 31 /* 关闭之后 把那个属性改为 true ，然后进行执行if()里面的代码 */ 32 } 33 } 34 35 } 36 </script> 37 </head> 38 <body> 39 <div id = "id"></div> 40 </body>
二、延时器：SetTimeout():在指定的毫秒数后函数或计算表达式
1 <head> 2 <meta charset="utf-8"> 3 <title></title> 4 <!-- <script src="../js/public.js" type="text/javascript" charset="utf-8"></script> --> 5 <script type="text/javascript"> 6 window.onload = function(){ 7 var i = 1; 8 function yanShi(){ 9 document.write(i++) 10 } 11 var timer = setInterval(function(){ 12 yanShi(); 13 },1000) 14 15 setTimeout(function(){ //延迟 16 clearInterval(timer); // 2秒关闭这个定时器 17 },2000) 18 } 19 </script> 20 </head> 21 <body> 22 <div id="id"></div> 23 </body>
var expireMilliseconds = 0; // 过期时间对应的毫秒数
var timer = null;
// 倒计时函数
function countDown() {
timer = setInterval(function() {
var date = new Date();
var milliseSeconds = date.getTime();
if(milliseSeconds > expireMilliseconds) {
alert('订单过期');
clearInterval(timer);
} else {
var timesler = expireMilliseconds - milliseSeconds;
var minutes = Math.floor(timesler / (60 * 1000));
document.querySelector('span.minute').innerText = minutes;
var seconds = Math.floor(timesler % ( 60 * 1000 ) / 1000);
document.querySelector('span.second').innerText = seconds;
// Math.floor() // 向下取整
// Math.ceil() // 向上取整
// Math.round() // 四舍五入
}
}, 1000);
}
function time() {
var date = new Date(); // 获取当前时间对象
var spanMilliseconds = 60 * 60 * 1000; // 订单付款有效时间跨度(毫秒)
// 算出点击按钮生成订单一瞬间过期时间对应的毫秒数
expireMilliseconds = date.getTime() + spanMilliseconds;
countDown();
}
time();
今天的文章js定时器用法_js三种定时器分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/46385.html
