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 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
vue中监听返回键问题
Aug 28 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
微信开发 消息推送实现代码
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 Directory 函数的详解
2013/03/07 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
浅谈Python数据类型之间的转换
2016/06/08 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
五年级英语教学反思
2014/01/31 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
装修公司管理制度
2015/08/05 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript