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的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
js实现日历的简单算法
Jan 24 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 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
一次编写,随处运行
2006/10/09 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Node.js实现简单管理系统
2019/09/23 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
python 实现两个线程交替执行
2020/05/02 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
农民工创业典型事迹
2014/01/25 职场文书
建筑安全标语
2014/06/07 职场文书
防卫过当辩护词
2015/05/21 职场文书
人力资源部工作计划
2019/05/14 职场文书