规定时间内无操作返回指定页面

最新推荐文章于 2023-04-07 10:57:12 发布

零Suger

最新推荐文章于 2023-04-07 10:57:12 发布

阅读量485

点赞数

分类专栏： jquery 笔记

本文链接：https://blog.csdn.net/qq_35057009/article/details/99624683

版权

笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>规定时间内无操作返回首页</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
			}			
			.index,
			.otherPage {
				position: absolute;
				width: 100%;
				height: 100%;
				margin: 0;
				overflow: hidden;
			}			
			.hidden {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="index">
			<button id="btn">跳转到其他页</button>
		</div>
		<div class="otherPage hidden">这是其他页</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script>
		    //second是检测未操作的时间，秒为单位，callback是该时间段未点击需要执行的函数
			function hasOperate(callback, second) {
				var status = true;
				var timer;
				document.body.onmousedown = function() {
					status = true;
				}
				document.body.onmouseup = function() {
					countTime();
				}
				function countTime() {
					setInterval(function() {
						if(!status) {
							callback();
							status = true;
						}
					}, 1);
					if(timer) {
						clearInterval(timer);
					}
					timer = setInterval(function() {
						status = false;
					}, second);
				}
				countTime();
			}

			function outTime() {
				$(".otherPage").addClass("hidden");
				$(".index").removeClass("hidden");
			}

			hasOperate(outTime, 5000);//5秒后执行outTime()

			$("#btn").click(function() {
				$(".index").addClass("hidden");
				$(".otherPage").removeClass("hidden");
			});
		</script>
	</body>

</html>