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 Sort 表格排序
Oct 31 Javascript
围观tangram js库
Dec 28 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
php与js的区别是什么
2013/08/05 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python切片操作实例分析
2018/03/16 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
flask项目集成swagger的方法
2020/12/09 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
华为的Java面试题
2014/03/07 面试题
预备党员半年考察意见
2015/06/01 职场文书
步步惊心观后感
2015/06/12 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
vue3不同环境下实现配置代理
2022/05/25 Vue.js