cookie、计时事件及其案例

最新推荐文章于 2022-05-25 16:41:14 发布

坚持曾今曾坚持的

最新推荐文章于 2022-05-25 16:41:14 发布

阅读量213

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44791674/article/details/108709999

版权

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码
Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。
setInterval() 第一个参数是函数（function）。
第二个参数间隔的毫秒数
注意: 1000 毫秒是一秒。

每三秒弹出 "hello" ：
setInterval(function(){alert("Hello")},3000);

setTimeout() 方法
与setInterval() 方法用法相同

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

区别

setTimeout() 方法只会在规定时间内行一次，而setInterval() 方法会无限执行。

cookie

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="取cookie" onclick="fun()" />
		<input type="button" value="清除cookie" onclick="fun1()" />
	</body>
	<script type="text/javascript">
		document.cookie = "username=asd";
		document.cookie = "passwd=78787887";
		document.cookie = "phone=1515151515";

		function fun() {
			var data = document.cookie;
			var result = [];
			result = data.split(";");
			var userIdData = result[0].split("=")[1];
			var pwdData = result[1].split("=")[1];
			var phoneData = result[2].split("=")[1];
			document.write("用户名为" + userIdData + "<br>");
			document.write("密码为" + pwdData + "<br>");
			document.write("电话号码为" + phoneData);
		}
		//清楚cookie
		function fun1() {
			var date = new Date();
			date.setDate(date.getDate() - 7);
			var cookieText = "passwd=;expires" + date;
			document.cookie = cookieText;
		}
	</script>
</html>

setInterval

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.cr {
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="cr" id="oDiv"></div>
		<div class="cr" id="lDiv"></div>
		<input type="button" value="开始" />
		<input type="button" value="停止" />
	</body>
	<script type="text/javascript">
		var color1 = document.getElementById("oDiv");
		var color1 = document.getElementById("lDiv");

		function fun() {
			color1.style.backgroundColor = "aqua";
		}

		function fun1() {
			color1.style.backgroundColor = "red";
		}
		setInterval("fun()", 500);
		setInterval("fun1()", 1000);
	</script>
</html>

坚持曾今曾坚持的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cookie、计时事件及其案例

JavaScript 计时事件通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:setInterval() - 间隔指定的毫秒数不停地执行指定的代码。setTimeout() - 暂停指定的毫秒数后执行指定的代码Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。setInterv
复制链接

扫一扫