Out putting time and date using JavaScript.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Out putting time and date using JavaScript.

Post 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>
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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>
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Post 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.
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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>
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Post 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.
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

err just a though : frames ?
it would reload the frame only (where you put the date)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

setInterval or setTimeout are your friends for getting DHTML to update at a continuous manor..
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
szms
Forum Contributor
Posts: 101
Joined: Thu Jun 26, 2003 12:23 pm

Post 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>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

What's the code look like for the page that calls this JS from an external file?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply