Format PHP and Javascript clock

Question

I took this code from PHP with javascript code, live clock , and successfully put it on my website. The code is here:

<?php
function d1() {
    $time1 = time();

    $date1 = date("h:i:sa",$time1);
    echo $date1;
}
?>
<script>
    var now = new Date(<?php echo time() * 1000 ?>);
    function startInterval(){
        setInterval('updateTime();', 1000);
    }
    startInterval();//start it right away
    function updateTime(){
        var nowMS = now.getTime();
        nowMS += 1000;
        now.setTime(nowMS);
        var clock = document.getElementById('qwe');
        if(clock){
            clock.innerHTML = now.toTimeString();//adjust to suit
        }
    }
</script>
<div id="qwe"></div>

However, the time format shows up as this:

21:41:44 GMT-0400 (Eastern Standard Time)

I want it to show up as

9:41:44 PM

I assume that this line

 clock.innerHTML = now.toTimeString();//adjust to suit

is the one I need to change, but can't find any formats that show it very simply. Do I need to write something up myself to show it in this custom format?

stackoverflow.com/questions/1056728/… this should solve your problem — maraca
– maraca, Commented Aug 17, 2015 at 1:49
thank you, thank you, I can't believe I didn't find this before — Andrew Hu
– Andrew Hu, Commented Aug 17, 2015 at 1:52

fedmich · Accepted Answer · 2015-08-17 02:07:25Z

5

I want to suggest you try to use Developer tools in Chrome so you could examine what are the properties and functions available for an object.

Try this, F12 to the developer tool and in there type

var date_new = new Date()

then type date_new. after pressing that dot, you'll see what potential functions are available to you

Of course, its good to read on official documentation to know all about this, but in case you don't have internet connection or in a hurry. you can just look around at those functions of Date Object.

Have fun coding!

answered Aug 17, 2015 at 2:07

fedmich

5,3733 gold badges39 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fedmich Over a year ago

Btw momentJs is also easy to use and quite lightweight already. But sometimes pure JavaScript rocks too :)

Andrew Hu Over a year ago

I tried momentJs, for some reason it isn't working I have it here jsfiddle.net/0qze164t can you help me identify what is wrong here? did I incorrectly download moment.js?

J-Dizzle Over a year ago

Code school has a free course on devTools for chrome. codeschool.com/courses/discover-devtools

Subash · Accepted Answer · 2015-08-17 01:57:36Z

1

You could try and do something like this.

function formatTime(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  var ampm = hours >= 12 ? 'PM' : 'AM';

  hours = hours % 12;
  hours = hours ? hours : 12; 

  minutes = minutes < 10 ? '0'+minutes : minutes;
  return hours + ':' + minutes + ':' + seconds + ' ' + ampm;
}

// your existing code with modification
...
clock.innerHTML = formatTime(now);//adjust to suit
...

If you happen to be working with date time too much and are having to use functions like above, you should consider using momentjs.

answered Aug 17, 2015 at 1:57

Subash

7,3068 gold badges47 silver badges73 bronze badges

Collectives™ on Stack Overflow

Format PHP and Javascript clock

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related