原生js实现监听页面无操作120秒后进行跳转

1.跳转按钮

页面设置一个浮动的按钮,显示剩余多少秒后会自动跳转到目标页面,无操作时每秒减1,同时按钮上的提示秒数也会更新

 <a id="returnBtn" style="padding-top:30px;text-align: center;line-height: 40px;display: block;width: 60px;height: 150px;background: #0086c3;position: fixed;top: 480px;font-size: 25px;border: 0;border-radius: 0 25px 25px 0;color: #fff;left: 0px;">
		 返<br>回<br>
		 <span id="secondText" style="font-size:1.2rem">(120)</span>
		 </a>

2.js代码

window.onload = function (){
			
			   (function($){
				   //设置多少秒跳转
				   var mtReturnTime = 120;
				   //剩余秒数
				   var myTime = 120;
				   //定时器
					window.setInterval(function(){
						//设置更新按钮上的提示秒数
						document.getElementById("secondText").innerHTML="("+myTime+")";
						myTime--;
						//0秒跳转目标页面
						if(myTime==0){
							window.location.href="/targetUrl";
						}
					},1000)
					
					//设置各类监听事件
			       var body = document.querySelector('html');
			       body.addEventListener("click",function(){
			    	   myTime=mtReturnTime
			       });
			       
			       
			       body.addEventListener("keydown",function(){myTime=mtReturnTime});
			       body.addEventListener("mousemove",function(){myTime=mtReturnTime});
			       body.addEventListener("mousewheel",function(){myTime=mtReturnTime});
			       document.addEventListener("scroll", function(){myTime=mtReturnTime}); 
			       
			       
			   })(window)
			 
			 
			 }

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MrZhouGx

觉得对你有用的话可以支持一下

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值