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开发人员的10个关键习惯小结
Dec 05 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
微信小程序 form组件详解
Oct 25 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 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 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
python赋值操作方法分享
2013/03/23 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python代码中怎么换行
2020/06/17 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
怎样写好自荐信和推荐信
2013/12/26 职场文书
书香校园活动方案
2014/02/28 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
英语教师求职信
2014/06/16 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
Promise静态四兄弟实现示例详解
2022/07/07 Javascript