Home > Web Front-end > JS Tutorial > JavaScript implements page no-operation countdown exit

JavaScript implements page no-operation countdown exit

高洛峰
Release: 2016-12-09 13:26:02
Original
1468 people have browsed it

The front-end page of the project needs to be implemented. If no one operates the page, it will enter the countdown. The following is the front-end code implementation.

//设置(倒计时功能)开关
var _mouseActiveListener_flag = true;
Copy after login

beforecount: Trigger countdown interval (unit: milliseconds)

count: Total countdown (unit: seconds)

var mouseActiveListener = function (beforecount, count, callback) {
 //config
var __countdown_html = &#39;<div id="__tt" style="position:fixed;top:110px;right:10px;z-index:1000;color:#eee;font-size:25px;"></div>&#39;;
 //define
 var target = null, _t = null, _tc = null;
var target_countdown = function (__count) {
  if (__count >= 0) {
  target.innerHTML = __count + &#39;秒后退出&#39;;
  _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(&#39;click&#39;, function () {
  _t_clear();
  _t = _t_exec();
 });
 };
Copy after login

//后置操作,解释:在5秒后(5000)不操作的状态下触发倒计时,倒计时180秒,具体看View Code里面的函数。
mouseActiveListener(5000, 180, function () {
 window.location.href = "/Home/Index";
 });
Copy after login


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template