JS Timer usage Analysis "clock and the application in the menu" _javascript skills

The example of this paper analyzes the usage of JS timer. Share to everyone for your reference, specific as follows:

Open Timer:

SetInterval Spacer//Once started, it will not stop, repeat execution
settimeout delay type//only once

Stop timer:

Clearinterval
Cleartimeout

Close Timer If it's just clearinterval () it turns off all the timers, sometimes we just have to turn off one, so 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

Clock changes, and numbers are replaced by pictures

Ideas:

1. Create a date (date) object, get the system time (note: Get the time if it is a number, you need to convert to a two-digit function)

2. Assign each digit of the system time to the digital number of the picture address (CharAt () method, return the character at the specified position of the string, so a for loop is required to return the six-digit time in seconds)

3. Need a timer to let it automatically update the time

function ToDouble (num) {//One number converts to two digits
  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/' +str.charat (i) + '. png ';
    }
  }
  SetInterval (updatetime,1000); The timer should be put in the method, rather than directly execute the function
  updatetime ()/////Do not execute the function, will appear just refreshed page first second, time is 00:00 00 seconds
}

Example 2

Second Level menu

There is a gap between the first level menu and the level two menu, if only the level two display when moving into the first level menu, remove when hidden, then move to the gap between still will not appear (or say too late to enter the level two menu, two level menu is gone), so need a timer, leave the first level menu, do not let the level two immediately disappear, but slowly hide, Then when you go to level two menu, clear the timer, he will not disappear, and then leave the level two menu, or let it disappear, or there will be forever

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);  Do not clear the timer, leave the level two menu into the first level menu, the level two menu will also be hidden
  };
  Box1.onmouseout=function () {
    timer=settimeout (function () {
      box2.style.display= "none";
    },300);
  Box2.onmouseover=function () {
    cleartimeout (timer);
  Box2.onmouseout=function () {  //If you leave the level two menu and let him disappear instantly, IE7 the level two menu flashes
    timer=settimeout (function () {
      box2.style.display= "None";
    },300);
  };

Simplifying 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);
  };};

More readers interested in JavaScript-related content can view the site topics: "JavaScript time and date Operation skills Summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"

I hope this article will help you with JavaScript programming.