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 相关文章推荐
自己的js工具 Cookie 封装
Aug 21 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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 读取文件内容代码(txt,js等)
2009/12/06 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python迭代用法实例教程
2014/09/08 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
学校青年志愿者活动总结
2015/05/06 职场文书
简单的辞职信模板
2015/05/12 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python