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()
{
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) { 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 + '');
}
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()
{
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) {
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>Time:</b> ' + Hours + ":" + Mins + Time + '');
}
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() {id1.innerText="different";}
</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()
{
$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
}
-->
</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 {
background-color: #A6A98D;
color: black;
font-family: verdana;
float: center;
border: 1px solid black;
border-collapse: collapse;
}
.time {
font-size: 100;
}
.clock TD {
border: 1px solid black;
border-collapse: collapse;
}
B {color:black}
BODY {font-family: arial; font-size: 10pt}
</style>
<SCRIPT LANGUAGE="JavaScript">
function time() {
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ї0] = "SUN";
wdnї1] = "MON";
wdnї2] = "TUE";
wdnї3] = "WED";
wdnї4] = "THU";
wdnї5] = "FRI";
wdnї6] = "SAT";
//Statement that puts '0's in front of single minutes or seconds.
if (min<10)
{
min=zero+min;
}
if (secs<10)
{
secs=zero+secs;
}
//Statement that eliminates Metric Time
if (hrs>12)
{
hrs=eval(hrs - 12);
}
if (hrs>=0 && hrs<1)
{
hrs=12
}
//P.M. Statement
if (alsohrs>=12 && alsohrs<24)
{
ampm="P.M.";
}
//A.M. Statement
if (alsohrs<12 && alsohrs>=0)
{
ampm="A.M.";
}
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ї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");
}
function blink() {
var obj = document.getElementById("blinker");
if (obj.style.visibility == "visible") {
obj.style.visibility="hidden";
}
else {
obj.style.visibility="visible";
}
eachsecond=setTimeout("blink()","500");
}
</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?