js定时器用法_js三种定时器

js定时器用法_js三种定时器一、js 定时器有两种方法: 第一种: Setinterval() : 含义: 按照指定的周期,(以毫秒计), 来调用函数或计算表达式 过程: 这个方法会不停地调用函数,一直到停止或者关闭它 返回值:返回的 ID 值可用作 关闭(clearInterval())方法的参数 对应方法 Setinter

js定时器用法_js三种定时器"

一、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

(0)
编程小号编程小号
上一篇 2023-09-05
下一篇 2023-09-05

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注