JavaScript教程（十三）JavaScript的定时器setInterval()与setTimeout()

最新推荐文章于 2024-01-21 09:00:00 发布

豆皮没有豆

最新推荐文章于 2024-01-21 09:00:00 发布

阅读量434

点赞数

分类专栏： JavaScript 文章标签： web前端 JavaScript JavaScript定时器

本文链接：https://blog.csdn.net/qq_43434300/article/details/84993491

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

js定时器有以下两种方法:
(1).SetInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式,方法会不停的调用函数,直到clearInterval()被调用或者窗口被关闭.
(2) SetTimeout():在指定的毫秒数后调用函数或计算表达式.
1.setInterval();循环定时器：固定时间间隔指定一次,像闹钟一样,不关闭继续执行.
语法结构:
在这里插入图片描述

eg:每三秒弹出一个 hello

<script type="text/javascript">
	var time=setInterval(function(){//循环定时器
		document.write('hello');
	},3000)
</script>

注:一直循环无法停止时直接关闭窗口
clearInterval()被调用时

<script type="text/javascript">
	var time=setInterval(function(){//循环定时器
		document.write('hello');
	},3000)
	clearInterval(time);//用来停止
</script>

eg:显示当前时间，通过按钮实现时间的停止，开始

<script type="text/javascript">
	var mytimer;
	function startTimer(){
		mytimer=setInterval('myDate()',1000);	
	}
	function myDate(){
		var timeDate=new Date();//获取当前时间
		var times=timeDate.toLocaleTimeString();//将日期时间转换为字符串类型
		document.getElementById('demo').innerHTML=times;
	}
	function stopTimer(){
		clearInterval(mytimer);
	}
</script>
................
<body>
	<h4 id="demo">setInterval()计时器函数</h4>
	<input type="button" onclick="startTimer()" value="开始"/>
	<input type="button" onclick="stopTimer()" value="停止" />
</body>

SetTimeout();炸弹定时器:只执行一次,不能执行下一次了.
eg::实现一个页面的简易版时钟

<script type="text/javascript">
	function startTime(){
		var today=new Date();
		var h=today.getHours();
		var m=today.getMinutes();
		var s=today.getSeconds();
		m=ghTime(m);
		s=ghTime(s);
		document.getElementById('txt').innerHTML=h+':'+m+':'+s;
		t = setTimeout('startTime()', 500);
	}
	function ghTime(i){
		if(i < 10){
			i='0'+i
		}
		return i;
	}
</script>
........
<body onload="startTime()">
	<div id="txt"></div>
</body>

eg: 页面加载的时候,将当前的系统时间写入页面,并且是简易版的时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//问题: 页面加载的时候,将当前的系统时间写入页面,并且是简易版的时钟
//			window.onload=function(){
//				var DateDay=new Date();
//				var h=DateDay.getHours();//获取时间的小时
//				var m=DateDay.getMinutes();//获取时间的分钟
//				var s=DateDay.getSeconds();//获取时间的秒数
//				document.getElementById('div1').innerHTML='当前时间为:'+h+'时'+m+'分'+s+'秒';
//			}
			//因为以上这个函数是匿名函数,无法实现计时器的效果.只能执行一次
			//解决方式: 创建一个函数  函数体为以上获取的时间
			function dada(){
				var DateDay=new Date();
				var h=DateDay.getHours();//获取时间的小时
				var m=DateDay.getMinutes();//获取时间的分钟
				var s=DateDay.getSeconds();//获取时间的秒数
				m=checkeds(m);
				s=checkeds(s);
				document.getElementById('div1').innerHTML='当前时间为:'+h+'时'+m+'分'+s+'秒';
//				setTimeout(dada,1000);//错误的调用方法
				setTimeout('dada()',1000);
			}
//			setTimeout(dada(),1000); //只调用一次,并没有实现时钟效果
			function checkeds(i){
					if(i<10){
						i='0'+i;
					}
					return i;
				}
		</script>
	</head>
	<body onload="dada()">
	 	<div id="div1"></div>
	</body>
</html>

eg:实现打字机效果

<script type="text/javascript">
	//创建一个数组用来存储你要打印的一个字符
	var n=0;
	function load(){
		var arr=['没','有','什','么','是','一','包','辣','条','解','决','不','了','的',',','如','果','有',',','那','就','两','包','.'];
		var div=document.getElementById('div1');
		div.innerHTML+=arr[n];
		n++;
		var timer=setTimeout('load()',500);
		if(n>=arr.length){
			clearTimeout(timer);
			var timer1=setInterval('span()',500);
		}
	}
	function span(){
		var span1= document.getElementById('span1');
		if(span1.style.display=='block'){
			span1.style.display='none';
		}else{
			span1.style.display='block';
		}
	}
</script>
...................
<body onload="load()">
	<div id="div1" style="float: left; font-family: '微软雅黑';font-size: 20px;"></div>
   	<span id="span1">
   		<label style="color: red; font-size: 15px; font-family:  '微软雅黑';">|		</label>
   	</span>
</body>

eg:实现无缝滚动效果
样式css

<style type="text/css">
	#box {
        width: 350px;
        height: 400px;
        border: 1px solid pink;
    }
    #box1 {
        width: 100%;
        height: 400px;
        overflow: hidden;
        /*overflow: scroll;*/
    }
    #box a {
        text-decoration: none;
        color: black;
    }
    ul {
    	list-style: none;
    }
    li {
    	margin-top: 5%;
    }
</style>

JavaScript

<script type="text/javascript">
	//使用setInterval()  实现无缝滚动
	function mygundong(){
		var box1=document.getElementById('box1');
		//从con1克隆到con2
		var con1=document.getElementById('con1');
		var con2=document.getElementById('con2');
		con2.innerHTML=con1.innerHTML;
		//con1.offsetHeight 的高度
		//scrollTop 滚动条距离  父元素 顶部内侧之间的距离
		if(box1.scrollTop>(con1.offsetHeight+con2.offsetHeight)){
			box1.scrollTop=0;
		}else{
			box1.scrollTop++
		}
	}
	setInterval('mygundong()',50);
</script>

代码:

<body>
	<div id="box">
		<div id="box1">
			<ul id="con1">
				<li>
					<a href="#">1.HTML基本语法</a>
				</li>
				<li>
					<a href="#">2.css样式书写</a>
				</li>
				<li>
					<a href="#">3.HTML+CSS实现网页布局</a>
				</li>
				<li>
					<a href="#">4.JavaScript基础语法</a>
				</li>
				<li>
					<a href="#">5.JavaScript数组</a>
				</li>
				<li>
					<a href="#">6.JavaScript中DOM基本操作</a>
				</li>
				<li>
					<a href="#">7.JavaScript的OOP思想实现贪吃蛇游戏</a>
				</li>
				<li>
					<a href="#">8.jQuery基础</a>
				</li>
				<li>
					<a href="#">9.jQuery动画制作</a>
				</li>
				<li>
					<a href="#">10.jQuery插件使用技巧讲解</a>
				</li>
				<li>
					<a href="#">11.jQuery特效的实现</a>
				</li>
			</ul>
			<ul id="con2">				
			</ul>
		</div>
	</div>
</body>