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 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 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单例模式实现(对象只被创建一次)
2012/12/05 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
js中return false(阻止)的用法
2013/08/14 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
js实现进度条的方法
2015/02/13 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
JavaScript实现英语单词题库
2019/12/24 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
python实现中文分词FMM算法实例
2015/07/10 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
2019年.net常见面试问题
2012/02/12 面试题
军训生自我鉴定范文
2013/12/27 职场文书
初二生物教学反思
2014/02/03 职场文书
关于爱国的标语
2014/06/24 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技