计时事件

最新推荐文章于 2024-11-10 01:37:59 发布

原创最新推荐文章于 2024-11-10 01:37:59 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

js基础专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了JavaScript中的计时事件，包括setInterval和setTimeout的使用方法，以及如何利用它们创建打字机特效实例。文章提供了详细的代码示例，解释了如何设定重复执行或延迟执行的代码段，并演示了如何停止这些计时器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计时事件

：
一个设定的时间间隔之后来执行代码我们称之为计时事件
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval()- 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码
setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码
语法

window.setInterval("javascript function",milliseconds);    //第一个参数是函数   第二个参数是毫秒数

注： 1000 毫秒是一秒

//每三秒弹出一个弹窗  你好
setInterval(function(){alert("你好")},3000);

setTimeout() 方法
语法

window.setTimeout("javascript 函数",毫秒数);

第二个参数指示从当前起多少毫秒后执行第一个参数。

//等待3秒，然后弹出 "Hello":
setTimeout(function(){alert("Hello")},3000);

事件停止

clearInterval()
方法用于停止 setInterval() 方法执行的函数代码。
括号内写声明计时事件的函数名
setTimeout()
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
括号内写声明计时事件的函数名
用以上两个计时器来实现打字机特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body onload="load();">
		<div id="div1" style="float: left; font-family:'楷体';">	
		</div>
		<span id="span1">
			<label style="color: red; font-size: 15px; font-family: '楷体';">|</label>
		</span>
		<script type="text/javascript">
			var a=0;
			function load(){         //给body添加页面加载事件
				var arr=['月','亮','很','亮','，','亮','也','没','用','，','没','用','也','亮','！'];
				var div1= document.getElementById('div1');  //通过id获取div
				div1.innerHTML+= arr[a];   //将数组中的数据通过索引值  依次赋给div  
				a++;  //通过a++获取每个数据
				var time = setTimeout('load()',500);   //声明 计时函数   设置毫秒数执行上面加载事件    第二个参数是从当前起多少毫秒后执行第一个参数。
				if (a>=arr.length) {      //判断  当定义的数据长度大于数组的长度时
					clearTimeout(time);			//停止 定义的计时函数的函数名 
					setInterval('shan()',300);    //调用数据最后的闪烁字符的 计时函数
				}
		    }
			function shan(){
				var span_01=document.getElementById('span1');  //获取最后的字符
				if (span_01.style.display=='block') {   //判断该字符的display是否显示
					span_01.style.display='none';  //当字符显示时  改变display 让它显示
				} else{			
					span_01.style.display='block';   //当它显示时 ，让它显示
				}
			}
		</script>
		
	</body>
</html>