Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Simple Digital Clock using JavaScript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 682
    Comment on it

    In this blog, we will learn about how to create a simply animated digital clock with javascript. As we know, browser executes any javascript program at the client side, this means that the script will take the time of the client computer and will display it.

    HTML:-

    <div class="digitalClock">
    	<div class="dial">
    		<div id="calender">Monday 14 January 2013</div>
    		<span id="hours">10</span>
    		<span class="dot">:</span>
    		<span id="minutes">13</span>
    		<span class="dot">:</span>
    		<span id="seconds">03</span>
    	</div>
    </div>

     

    First create a newDate object:

    var newDate = new Date();

     

    to get the current date from the Date object :
     

    newDate.setDate(newDate.getDate());
    
    setInterval( function() {
    
    // Create a newDate() object and seconds of the current time
    
    var getseconds = new Date().getSeconds();
    
    // Add a leading zero to seconds value
    
    $("#seconds").html(( getseconds < 10 ? "0" : "" ) + getseconds);
    
    },1000);

     

    Here in the above lines of code we first create a date object and then will extract the seconds value using the getSeconds() method. The getsecond method returns the value ( form 0 to 59 ) of the mentioned date amd time. After 60 seconds interval we will call another function with minutes value using getMinutes() method.

     

    setInterval( function() {
    
    // Create a newDate() object and extract the minutes of the current time
    
    var getminutes = new Date().getMinutes();
    
    // Add a leading zero to the minutes value
    
    $("#minutes").html(( getminutes < 10 ? "0" : "" ) + getminutes);
    
    },1000);

     

    the getMinutes() method returns the value (from 0 to 59) of the mentioned date and time. After 60 minutes of time interval another function call will give the value for hours.

     

    setInterval( function() {
    
    // Create a newDate() object and extract the hours of the current time
    
    var gethours = new Date().getHours();
    
    // Add a leading zero to the hours value
    
    $("#hours").html(( gethours < 10 ? "0" : "" ) + gethours);
    
    }, 1000);

     

    the getHours() method returns the value ( from 0 to 23 ) of the newDate object.

    Please find the code attached.


     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: