close
  • Tutorials expand_more
    • integration_instructions How To
    data_object Scripts
    text_snippet Snippets
    preview Demos
    developer_mode Web Development Service
    question_answer chat with us
  • Tutorials expand_more
    • integration_instructions How To
    data_object Scripts
    text_snippet Snippets
    preview Demos
    developer_mode Web Development Service
    1. Home
    2. JavaScript
    3. Create Digital Clock with Date using JavaScript

    Create Digital Clock with Date using JavaScript

    By: CodexWorld | In: JavaScript | Last Updated: Apr 22, 2016

    create-digital-clock-with-date-javascript-by-codexworld

    JavaScript Date object is used to work with dates and times. Date object is created with new Date(). Using Date object, you can create a digital clock in JavaScript. In this article, we’ll show the simplest way to make a digital clock with date using JavaScript. Our easy to use JavaScript code helps to create a digital clock in your web project instantly.

    Here you can get three types of clock format, clock with 24 hours, clock with 12 hours, and clock with current date. At first, the javaScript code is provided and then the HTML code.

    JavaScript Code

    In startTime() function, new Date() is used to define the current Date object. Hours, Minutes, Seconds, Day, Date, Month, and Year are extracted from the Date object using getHours(), getMinutes(), getSeconds(), getDay(), getDate(), getMonth(), and getFullYear() respectively.

    At the end of startTime() function, setTimeout() method is used to calls startTime() function every 500 milliseconds. On page load startTime() is executed by the <body> onload event attribute.

    Digital Clock with 24 hours Format:

    function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    //Add a zero in front of numbers<10
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + " : " + min + " : " + sec;
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

    Digital Clock with 12 hours Format:

    function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
    hr = (hr == 0) ? 12 : hr;
    hr = (hr > 12) ? hr - 12 : hr;
    //Add a zero in front of numbers<10
    hr = checkTime(hr);
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + " : " + min + " : " + sec + " " + ap;
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

    Digital Clock with Current Date:

    function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
    hr = (hr == 0) ? 12 : hr;
    hr = (hr > 12) ? hr - 12 : hr;
    //Add a zero in front of numbers<10
    hr = checkTime(hr);
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;
    
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var curWeekDay = days[today.getDay()];
    var curDay = today.getDate();
    var curMonth = months[today.getMonth()];
    var curYear = today.getFullYear();
    var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
    document.getElementById("date").innerHTML = date;
    
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

    HTML Code

    Atfirst add onload Event Attribute within the <body> element to execute setTimeout() function on page load.

    <body onload="startTime()">

    HTML to display digital clock:

    <div id="clockdate">
  <div class="clockdate-wrapper">
    <div id="clock"></div>
    <div id="date"></div>
  </div>
</div>

    CSS

    You can style digital clock as per your web page layout. Here the following CSS code is used to the basic styling of a digital clock.

    .clockdate-wrapper {
    background-color: #333;
    padding:25px;
    max-width:350px;
    width:100%;
    text-align:center;
    border-radius:5px;
    margin:0 auto;
    margin-top:15%;
}
#clock{
    background-color:#333;
    font-family: sans-serif;
    font-size:60px;
    text-shadow:0px 0px 1px #fff;
    color:#fff;
}
#clock span {
    color:#888;
    text-shadow:0px 0px 1px #333;
    font-size:30px;
    position:relative;
    top:-27px;
    left:-10px;
}
#date {
    letter-spacing:10px;
    font-size:14px;
    font-family:arial,sans-serif;
    color:#fff;
}

    Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request

    file_download Download Source Codevisibility View Demo
    Previous
    arrow_back Sending Email in CodeIgniter
    Next
    Handling File Uploads in CakePHP arrow_forward

    RELATED TUTORIALS

    create-analog-clock-using-javascript-css-codexworld
    Read more
    Create an Analog Clock using JavaScript and CSS
    responsive-alert-confirm-prompt-dialog-box-in-javascript-codexworld
    Read more
    Display Beautiful and Responsive Alert/Confirm/Prompt Dialog Box in JavaScript
    convert-export-html-to-pdf-using-javascript-jspdf-codexworld
    Read more
    Convert HTML to PDF using JavaScript

    3 Comments

    1. Ahmed Said...

      Thank you for this code!

      May 1, 2016 at 12:14 PM
    2. Matjaz Said...

      I’m not sure but it will show Friday even we have Thursday, April 14.

      April 14, 2016 at 8:30 AM
      • CodexWorld Said...

        @Matjaz Thanks for notifying the issue. We’ve updated the code, please see or download the latest source code.

        April 14, 2016 at 7:49 PM

    Leave a reply

    keyboard_double_arrow_up