JS timer Usage Analysis [Clock and menu application], js Timer

JS timer Usage Analysis [Clock and menu application], js Timer

This article analyzes the JS timer usage. We will share this with you for your reference. The details are as follows:

Enable Timer:

SetInterval Interval Type // once started, it will not stop and be executed repeatedly
SetTimeout delay type // run only once

Stop Timer:

ClearInterval
ClearTimeout

Disable the timer. If only clearInterval () is used, it will turn off all the timers. Sometimes we only need to turn off one, so we need to define a variable to store the timer.

Var timer = null; btn1.onclick = function () {timer = setInterval (function name, 1000) ;}; btn2.onclick = function () {clearInterval (timer );};

Example 1

Time-changing clock, and numbers are replaced by images

Ideas:

1. Create a Date object to obtain the system time (Note: if the acquisition time is a single digit, a function is required to convert it into two digits)

2. assign each digit of the obtained system time to the number (charAt () method of the image address, and return the character at the specified position of the string. Therefore, a for loop is required to return six digits in seconds)

3. A timer is required to update the time automatically.

Function toDouble (num) {// one-digit conversion to two-digit if (num <10) {return '0' + num;} else {return ''+ num ;}} window. onload = function () {var oimg = document. getElementsByTagName ('img '); var I; function updatetime () {var odate = new Date (); var str = toDouble (odate. getHours () + toDouble (odate. getMinutes () + toDouble (odate. getSeconds (); for (I = 0; I <oimg. length; I ++) {oimg [I]. src = 'images/'character str.charat( I ?#'.png ';}} setInterval (updatetime, 1000); // The method should be put in the timer, rather than directly executing the updatetime () function (); // if you do not execute the function, the first second of the page that has just been refreshed will appear. The time is 00: 00 minutes 00 seconds}

Example 2

Level 2 menu

There is a gap between the first-level menu and the second-level menu. If the second-level menu is displayed only when it is moved to the first-level menu and hidden when it is removed, the second-level menu cannot be displayed when it is moved to the Gap (or the second-level menu is too late, the second-level menu is gone), so a timer is required. When the first-level menu is left, the second-level menu will not disappear immediately, but will be hidden slowly. Then, when entering the second-level menu, the timer will be cleared, it will not disappear. When the second-level menu is left, it will disappear, otherwise it will always exist.

Window. onload = function () {var box1 = document. getElementById ('box1'); var box2 = document. getElementById ('box2 '); var timer = null; box1.onmouseover = function () {box2.style. display = "block"; clearTimeout (timer); // If the timer is not cleared, the level-2 menu is hidden when the level-2 menu is left to enter the level-1 menu.}; box1.onmouseout = function () {timer = setTimeout (function () {box2.style. display = "none" ;}, 300) ;}; box2.onmouseover = function () {clearTimeout (timer) ;}; box2.onmouseout = function () {// if you leave the level-2 menu, let him disappear instantly. When IE7 moves to the level-1 menu, the level-2 menu will flash timer = setTimeout (function () {box2.style. display = "none" ;}, 300 );};};

Simplify the code

window.onload=function(){  var box1=document.getElementById('box1');  var box2=document.getElementById('box2');  var timer=null;  box1.onmouseover=box2.onmouseover=function show(){    box2.style.display="block";    clearTimeout(timer);  };  box1.onmouseout=box2.onmouseout=function hide(){    timer=setTimeout(function(){      box2.style.display="none";    },300);  };};