定时器

最新推荐文章于 2024-08-26 08:49:30 发布

cybcc

最新推荐文章于 2024-08-26 08:49:30 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/cybcc/article/details/104196351

版权

定时器

1. setInterval(): 会去重复执行某一个功能
参数1：每次执行的具体任务, 自定义
参数2：每次执行的间隔时间, 自定义单位为毫秒
语法：var t=setTimeout(“javascript语句”,毫秒)
清除定时器:
1. 需要有记录器(变量自增),来记录运行次数，到达指定条件时触发
2. 定义定时器时，需要定义变量来保存这个定时器(例如： time)，然后使用clearInterval()方法。来清除这个变量中的定时器，并将这个变量置空 (time = null)

 <div class="box"></div>
<script type="text/javascript">
			
			var box = document.getElementsByClassName("box")[0];		
			var i = 0;	
			var num = 0;  //定时器的 次数 记录器  (自定义的)
			var time = setInterval(function (){
				 i = Math.floor(Math.random()*250);
				 box.innerHTML = "啊啊啊~~" + i;
				 num++;  //变量自增
				console.log("啊啊啊");
				if(num > 5){  //如果到达指定条件	 
				   clearInterval(time);
				   time = null;	
			    }
			},1000);
	< /script>

2.setTimeout(): 只执行一次的定时器
参数1：执行的具体任务
参数2：间隔多久执行 (延迟)

<div class="box"></div>
<script type="text/javascript">
          var time_two = setTimeout(function(){
				box.style.backgroundColor = "yellow";
				console.log("啦啦啦");
			},2000);
< /script>

练习：计算你活了多少天了？

 < style>
     .div2{
				height: 200px;
				text-align: center;
				line-height: 200px;
				font-size: 28px;
				background-color: darkgrey;
				color: pink;
				margin-top: 100px;
				border: 10px dashed;
			}
			
	 </style>
	 <body>
             <div class="div2"></div>
	        <script type="text/javascript">
                   var div2 = document.getElementsByClassName("div2")[0];
                   var time2 = setInterval(function(){
				   var d1 = new Date(1997,2,10);
				   var d2 = new Date();
				   var getTime11 = d1.getTime();
				   var getTime22 = d2.getTime();
				   var getTimez = getTime22 - getTime11;
				   var getDayt = Math.floor(getTimez/1000/60/60/24);
				   var getHourt = Math.floor(getTimez/1000/60/60%24);
				   var getMinutest = Math.floor(getTimez/1000/60%60);
				   var getSecondst = Math.floor(getTimez/1000%60);   
				   
				   div2.innerHTML = "本人已经活了: " + getDayt + "天" + getHourt + "时" + getMinutest + "分" + getSecondst + "秒";
            },1000);
     < /script>
  <body>