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 面向对象编程基础 多态
Aug 21 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
js实现加载更多功能实例
Oct 27 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
js作用域和作用域链及预解析
Apr 11 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
浅谈php调用python文件
2019/03/29 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
高中校园广播稿
2014/10/21 职场文书
城南旧事读书笔记
2015/06/29 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Python访问Redis的详细操作
2021/06/26 Python
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
Python实现科学占卜 让视频自动打码
2022/04/09 Python