自动跳转首页

最新推荐文章于 2025-03-31 17:03:29 发布

star walkin

最新推荐文章于 2025-03-31 17:03:29 发布

阅读量408

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_44336097/article/details/109828722

版权

<!--自动跳转首页-->
<!DOCTYPE html>
<html>
<head>
	<title>自动跳转</title>
	<style type="text/css">
		p{
			text-align: center;
		}
		span{
			color: red;
		}
	</style>
</head>
<body>
<p>
	<span id="time">5</span>秒之后，自动跳转到首页...
</p>


<script type="text/javascript">
	/* 
		分析：
			1.显示页面效果 <p>
			2.倒计时读秒效果实现
				2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
				2.2 定义一个定时器，1秒执行一次该方法
			3.在方法中判断时间如果<=0,则跳转到首页
	*/
	// 2. 倒计时读秒效果实现

	var second = 5;
	var time = document.getElementById("time");
	//定义一个方法，获取span标签，修改span标签体内容，时间--
	function showTime(){
		second--;
		//判断时间如果<=0,则跳转到首页
		if(second<=0){
			//跳转到首页
			location.href = "https://www.baidu.com";
		}
		time.innerHTML = second + "";
	}

	//设置定时器,1秒执行一次该方法
	setInterval(showTime,1000);

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