Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2005
    Location
    England
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question clock switching between 24- and 12-hour time

    I'm trying write a clock that can switch between 24 hour (military) time and 12-hour time. I've been struggling with it for ages and have ended up with this. It's still far from perfect though. In my HTML editor it shows the time only on load; it doesn't update every 500 milliseconds (half a second) that my code says it should. Also the am/pm indicator is wrong. If someone could point out my errors and show me how to fix them I will be eternally in your debt. Thank you.
    Code:
    <script language="JavaScript" type="text/javascript">
    function miltime(){
    var mydate=new Date()
    var year=mydate.getYear()
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var date=mydate.getDate()
    var hours=mydate.getHours()
    if (hours<10)
    milhours="0"+hours
    else milhours=hours
    if (hours>12)
    var minutes=mydate.getMinutes()
    if (minutes<10)
    minutes="0"+minutes
    var seconds=mydate.getSeconds()
    if (seconds<10)
    seconds="0"+seconds
    var dayarray=new Array("Sun","Mon","Tue","Wed","Thurs","Fri","Sat")
    var montharray=new Array("Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec")
    var datearray=new Array("1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th","14th","15th","16th","17th","18th","19th","20th","21st","22nd","23rd","24th","25th","26th","27th","28th","29th","30th","31st")
    document.write(milhours+":"+minutes+":"+seconds+", "+dayarray[day]+", "+montharray[month]+" "+datearray[date]+" "+year);
    this.onLoad = document.write("Click to change clock type");
    this.onClick = changeclocktype();
    setInterval('miltime()',500)}
    function time(){
    var mydate=new Date()
    var year=mydate.getYear()
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var date=mydate.getDate()
    var hours=mydate.getHours()
    var hoursarray=new Array("0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23")
    if (hours=<12)
    indicator="am"
    else indicator="pm"
    var minutes=mydate.getMinutes()
    if (minutes<10)
    minutes="0"+minutes
    var seconds=mydate.getSeconds()
    if (seconds<10)
    seconds="0"+seconds
    var dayarray=new Array("Sun","Mon","Tue","Wed","Thurs","Fri","Sat")
    var montharray=new Array("Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec")
    var datearray=new Array("1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th","14th","15th","16th","17th","18th","19th","20th","21st","22nd","23rd","24th","25th","26th","27th","28th","29th","30th","31st")
    document.write(hoursarray[hours]+":"+minutes+":"+seconds+" "+indicator+", "+dayarray[day]+", "+montharray[month]+" "+datearray[date]+" "+year)}
    function changeclocktype(){
    if (miltime)
    miltimetotime()
    else document.clear(time)
    displaymiltime()}
    function miltimetotime(){
    document.clear(miltime)
    displaytime()}
    </script>

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I might set that up like so...

    Code:
    <body onload="setClock('toggle','output')">
    
    <div style="text-align:center">
    	<kbd id="output" style="{font-size:large}"></kbd>
    	<div style="{margin-top:0.5em}">
    	<label>change to: </label>
    	<a id="toggle" href="#output" onclick="setClock('toggle','output')">24 Hour</a>
    	</div>
    </div>
    
    <script type="text/javascript">
    
    // global vars
    
    var timer, bMilitary = true;
    
    function setClock(toggle, output)
    {
    
    	// setup the loop:
    
    	var date, strTime, todaysDate, strDate;
    	clearTimeout(timer);
    	bMilitary = !bMilitary;
    	document.getElementById(toggle).innerHTML = bMilitary ? "12 Hour" : "24 Hour";
    
    
    	// the loop:
    
    	function updateClock()
    	{
    		date = new Date();
    		var n = date.getDate();
    		strTime = date.toTimeString().substr(0,8);
    		if(n != todaysDate)
    		{
    			todaysDate = n;
    			strDate = oncePerDay(String(n));
    		}
    		if(!bMilitary)
    		{
    			var hours = Number(strTime.substr(0,2));
    			strTime = ((hours < 1 || hours > 12) ? Math.abs(hours - 12) : hours) + strTime.substr(2) + (hours < 12 ? " AM" : " PM");
    		}
       		document.getElementById(output).innerHTML = (strTime + ", " + strDate);
      		timer = setTimeout(updateClock, 1000);
    	}
    	updateClock();
    
    
    	// format the date string (only when different...)
    
    	function oncePerDay(dDate)
    	{
    		var dDay   = ["Sun","Mon","Tue","Wed","Thurs","Fri","Sat"][date.getDay()] + ", "; 
    		var dMonth = ["Jan","Feb","Mar","Apr","May","June","July","Aug","Sept","Oct","Nov","Dec"][date.getMonth()] + " "; 
    		if(+dDate > 10 && +dDate < 14)
    			dDate += "th ";
    		else
    			switch(dDate.substr(dDate.length - 1))
    			{
    				case "1" : dDate += "st "; break;
    				case "2" : dDate += "nd "; break;
    				case "3" : dDate += "rd "; break;
    				default  : dDate += "th ";
    			}
    		return (dDay + dMonth + dDate + date.getFullYear());
    	}
    }
    </script>
    </body>
    Edit: Oops, the switch statement didn't correctly append the teens... maybe it'll work now.
    Last edited by codegoboom; 01-10-2005 at 08:06 AM.
    *this message will self destruct in n-seconds*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •