JavaScript DHTML/Development/Timer
Содержание
Accessing Document Contents
<HTML>
<HEAD>
<TITLE>Accessing Document Contents</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function createSummary() {
win2 = open("","window2")
win2.document.open("text/plain")
win2.document.writeln("Title: "+document.title)
win2.document.writeln("Links: "+document.links.length)
win2.document.writeln("Anchors: "+document.anchors.length)
win2.document.writeln("Forms: "+document.forms.length)
win2.document.writeln("Images: "+document.images.length)
win2.document.writeln("Applets: "+document.applets.length)
win2.document.writeln("Embeds: "+document.embeds.length)
win2.document.close()
}
// --></SCRIPT>
</HEAD>
<BODY>
<A NAME="#top"></A>
<form>
<INPUT TYPE="BUTTON" NAME="Help" VALUE="Help" ONCLICK="alert("Click one of the above images.")">
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
setTimeout("createSummary()",5000);
// --></SCRIPT>
</BODY>
</HTML>
A Countdown Timer
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Count Down Timer</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var running = false
var endTime = null
var timerID = null
function startTimer() {
running = true
now = new Date()
now = now.getTime()
// change last multiple for the number of minutes
endTime = now + (1000 * 60 * 1)
showCountDown()
}
function showCountDown() {
var now = new Date()
now = now.getTime()
if (endTime - now <= 0) {
stopTimer()
alert("Time is up. Put down your pencils.")
} else {
var delta = new Date(endTime - now)
var theMin = delta.getMinutes()
var theSec = delta.getSeconds()
var theTime = theMin
theTime += ((theSec < 10) ? ":0" : ":") + theSec
document.forms[0].timerDisplay.value = theTime
if (running) {
timerID = setTimeout("showCountDown()",1000)
}
}
}
function stopTimer() {
clearTimeout(timerID)
running = false
document.forms[0].timerDisplay.value = "0:00"
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="startTime" VALUE="Start 1 min. Timer"
onClick="startTimer()">
<INPUT TYPE="button" NAME="clearTime" VALUE="Clear Timer"
onClick="stopTimer()"><P>
<INPUT TYPE="text" NAME="timerDisplay" VALUE="">
</FORM>
</BODY>
</HTML>
A Timeout Processing Example
<HTML>
<HEAD>
<TITLE>Timeout Program</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function setTimer() {
timer=setTimeout("alert("Too slow!")",10000)
}
function clearTimer() {
clearTimeout(timer)
alert("Hi!")
}
// --></SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
setTimer()
// --></SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Click here within ten seconds." ONCLICK="clearTimer()">
</FORM>
</BODY>
</HTML>
setInterval() and clearInterval() methods
<html>
<head>
<script type="text/javascript">
var intval=""
function start_Int(){
if(intval==""){
intval=window.setInterval("start_clock()",1000)
}else{
stop_Int()
}
}
function stop_Int(){
if(intval!=""){
window.clearInterval(intval)
intval=""
myTimer.innerHTML="Interval Stopped"
}
}
function start_clock(){
var d=new Date()
var sw="am"
var h=d.getHours()
var m=d.getMinutes() + ""
var s=d.getSeconds() + ""
if(h>12){
h-=12
sw="pm"
}
if(m.length==1){
m="0" + m
}
if(s.length==1) {
s="0" + s
}
myTimer.innerHTML=h + ":" + m + ":" + s + " " + sw
}
</script>
</head>
<body>
<span id="myTimer">Interval Stopped</span>
<br><br><br>
<input type="button" value="Start" onclick="start_Int()">
<input type="button" value="Stop" onclick="stop_Int()">
</body>
</html>
Timer Events Demo
/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke
ISBN: 067231763X
Publisher Sams CopyRight 2000
*/
<head>
<script language="JavaScript">
<!--
function dailyTask() {
var tdy = new Date();
if ((tdy.getHours() == 8) && (tdy.getMinutes() == 30)) {
alert("Good morning sunshine!")
clearInterval(timerID)
}
}
//-->
timerID = setInterval("dailyTask()", 10000)
</script>
</head>
Timer Events Demo 2
/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke
ISBN: 067231763X
Publisher Sams CopyRight 2000
*/
<head>
<script language="JavaScript">
<!--
function performProcess() {
alert("Good morning sunshine!");
}
function dailyTask() {
var tdy = new Date();
if ((tdy.getHours() == 8) && (tdy.getMinutes() == 30)) {
performProcess()}
timerID = setTimeout("dailyTask()",10000)
}
//-->
</script></head>
<body onLoad="dailyTask()">
</body>
Using a Timer
/*
Learn How to Program Using Any Web Browser
by Harold Davis
Apress CopyRight 2004
ISBN: 1590591135
*/
<HTML>
<HEAD>
<TITLE>As time goes by...</TITLE>
<SCRIPT>
var timerID;
var x;
function Thing (name) {
this.name = name;
}
function fireIt () {
var now = new Date();
var displayStr = window.document.theForm.txtFired.value;
displayStr += "Hello: " + x.name + " " + now + "\r\n";
window.document.theForm.txtFired.value = displayStr;
}
function startIt (name) {
x = new Thing (name);
timerID = setInterval("fireIt()", 1000);
}
function stopIt() {
clearInterval(timerID);
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<FORM name="theForm">
<TR>
<TD>Name your object:</TD>
<TD>
<input type=text
name="txtName">
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
<input type=button value="Start!"
onClick="startIt (txtName.value);">
</TD>
<TD>
<input type=button value="Stop!"
onClick="stopIt();">
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD colspan=2>
<textarea name="txtFired" cols = 60
rows=20>
</textarea>
</TD>
</TR>
</FORM>
</TABLE>
</BODY>
</HTML>