My first Javascript

Andy-H · July 29, 2008

Just thaught I'd share it incase anyone wanted to use it or maybe someone could give a few pointers to stop me from getting bad habbits as I learn?

<html>
<head>
<title>Test</title>
</head>
<body>
The current date and time is - <span id="id"></span><br /><br />
</body>
</html>
<script type="text/javascript">
<!--

function display()
{

var countdown = document.all ? document.all["id"] : document.getElementById	

? document.getElementById("id")	: "";

var currentTime = new Date()
var day 	= currentTime.getDate()
var month 	= currentTime.getMonth() + 1
var year 	= currentTime.getFullYear()
var hours	= currentTime.getHours()
var minutes	= currentTime.getMinutes()
var secs	= currentTime.getSeconds()

if(hours > 11){
hours 		= hours - 12
var ap 		= "PM"
} else {
var ap 		= "AM"
}


if (secs < 10)
secs = "0" + secs

if (minutes < 10)
minutes = "0" + minutes

if (hours < 10)
hours = "0" + hours

if (day < 10)
day = "0" + day

if (month < 10)
month = "0" + month

var today	= day + "/" + month + "/" + year
var time	= hours + ":" + minutes + ":" + secs
var timeCount 	= today + " " + time + " " + ap


        		if (countdown)
       			{
          	countdown.innerHTML = timeCount + " ";
	setTimeout('display()',1000);
        		}


}

display();

//-->
</script>

Psycho · July 29, 2008

A few comments:

1. Put your javascript int he head of your document, or better yet, make it an external file that you include.

2. make your code portable. In this example, I would pass the id of the field I want to display the output in instead of hardcoding the value.

3. Don't use 'id' as a variable name - stay away from any names that could conflict with your code (e.g. element, document, etc.).

4. If yu do the same thing over and over, create a function: such as padding your numbers with zero.

5. Don't create variables that you will only use one (e.g. time and today). It's a waste in my opinion. I would make an exception for day, month, hour, etc. as it makes the code easier to implement.

here is somethign how I would do it:

<html>
<head>
<title>Test</title>


<script type="text/javascript">
<!--

function padZero(numVal)
{
    return (numVal<10) ? '0'+numVal : numVal;
}

function display(spanID)
{
    var currentTime = new Date()
    var day     = padZero(currentTime.getDate());
    var month   = padZero(currentTime.getMonth() + 1);
    var year    = padZero(currentTime.getFullYear());
    var hours   = padZero(currentTime.getHours());
    var minutes = padZero(currentTime.getMinutes());
    var secs    = padZero(currentTime.getSeconds());
    var ap = (hours>11) ? 'PM' : 'AM' ;

    var today  = day + '/' + month + '/' + year + ' ';
        today += hours + ':' + minutes + ':' + secs + ' ' + ap;

    document.getElementById(spanID).innerHTML = today + " ";
    setTimeout("display('"+spanID+"')",1000);
}

window.onload = function() { display('outputSpan'); }

//-->
</script>

</head>
<body>
The current date and time is - <span id="outputSpan">[loading...]</span><br /><br />
</body>
</html>

Andy-H · July 29, 2008

Thankyou

Sign In

My first Javascript

Recommended Posts

Andy-H

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Andy-H

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information