JavaScript DHTML/Development/Time
Содержание
- 1 A Clock Script
- 2 Creating a Clock Object and Displaying the Results on the Page
- 3 Display the Current Time in status bar
- 4 Formats the current hour and displays it in a static or dynamic way
- 5 Get the current time and then extract the hours, minutes and seconds
- 6 Morning or Evening
- 7 Time: hour, minutes, and seconds.
- 8 Times Table
- 9 Time value
- 10 Update Time per second
A Clock Script
<HTML>
<HEAD>
<TITLE>Clock</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function dateTime() {
var now = new Date();
var result = now.toLocaleString();
var tzOffset=-now.getTimezoneOffset()/60;
if(tzOffset<0)
result += " (GMT "+tzOffset+" hours)";
else
result += " (GMT +"+tzOffset+" hours)";
return result;
}
function tick() {
document.forms[0].clock.value=dateTime()
setTimeout("tick()",1000)
}
// --></SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="clock" TYPE="TEXT" SIZE="50"
VALUE="&{dateTime()};">
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
tick()
// --></SCRIPT>
</BODY>
</HTML>
Creating a Clock Object and Displaying the Results on the Page
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/javascript">
<!--
function Clock (hours, minutes){
this.hours = hours;
this.minutes = minutes;
this.setTime = setTime;
this.displayTime = displayTime;
}
function setTime (hours, minutes){
this.hours = hours;
this.minutes = minutes;
}
function displayTime (){
var line = this.hours + ":" + this.minutes;
document.write ("<hr>Time of clock: " + line);
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
var currTime = new Date();
var myClock = new Clock(currTime.getHours (), currTime.getMinutes ());
myClock.displayTime (); //-->
</script>
</body>
</html>
Display the Current Time in status bar
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Status Bar Clock</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var flasher = false
// calculate current time, determine flasher state,
// and insert time into status bar every second
function updateTime() {
var now = new Date()
var theHour = now.getHours()
var theMin = now.getMinutes()
var theTime = "" + ((theHour > 12) ? theHour - 12 : theHour)
theTime += ((theMin < 10) ? ":0" : ":") + theMin
theTime += (theHour >= 12) ? " pm" : " am"
theTime += ((flasher) ? " " : "*")
flasher = !flasher
window.status = theTime
// recursively call this function every second to keep timer going
timerID = setTimeout("updateTime()",1000)
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="updateTime()">
</BODY>
</HTML>
Formats the current hour and displays it in a static or dynamic way
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JsLib 1.3 - Exemple - heure.js</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="Author" CONTENT="Etienne CHEVILLARD">
<!-- heure.js -->
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* heure.js
* Role : formate l"heure courante et l"affiche de maniere statique ou dynamique
* Projet : JsLib
* Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
* Version : 1.3
* Creation : 24/04/2001
* Mise a jour : 23/02/2005
*/
// --- Variables globales ---
// variables pour la mise a jour dynamique
var heure_champ;
var heure_timeout;
// --- Fonctions ---
// active la mise a jour dynamique de l"heure pour le champ specifie
function chargerHeureDyna(champ) {
if (champ)
heure_champ=eval(champ);
heure_champ.value=heureCour();
heure_timeout=window.setTimeout("chargerHeureDyna()", 1000);
return true;
} // fin chargerHeureDyna(champ)
// desactive la mise a jour dynamique de l"heure precedemment activee
function dechargerHeureDyna() {
window.clearTimeout(heure_timeout);
return true;
} // fin dechargerHeureDyna()
// retourne l"heure courante au format HH:MM:SS
function heureCour() {
var h_date=new Date();
var h_h=h_date.getHours();
var h_m=h_date.getMinutes();
var h_s=h_date.getSeconds();
if (h_s<10) h_s="0"+h_s;
if (h_m<10) h_m="0"+h_m;
return (h_h+":"+h_m+":"+h_s);
} // fin heureCour()
// retourne l"heure courante en abrege, au format HH:MM
function heureCourAbr() {
var h_date=new Date();
var h_h=h_date.getHours();
var h_m=h_date.getMinutes();
if (h_m<10) h_m="0"+h_m;
return (h_h+":"+h_m);
} // fin heureCourAbr()
// retourne l"heure courante au format HH:MM am/pm
function heureCourAMPM() {
var h_date=new Date();
var h_h=h_date.getHours();
var h_m=h_date.getMinutes();
if (h_m<10) h_m="0"+h_m;
var h_ampm="am";
if (h_h>11)
h_ampm="pm";
if (h_h>12)
h_h-=12;
return (h_h+":"+h_m+" "+h_ampm);
} // fin heureCourAMPM()
// retourne l"heure courante au format HH heure(s) MM
function heureCourLng() {
var h_date=new Date();
var h_h=h_date.getHours();
var h_m=h_date.getMinutes();
if (h_m<10) h_m="0"+h_m;
if (h_m<1) h_m="";
else h_m=" "+h_m;
if (h_h>1) return (h_h+" heures"+h_m);
else return (h_h+" heure"+h_m);
} // fin heureCourLng()
</SCRIPT>
</HEAD>
<BODY onLoad="chargerHeureDyna("document.f.t")"
onUnload="dechargerHeureDyna()">
<H1>JsLib 1.3</H1>
<HR>
<H2>Exemple - heure.js</H2>
<NOSCRIPT>
<P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configuré pour ne
pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
configuration dans les préférences/options de votre navigateur.</I>
<HR>
</NOSCRIPT>
<P>Heure courante au format <I>HH:MM:SS</I> :
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(heureCour());</SCRIPT>
<P>Heure courante au format <I>HH:MM</I> :
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(heureCourAbr());</SCRIPT>
<P>Heure courante au format <I>HH heure(s) MM</I> :
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(heureCourLng());</SCRIPT>
<P>Heure courante au format <I>HH:MM am/pm</I> :
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(heureCourAMPM());</SCRIPT>
<P>Heure courante au format <I>HH:MM:SS</I>, mise à jour dynamiquement :
<FORM ACTION="GET" NAME="f">
<INPUT NAME="t" TYPE=TEXT VALUE="" SIZE=10>
</FORM>
</BODY>
</HTML>
Get the current time and then extract the hours, minutes and seconds
<html>
<head>
<script language="JavaScript">
<!--
function showTime() {
var timeNow = new Date();
var hours = timeNow.getHours();
var minutes = timeNow.getMinutes();
var seconds = timeNow.getSeconds();
var timeString = "" + ((hours > 12) ? hours - 12 : hours);
timeString += ((minutes < 10) ? ":0" : ":") + minutes;
timeString += ((seconds < 10) ? ":0" : ":") + seconds;
timeString += (hours >= 12) ? " P.M." : " A.M.";
document.htmlClock.timeField.value = timeString;
timerID = setTimeout("showTime()", 1000);
}
//-->
</script>
</head>
<body onLoad="showTime()">
<form name="htmlClock">
<input type="text"
name="timeField"
size=14>
</form>
</body>
</html>
Morning or Evening
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O"Reilly & Associates
Copyright 2003 Danny Goodman
-->
function dayPart() {
var oneDate = new Date();
var theHour = oneDate.getHours();
if (theHour < 12) {
return "morning";
} else if (theHour < 18) {
return "afternoon";
} else {
return "evening";
}
}
<script language="JavaScript" type="text/javascript">
<!--
document.write("Good " + dayPart() + " and welcome")
//-->
</script>
Time: hour, minutes, and seconds.
/* To return the GMT time use getUTCHours, getUTCMinutes etc. */
<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</script>
</body>
</html>
Times Table
<html>
<head>
<script language="JavaScript">
<!--
function TimesTable(number) {
var thisLoop = 1;
document.writeln("Times Table for: <b>" + number + "</b><hr><pre>");
while (thisLoop <= 12) {
document.writeln(thisLoop + " x " + number + " = " + (thisLoop * number));
thisLoop++;
}
document.writeln("</pre>");
}
TimesTable(prompt("Enter a number",10));
//-->
</script>
</head>
</html>
Time value
<script language="JavaScript">
<!--
today = new Date();
minutes = today.getMinutes();
if (minutes >=0 && minutes <= 30)
document.write("<body text=White bgcolor=Blue>");
else
document.write("<body text=White bgcolor=Black>");
//-->
</script>
This is the body of the document.<p>
</body>
Update Time per second
<html>
<head><title>Update Time</title>
<script>
function UpdateTime(){
var today = new Date();
var hour = today.getHours();
var mins = today.getMinutes();
var secs = today.getSeconds();
if (secs <=9){
secs = "0" + secs
}
var TotalTime = hour + ":" + mins + ":" + secs;
if (document.layers) {
document.layers.time.document.write(TotalTime);
document.layers.time.document.close();
}else if (document.all) {
time.innerHTML = TotalTime;
}
setTimeout("UpdateTime()", 1000)
}
</script>
</head>
<body onload="UpdateTime()">
<span id=time style="position:absolute;"></span>
</body>
</html>