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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
jQuery限制图片大小的方法
May 25 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python url 参数修改方法
2018/12/26 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
师范毕业生自荐信
2013/10/17 职场文书
公益广告语集锦
2014/03/13 职场文书
十八大宣传标语
2014/10/09 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
辞职书格式样本
2015/02/26 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书