js案例:5秒后自动跳转

原创已于 2022-05-18 16:03:56 修改 · 5.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-01-04 17:03:51 首次发布

js 专栏收录该内容

55 篇文章

订阅专栏

这是一个使用JavaScript编写的HTML页面，包含一个按钮和一个div元素。当用户点击按钮时，div显示剩余跳转时间，并每秒更新，直到时间到达0秒时，页面将自动跳转到指定URL。

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

分析

同计时器案例

代码

<html>
<head>
<meta charset="utf-8">
<title>333333</title>
	<style>
		
	</style>
</head>

<body>
	
	<button>点击</button>
	<div></div>

<script>

	var btn = document.querySelector('button');
	var div = document.querySelector('div');
	var time = 5;
	btn.addEventListener('click', function () {
		div.innerHTML = '您将在'+time+'秒之后跳转页面';
		setInterval(function () {
		if(time <= 0) {
			location.href = 'http://www.itcast.cn';
		}else {
			time--;
			div.innerHTML = '您将在'+time+'秒之后跳转页面';
		}
	}, 1000)
	})
	

</script>
	
</body>
</html>