12h to 24h clock

**intakep** · 07-31-2010, 06:46 PM

Hello. I got this script(attached) and it's currently in a 12h format but I'd like to change it to 24h, however, I'm really not good at coding. Can anyone help me?

Thanks in advance.

**djr33** · 07-31-2010, 06:56 PM

There is no file or text attached. We can probably help though!

**intakep** · 08-01-2010, 07:11 PM

Oh oops. I guess it didn't upload..

Here it is

**bluewalrus** · 08-01-2010, 10:19 PM

Nothing in the file..

**intakep** · 08-02-2010, 03:05 AM

Oh come on really? I just downloaded it and I could see it? Weird..Anyways, here it is:

<html>
<head><title>newclock</title><base href="Private/"/></head>

<style>

SPAN#clock
{
font-family: Helvetica;
font-weight: bold;
color: #575a5b;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
/*text-shadow: #ac7a00 0px 1px 0px;*/
font-size: 26px;

}

SPAN#ampm
{
font-family: Helvetica;
font-weight: bold;
color: #575a5b;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
/*text-shadow: #ac7a00 0px 1px 0px;*/
font-size: 15px;

}

TD#date
{
font-family: Helvetica;
font-weight: bold;
text-align: left;
color: #575a5b;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.7);
/*text-shadow: #FFFFFF 0px 1px 0px;*/
font-size: 13px;
text-transform: uppercase;

}

</style>

<script type="text/javascript">

function init ( )
{
timeDisplay = document.createTextNode ( "" );
document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock ( )
{
var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );

// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes;

// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

function init2 ( )
{
timeDisplay = document.createTextNode ( "" );
document.getElementById("ampm").appendChild ( timeDisplay );
}

function amPm ( )
{
var currentTime = new Date ( );

var currentHours = currentTime.getHours ( );

// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;

// Compose the string for display
var currentTimeString = timeOfDay;

// Update the time display
document.getElementById("ampm").firstChild.nodeValue = currentTimeString;
}

function init3 ( )
{
timeDisplay = document.createTextNode ( "" );
document.getElementById("calendar").appendChild ( timeDisplay );
}

function calendarDate ( )
{
var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var this_month_name_array = new Array("January","February","March","April","May","June","July","August","September","October","November","December") //predefine month names

var this_date_timestamp = new Date()

var this_weekday = this_date_timestamp.getDay()
var this_date = this_date_timestamp.getDate()
var this_month = this_date_timestamp.getMonth()

//document.getElementById("calendar").firstChild.nodeValue = this_weekday_name_array[this_weekday] + " " + this_date + " " + this_month_name_array[this_month]//concat long date string

document.getElementById("calendar").firstChild.nodeValue = this_weekday_name_array[this_weekday] + "," + " " + this_month_name_array[this_month] + " " + this_date //concat long date string
}

// -->
</script>

</head>

<body >

<table style="position: absolute; top: 310px; left: 105px; width: 180px; height: 461px;" cellspacing="0" cellpadding="0" align="right">
<tr align="left" valign="top" border="0" cellpadding="0">
<td height="12" valign="top" margin-left="120" >
<span id="clock">
<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script></span><span id="ampm">
<script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>
</span>
</td>
</tr>
<tr>
<td id="date" valign="top">
<span id="calendar">
<script language="JavaScript">calendarDate(); setInterval('calendarDate()', 1000 )</script>
</span>
</td>
</tr>
</table>
<object data="WeatherWidget/WeatherWidget.html" type="text/html" height="480" width="320">
<p></p>
</object>

</body>
</html>

**coothead** · 08-03-2010, 09:50 AM

Hi there intakep,

and a warm welcome to these forums.

You seem to have a lot of code there.

Try this simplified example...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>twenty four hour clock with date</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font-family:helvetica,sans-serif;
    font-weight:bold;
    color:#575a5b;
    text-shadow:0 -1px 0 rgba(0,0,0,0.7);
 }
#currenttime {
    margin:310px 0 0 105px;
    font-size:26px;  
 }
#currenttime span {
    padding-left:5px;
    font-size:15px; 
 }
#currentdate {
    margin-left:105px;
    font-size:13px; 
    text-transform:uppercase;
 }
</style>

<script type="text/javascript">

function displayDate(){

   month=['January','February','March','April','May','June','July','August','September','October','November','December'];
   day=['Sunday','Monday','Tuesday','Wednsday','Thursday','Friday','Saturday']; 

   dte=new Date();
   yy=dte.getUTCFullYear();
   mm=dte.getMonth();
   dd=dte.getDate();
   dy=dte.getDay();
   hr=dte.getHours();
   mn=dte.getMinutes();

if(hr<10){
   hr='0'+hr;
 }
if(mn<10){
   mn='0'+mn;
 }
   time=hr+':'+mn;
   date=day[dy]+', '+month[mm]+' '+dd+', '+yy;

   document.getElementById('currenttime').firstChild.nodeValue=time;
   document.getElementById('currentdate').firstChild.nodeValue=date;

setTimeout(function(){displayDate()},1000);
 }

if(window.addEventListener){
   window.addEventListener('load',displayDate,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',displayDate);
  }
 }

</script>

</head>
<body>

<div id="currenttime">&nbsp;<span>HRS</span></div>
<div id="currentdate">&nbsp;</div>

</body>
</html>

coothead

**intakep** · 09-03-2010, 02:43 AM

thanks so much! works great

**coothead** · 09-03-2010, 08:18 AM

No problem, you're very welcome.

**rkoziol7** · 09-15-2010, 08:03 AM

@coothead

I am impressed by your helpful. On every other forum intakep would just get an information:

"try to use google and find the right solution yourself".

It is hard to find someone really helpful on forums today.

Thread: 12h to 24h clock

Thread Tools

Search Thread

12h to 24h clock

Bookmarks

Bookmarks

Posting Permissions