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 相关文章推荐
JavaScript中的包装对象介绍
Jan 27 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
ES6新增的数组知识实例小结
May 23 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
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python中for循环控制语句用法实例
2015/06/02 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
科室工作个人总结的自我评价
2013/10/29 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
司仪主持词两篇
2014/03/22 职场文书
先进基层党组织材料
2014/12/25 职场文书
求职自我评价怎么写
2015/03/09 职场文书
销售员自我评价
2015/03/11 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL