#WebSquadron Animated Clock with jQuery using 2 html elements. No plugin required.

Posted by George Nicolaou

On 25 Aug, 2022
George Nicolaou - Senior Web Developer

Code I used on first html element lQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
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 = "PARIS, " + currentHours + ":" + currentMinutes  + " "; 
 $("#clock").html(currentTimeString); 
 }
 $(document).ready(function(){
 setInterval('updateClock()', 1000);
});
</script>

Code I used in second html block just a div

<div id="clock"></div> 

You may also like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This
Uncategorized#WebSquadron Animated Clock with jQuery using 2 html elements. No plugin required.