JavaScript DHTML/Development/Time

Материал из Web эксперт
Перейти к: навигация, поиск

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&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    
    <P>Heure courante au format <I>HH:MM:SS</I> :&nbsp;
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(heureCour());</SCRIPT>
    <P>Heure courante au format <I>HH:MM</I> :&nbsp;
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(heureCourAbr());</SCRIPT>
    <P>Heure courante au format <I>HH heure(s) MM</I> :&nbsp;
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(heureCourLng());</SCRIPT>
    <P>Heure courante au format <I>HH:MM am/pm</I> :&nbsp;
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(heureCourAMPM());</SCRIPT>
      
    <P>Heure courante au format <I>HH:MM:SS</I>, mise &agrave; jour dynamiquement :&nbsp;
      <FORM ACTION="GET" NAME="f">
        <INPUT NAME="t" TYPE=TEXT VALUE="" SIZE=10>&nbsp;
      </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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Development/Time&oldid=1787»