Page 1 of 1

Out putting time and date using JavaScript.

Posted: Mon Aug 09, 2004 10:26 am
by szms
I am using the following code for printing the date and time in the web site. But I would like to keep this code in a exterenal file and call it in side the html code for showing date and time. How to do that?


<SCRIPT LANGUAGE="JavaScript">
<!--
Stamp = new Date();
document.write('<B>Todays date:</b> ' '' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getYear() + ' <br> ');
var Hours;
var Mins;
var Time;
Hours = Stamp.getHours();
if (Hours >= 12) {
Time = " P.M.";
}
else {
Time = " A.M.";
}

if (Hours > 12) {
Hours -= 12;
}

if (Hours == 0) {
Hours = 12;
}

Mins = Stamp.getMinutes();

if (Mins < 10) {
Mins = "0" + Mins;
}

document.write('<B>Todays Time:</b> ' + Hours + ":" + Mins + Time + '');

//-->
</SCRIPT>

Posted: Mon Aug 09, 2004 10:34 am
by anjanesh
In a file : date.js

Code: Select all

function PrintDate()
&#123;
 Stamp = new Date(); 
 document.write('<B>Todays date:</b> ' '' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getYear() + ' <br> '); 
 var Hours,Mins,Time; 
 Hours = Stamp.getHours(); 
 if (Hours >= 12) &#123; Time = " P.M."; &#125; 
 else &#123; Time = " A.M."; &#125; 
 if (Hours > 12) &#123;  Hours -= 12; &#125; 
 if (Hours == 0) &#123; Hours = 12; &#125; 
 Mins = Stamp.getMinutes(); 
 if (Mins < 10) &#123; Mins = "0" + Mins; &#125; 
 document.write('<B>Todays Time:</b> ' + Hours + ":" + Mins + Time + ''); 
&#125;
In your html file :

Code: Select all

<SCRIPT LANGUAGE=Javascript SRC="date.js"></SCRIPT>

Posted: Mon Aug 09, 2004 12:45 pm
by szms
So now I kept the following code in a file named date_time.js

Code: Select all

function datetime()
&#123;
Stamp = new Date();

document.write('<b>Date: </b>' + (Stamp.getDate()) +"/"+(Stamp.getMonth() + 1)+ "/"+Stamp.getYear() + ' <br> ');

var Hours;
var Mins;
var Time;
Hours = Stamp.getHours();
if (Hours >= 12) &#123;
Time = " P.M.";
&#125;
else &#123;
Time = " A.M.";
&#125;

if (Hours > 12) &#123;
Hours -= 12;
&#125;

if (Hours == 0) &#123;
Hours = 12;
&#125;

Mins = Stamp.getMinutes();

if (Mins < 10) &#123;
Mins = "0" + Mins;
&#125;

document.write('<b>Time:</b> ' + Hours + ":" + Mins + Time + '');
&#125;

Code: Select all

<script language="Javascript" type="text/javascript" src="date_time.js"> 
datetime();
</script>
it's not showing the date and time in the web site so could you please let me know what's wrong with my code.

Posted: Mon Aug 09, 2004 1:04 pm
by anjanesh
You cannot embed a js file and same time have js code within the same <script> tags - at least that what I think. This should work
In your html page have this :

Code: Select all

<script language="Javascript" type="text/javascript" src="date_time.js"></script>
<script language="Javascript">
datetime();
</script>

Posted: Mon Aug 09, 2004 1:31 pm
by szms
Well I would like have an automatic updating option in my website so that time will be updated without refresinging the web site. Do you have any suggestion.

Posted: Mon Aug 09, 2004 1:34 pm
by Draco_03
err just a though : frames ?
it would reload the frame only (where you put the date)

Posted: Mon Aug 09, 2004 1:41 pm
by feyd
setInterval or setTimeout are your friends for getting DHTML to update at a continuous manor..

Posted: Mon Aug 09, 2004 1:42 pm
by szms
I don't have any clue what you are tallking about? I would like to have an dynamic show time feature on my web site. Related code or website would be helpfull.

Posted: Mon Aug 09, 2004 1:45 pm
by feyd

Posted: Mon Aug 09, 2004 1:48 pm
by anjanesh
Place the Date Time in once cell (in some table) with some id.
Then change the innerText property of that cell when updating like : id1.innerText="different"; Now about automatically updating the time you could use setTimeout and clearTimeout functions. How its really done I dont know. But you'll find some examples here : http://devedge.netscape.com/library/man ... ml#1203758

Posted: Mon Aug 09, 2004 1:52 pm
by anjanesh
Have a look at this and try it.

Code: Select all

<script id=clientEventHandlersJS language=javascript>
function Button1_onclick() &#123;id1.innerText="different";&#125;
</script>
<table border=1>
<tr>
<td id="id1">Test 1</td>
<td>
<INPUT type="button" value="Button" ID="Button1" NAME="Button1" language=javascript onclick="return Button1_onclick()">
</td>
<td>test2</td>
</tr>
</table>
Only instead of changing the cell text manually write a fuction for updating periodically using the setTimeout and clearTimeout functions.

Posted: Mon Aug 09, 2004 4:00 pm
by pickle
feyd wrote:setInterval or setTimeout are your friends for getting DHTML to update at a continuous manor..
Something along the lines of:

Code: Select all

<head>
<script language = "javascript">
<!--
function update_time()
&#123;
    $time = document.getElementById('time_div').innerHTML;
    //parse time somehow and increment by 1 second
    document.getElementById('time_div').innerHTML = incremented_time;

    setTimeout('update_time()',1000); //will call update_time() in 1000 milliseconds
&#125;
-->
</script>
</head>
<body onload = "setTimeout('update_time()',1000)">
  .
  .
  .
  .
  <div id = "time_div">
    10:59:01
  </div>
  .
  .
  .
</body>

Posted: Tue Aug 10, 2004 8:55 am
by szms
Now working with a new code for showing date and time. It works perfectly when JS code in under the html tag. But I would like to keep the JS code in an external file and call the file inside the html. I tired to do so but it's giving me error and the blinker is not blinking when I tried. Any suggestion. Thank you.

Code: Select all

<HTML>
<HEAD>
<title>DCScript© Digital Clock</title>
<style>
.clock &#123;
background-color: #A6A98D;
color: black;
font-family: verdana;
float: center;
border: 1px solid black;
border-collapse: collapse;
&#125;
.time &#123;
font-size: 100;
&#125;
.clock TD &#123;
border: 1px solid black;
border-collapse: collapse;
&#125;
B &#123;color:black&#125;
BODY &#123;font-family: arial; font-size: 10pt&#125;
</style>
<SCRIPT LANGUAGE="JavaScript">
function time() &#123;
var today = new Date();
var hrs = today.getHours();
var min = today.getMinutes();
var secs = today.getSeconds();
var alsohrs = today.getHours();
var dayNumber = today.getDate();
var year = today.getFullYear();
var ampm="";
var zero="0";
var month = today.getMonth() +1;
var weekday = today.getDay();
var wdn = new Array(7)
wdn&#1111;0] = "SUN";
wdn&#1111;1] = "MON";
wdn&#1111;2] = "TUE";
wdn&#1111;3] = "WED";
wdn&#1111;4] = "THU";
wdn&#1111;5] = "FRI";
wdn&#1111;6] = "SAT";
//Statement that puts '0's in front of single minutes or seconds.
if (min<10)
&#123;
min=zero+min;
&#125;
if (secs<10)
&#123;
secs=zero+secs;
&#125;
//Statement that eliminates Metric Time
if (hrs>12)
&#123;
hrs=eval(hrs - 12);
&#125;
if (hrs>=0 && hrs<1)
&#123;
hrs=12
&#125;
//P.M. Statement
if (alsohrs>=12 && alsohrs<24)
&#123;
ampm="P.M.";
&#125;
//A.M. Statement
if (alsohrs<12 && alsohrs>=0)
&#123;
ampm="A.M.";
&#125;
tmp='<table width="60%" class="clock"><tr><td class="time" colspan="4">';
tmp+=hrs+'<span id="blinker">:</span>'+min;
tmp+='<font size="20"> '+ampm+'</font>';
tmp+='<tr><td><font size="-1">Month</font><br><b>'+month+'</b></td>';
tmp+='<td><font size="-1">Date</font><br><b>'+dayNumber+'</b></td>';
tmp+='<td><font size="-1">Day</font><br><b>'+wdn&#1111;weekday]+'</b></td>';
tmp+='<td><font size="-1">Year</font><br><b>'+year+'</b></td></tr></table>';
document.getElementById("clockgoeshere").innerHTML=tmp;
clocktime=setTimeout("time()","1000");
&#125;
function blink() &#123;
var obj = document.getElementById("blinker");
if (obj.style.visibility == "visible") &#123;
obj.style.visibility="hidden";
&#125;
else &#123;
obj.style.visibility="visible";
&#125;
eachsecond=setTimeout("blink()","500");
&#125;
</SCRIPT>
</head>
<body onLoad="time(); blink();"> <center>
<div id="clockgoeshere"></div><p>
</center>
</body>
</body>
</html>

Posted: Tue Aug 10, 2004 9:27 am
by pickle
What's the code look like for the page that calls this JS from an external file?