JavaScript实现页面无操作倒计时退出


Posted in Javascript onOctober 22, 2016

项目前端页面需要实现,页面没人操作进入倒计时,以下为前端代码实现。

//设置(倒计时功能)开关
var _mouseActiveListener_flag = true;

beforecount:触发倒计时间隔(单位:毫秒)

count:倒计时总数(单位:秒)

var mouseActiveListener = function (beforecount, count, callback) {
 //config
var __countdown_html = '<div id="__tt" style="position:fixed;top:110px;right:10px;z-index:1000;color:#eee;font-size:25px;"></div>';
 //define
 var target = null, _t = null, _tc = null;
var target_countdown = function (__count) {
  if (__count >= 0) {
  target.innerHTML = __count + '秒后退出';
  _tc = setTimeout(function () {
   target_countdown(__count);
  }, 1000);
  } else {
  callback();
  }
  __count--;
 }, _t_exec = function () {
  return setTimeout(function () {
  if (_mouseActiveListener_flag) {
   target = Ne.dom.createEl(__countdown_html);
   document.body.appendChild(target);
   target_countdown(count);
  }
  }, beforecount);
 }, _t_clear = function () {
  clearTimeout(_t);
  clearTimeout(_tc);
  //target.parentElement.removeChild(target);
  $(target).remove();
  target = null;
 };
 //exec
 _t = _t_exec();
 document.addEventListener('click', function () {
  _t_clear();
  _t = _t_exec();
 });
 };
//后置操作,解释:在5秒后(5000)不操作的状态下触发倒计时,倒计时180秒,具体看View Code里面的函数。
mouseActiveListener(5000, 180, function () {
 window.location.href = "/Home/Index";
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
如何用JS实现网页瀑布流布局
Apr 24 Javascript
微信开发 消息推送实现代码
Oct 21 #Javascript
微信和qq时间格式模板实例详解
Oct 21 #Javascript
微信开发 微信授权详解
Oct 21 #Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 #Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 #Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 #Javascript
Bootstrap如何创建表单
Oct 21 #Javascript
You might like
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
详解javascript遍历方式
2015/11/11 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中遍历文件的3个方法
2014/09/02 Python
python中lambda()的用法
2017/11/16 Python
django主动抛出403异常的方法详解
2019/01/04 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python中关于浮点数的冷知识
2019/09/22 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
python tkinter控件布局项目实例
2019/11/04 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
技术总监的工作职责
2013/11/13 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年除四害工作总结
2015/07/23 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
python状态机transitions库详解
2021/06/02 Python
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技