digital clock with date [Archive]

View Full Version : digital clock with date

957

04-11-2010, 08:12 PM

you can change myObj.style.color="#583B00"; to get a different color. Hope you like it! I recommend you use this externally.

957

04-11-2010, 08:15 PM

this clock is great for increasing the amount of time a visitor stays on your page

jmrker

04-12-2010, 04:14 AM

Seems like an awful lot of code to change the date/time format in real time.
Consider this shortened version:

<html>
<head>
<title>Digital Date / Clock</title>

<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=193596


// START CLOCK
function startTime() {
var ltime = (new Date()).toString();
var ltimeArr = ltime.split(' ');
ltime = AdjustTime(ltimeArr[4]) + ' ' +
ltimeArr[0]+' '+ltimeArr[1]+' '+AdjustDate(ltimeArr[2])+', '+ltimeArr[3];
document.getElementById("time").innerHTML = ltime;
t = setTimeout("startTime()",1000);
}
// STOP CLOCK


function AdjustTime(tinfo) {
var a = tinfo.split(':');
var ampm = 'am'
if (a[0] > 12) { a[0] -= 12; ampm = 'pm'; }
if (a[0] == 0) { a[0] = 12; }
return a.join(':')+ampm;
}
function AdjustDate(dm) {
var tdm = 0;
switch (dm) {
case 1: case 21: case 31: tdm = dm + 'st'; break;
case 2: case 22: tdm = dm + 'nd'; break;
case 3: case 23: tdm = dm + 'rd'; break;
default: tdm = dm + 'th'; break;
}
return tdm;
}

var t;
function stopTime() {
clearTimeout(t);
}

onload = function() {
t = setTimeout("startTime()",1000);
}

</script>
</head>
<body>

<div id="time" style="color:#583B00;background-Color:yellow"></div>
</body>
</html>

Uncomment 'start' / 'stop' buttons if desired.
(Could also be used as a stop-watch script.)
:thumbsup:

ohbigrighthand

05-12-2010, 03:57 AM

Another version all in one function:

<html>
<head>
<script>
//CLOCK
function startTime()
{
var now = new Date();
var h=now.getHours();
var min=now.getMinutes();
var s=now.getSeconds();
var ampm=(now.getHours()>11)?"PM":"AM";
var d=now.getDay();
var y=now.getFullYear();
var mon=now.getMonth();
var dm=now.getDate();
var endings=["st","nd","rd","th"];
var dayendings=[0,1,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,1,2,3,4,4,4,4,4,4,4,1];
var days=["Sun","Mon","Tues","Wed","Thurs","Fri","Sat"];
var months=["Jan","Feb","Mar","Apr","Jun","Jul","Aug","Sept","Nov","Dec"];
if (h>12) h-=12;
if (h==0) h=12;
if (min<10) min="0"+min;
if (s<10) s="0"+s;
dm+=endings[dayendings[dm]];
if (dm<10) dm="0"+dm;

d=days[d];

mon=months[mon-1];

document.getElementById("time").innerHTML=h+":"+min+":"+s+" "+ampm+" "+d+" "+mon+" "+dm+" "+y;

t=setTimeout("startTime()",1000);
}
//STOP CLOCK
</script>
</head>
<body onload="startTime();">
<span id="time" style="color:#583B00;background-Color:yellow"></span>
</body>
</html>

jmrker

05-12-2010, 08:21 PM

Less code ... Faster execution ... You decide. :D

<html>
<head>
<title>Clock Example</title>
<script type="text/javascript">
//CLOCK
function startTime() {
var now = new Date();
var DayTimeInfo = now.toString().split(' ');
var TimeInfo = DayTimeInfo[4].split(':');
var ampm=(TimeInfo[0] > 11)?"pm":"am";
if (TimeInfo[0]>11) { TimeInfo[0] -= 12; }
else { if (TimeInfo[0] == 0) { TimeInfo += 12; } }
var dm = DayTimeInfo[2];
switch (dm) {
case 1: case 21: case 31: dm += 'st'; break;
case 2: case 22: dm += 'nd'; break;
case 3: case 23: dm += 'rd'; break;
default: dm += 'th'; break;
}
var str = TimeInfo.join(':')+ampm+' '+DayTimeInfo[1]+' '+dm+', '+DayTimeInfo[3];
var myObj = document.getElementById("time");
myObj.innerHTML=str;
myObj.style.color="#583B00";
setTimeout("startTime()",1000);
}
onload = function() { startTime(); }
</script>
<body>
<div id="time"></div>
</body>
</html>

rnd me

05-13-2010, 10:07 PM

Less code ... Faster execution ... You decide. :D

i want to play!

<html>
<head>
<title>Clock Example</title>
<script type="text/javascript">

function startTime() {
var d=(new Date);
startTime.out.innerHTML= d.toLocaleTimeString().toLowerCase().replace(" ","")+
d.toLocaleDateString().split(",").slice(1)
}

onload = function(){
startTime.out=document.getElementById("time");
setInterval(startTime, 333);
};
</script>
<body>
<div id="time"></div>
</body>
</html>

if it doesn't have to be identical, this is short and fast:

<body>
<div id="time"></div>

<script> onload = function(){
var st=document.getElementById("time");
setInterval(function(){st.innerHTML=(new Date).toLocaleString();} , 333); };
</script>
</body>

jmrker

05-14-2010, 03:21 AM

i want to play!
...

I like the attempt and do agree it is smaller,
but you left out the "st", "nd" and "th" requirements in original post.

I don't think that they add much to the display,
but I like to play by the same rules! :eek::):D

Slight modification to fit requirements above and with abbreviated day ...

<html>
<head>
<title>Clock Example</title>
<script type="text/javascript">

function startTime() {
var d=(new Date);

var str = d.toLocaleTimeString().toLowerCase().replace(' ','');
var tmp = d.toLocaleDateString().split(' ');
var dm = d.getDate();
switch (dm) {
case 1: case 21: case 31: dm += 'st'; break;
case 2: case 22: dm += 'nd'; break;
case 3: case 23: dm += 'rd'; break;
default: dm += 'th'; break;
}
str += ' '+tmp[0].substr(0,3)+', '+tmp[1].substr(0,3)+' '+dm+', '+tmp[3];
startTime.out.innerHTML = str;
}

onload = function(){
startTime.out=document.getElementById("time");
setInterval(startTime, 1000);
};
</script>
<body>
<div id="time"></div>
</body>
</html>