In JavaScritP, there are two special functions about timers, which are:
1. Countdown timer: timename = settimeout ("function ();", delaytime);
2. Cycling timer: tIMENAME = SETINTERVAL ("Function ();", Delaytime);
The first parameter "function ()" is the action to be executed when the timer is triggered. It can be a function or several functions, and the functions are used ";" separate. For example, if two warning windows are popped up, you can replace "function ();" to
"Alert ('The first warning window!'); Alert ('The second warning window!');"; "Delaytime" is the interval, in milliseconds, that is, fill in "5000 5000 "It means 5 seconds.
The countdown timer trigger an event after the time is arrived, and the circulating timer is to repeatedly trigger the event when the interval is coming.
For example, after you open a page and want to automatically jump to another page interval in a few seconds, you need to use the countdown timer "settimeout (" function (); ", delaytime), and if you want to set a sentence settings The appearance of one word,
You need to use the circular timer "SetInterval (" Function (); ", Delaytime".
To get the focus of the form, the Document.activeElement.id is used. Use if to determine whether the Document.activeElement.id and the ID of the form are the same.
For example: if ("mid" == Document.activeElement.id) {Alert ();}, "MID" is the ID corresponding to the form.
Timer:
Used to specify a certain program after a specific time.
The differences between settimeout and SetInterval in JS, and the Llee method
Settimeout (Expression, Delaytime). After delaytime, it will execute an expression, settimeout in a delay for a period of time, and then perform a certain operation.
settimeout ("function", time) set a timeout object
SetInterval (Expression, Delaytime), each delaytime will execute Expdition. It can often be used to refresh expressions.
SetInterval ("Function" (Time) sets a timeout object
SetInterval is automatically repeated, and settimeout will not be repeated.
Cleartimeout
Clearinterval
Two cases.
Example 1. When the form is triggered or loaded, the word string is output word by word
Copy code code as follows:
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<Title> Non -Title Document </Title>
<script language = "javascript" type = "text/javascript">
var str = "This is the example text for testing";
var seq = 0;
var second = 1000; // interval 1 second
function scroll () {
msg = str.substring (0, seq+1);
document.GetelementByidx_x_x ('word'). Innerhtml = msg;
seq ++;
if (seq> = str.Length) seq = 0;
}
</script>
</head>
<body onload = "SetInterval ('scroll ()', sex)">
<div ID = "WORD"> </DIV> <br/> <br/>
</body>
</html>
Example 2. When the focus is in the input box, check the input box information regularly.
Copy code code as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<Title> Non -Title Document </Title>
<script language = "javascript" type = "text/javascript">
var second = 5000; // intervals 5 seconds
var C = 0;
function scroll () {
C ++;
if ("b" == document.activeElement.id) {{
var sTR = "Timing check the <b>"+c+"</b> times <br/>";
if (document.getelementbyidx_x_x ('b'). value! = "") {
Str+= "Input box The current content is the current content is <br/> <b>"+DCUMENT.GetelementByidx_x_x ('B'). Value+"</b>";;
}
document.GetelementByidx_x_x ('word'). Innerhtml = str;
}
}
</script>
</head>
<body>
<textarea id = "b" name = "b" style = "height: 100px; width: 300px;" Onfocus = "SetInterval ('Scroll (), Second)"> </Textarea> <br/> <br/<br /> "
<div ID = "WORD"> </DIV> <br/> <br/>
</body>
</html>
Example 3. The following is the simplest example. After the timer time arrives, the warning window pops up.
Copy code code as follows:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<script language = "javascript">
function count () {) {
document.GetelementByidx_x_x ('m'). Innerhtml = "Time has begun!"
settimeout ("Alert ('Ten seconds to!", 10000)
}
</script>
<body>
<div ID = "m"> </div>
<input type = "Button" value = "Time Start" onClick = "Count ()">
</body>
</html>
Example 4: The countdown jumps timing and timely
Copy code code as follows:
<html>
<head>
<base href = "<%= basepath%>">
<Title> My JSP 'DS04.JSP' Starting Page </Title>
<span id = "tiao"> 3 </span>
<A href = "javascript: countdown"> </a> automatically jump after second ...
<meta http-equiv = refresh content = 3; url = '/ds02.jsp'/>
<!-The script starts->
<script language = "javascript" type = "">
Function Countdown (SECS) {
tiao.innertext = secs;
if (--scs> 0)
settimeout ("Countdown ("+SECS+"), 1000); 1000);
}
countdown (3);
</script>
<!-Script end->
</head>
Example 6:
Copy code code as follows:
<head>
<meta http-equiv = "refresh" content = "2; url = 'b.html'">
</head>
Example 7:
Copy code code as follows:
<script language = "javascript" type = "text/javascript">
settimeout ("Window.location.href = 'B.Html'", 2000);
// Both of the following can be used
//settimeOut 18"javascript:lcation.href='b.html '", 2000);
//settimeout.com Window.Location='b.html '", 2000);
</script>
Example 8:
Copy code code as follows:
<span ID = "TotalSecond"> 2 </span>
<script language = "javascript" type = "text/javascript">
var second = document.GetelementByidx_x ('TotalSecond'). InnerHtml;
if (ISNAN (Second)) {{
// ... not the number of numbers
} Else {
SetInterval (Function () {
document.GetelementByidx_x ('TotalSecond'). InnerHtml = -SECOND;
if (second <= 0) {{
Window.Location = 'B.html';
}
}, 1000);
}
</script>
JS timer (execute once, repeat execution)
Share a JS code, a small example of the JS timer, divided into a timer and repeated execution timer for execution. Reference for friends who are beginners.
1. Only execute the timer once
Copy code code as follows:
<script>
// The timer runs asynchronous
function hello () {
Alert ("Hello");
}
// Use the method name execution method
var t1 = window.settimeout (Hello, 1000);
var t2 = window.settimeout ("hello ()", 3000); // Use the string execution method
Window.cleArtimeout (T1); // Remove the timer
</script>
2. Repeated execution timer
Copy code code as follows:
<script>
function hello () {
Alert ("Hello");
}
// Repeat a certain method
var T1 = Window.Setinterval (Hello, 1000);
var T2 = Window.Setinterval ("Hello ()", 3000);
// The method of removing the timer
Window.Clearinterval (T1);
</script>
Remark:
If there are two methods on one page, they are executed after the page is loaded, but the actual failure can be executed in order. You can refer to the following method:
You can add a timer to the online method, set a timer, and then run after "delay" for a period of time.
Copy code code as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<Title> Untitled Page </Title>
<script language = "javascript" type = "text/javascript">
var yc = new object ();
Function Beginyc ()
{{
var secondsyc = document.GetelementByid ("txtycseconds"). Value;
try
{{
YC = Settimeout ("Alert ('Delay"+Secondsyc+"second success'), SecondSyc*1000);
}
catch (e)
{{
alert ("Please enter the correct second number.");
}
}
Function Overyc ()
{{
Cleartimeout (YC);
Yc = null;
alert ("Termination delay successful.");
}
/**************************↓↓↓↓定时器的使用↓↓↓↓*********** ****************************
var timerds = new object ();
var timerdds = new object ();
Function Beginds ()
{{
sn.innerhtml = "0";
Timerds = SetInterval ("Addone ()", PARSEINT (Document.GetelementByid ("TXTINTIRVALSECONDS"). Value, 10)*1000); 10)*1000);
}
Function Goonds ()
{{
Timerds = SetInterval ("Addone ()", PARSEINT (Document.GetelementByid ("TXTINTIRVALSECONDS"). Value, 10)*1000); 10)*1000);
}
Function overds ()
{{
Clearinterval (Timerds);
timerds = null;
}
Function delayds ()
{{
overds ();
Timerdds = settimeout ("Goonds ()", Document.GetelementByid ("TXTDDSSECONDS"). Value*1000);
}
Function Addone ()
{{
if (SN.Innerhtml == "10")
{{
overds ();
Alert ("Congratulations, it has successfully reached 10 seconds");
Return;
}
sn.innerHtml = Parseint (Sn.Innerhtml, 10) +1;
}
</script>
</head>
<body>
<found id = "form1" runat = "server">
<div>
Use of delayer: </div>
<div>
<label id = "label2"> </label>
<input type = "text" id = "txtycseconds" value = "3" />
<input type = "Button" id = "btnbyc" onClick = "javascript: beginyc ()" value = "start delay" />
<input type = "Button" id = "btnoyc" onClick = "Javascript: Overyc ()" Value = "Termid Delay" />
<input type = "Button" id = "Button1" Onclick = "Javascript: Alert ('Good MonRNING');
</div>
<br />
<div>
Use of timer: </div>
<div>
<div ID = "SN"> 0 </DIV>
<label id = "label1"> </label>
<input type = "text" id = "txtIintervalseconds" value = "1" /> />
<input type = "Button" id = "btnbds" onclick = "javascript: beggs ()" value = "Start time" />
<input type = "Button" id = "btnods" onclick = "javascript: overds ()" value = "Terminal time" /> />
<input type = "Button" id = "btngds" onclick = "javascript: Goonds ()" value = "Continue timing" />
<laabel id = "ds"> </label>
<input type = "text" id = "txtddsseconds" value = "5" />
<input type = "Button" id = "btndds" onclick = "javascript: delayds ()" value = "delay timing" />
</div>
</form>
</body>
</html>