D4mations.com

Javascript Digital Clock Tutorial CSS Custom Animated Clock on Your Website



Lesson Code: http://www.developphp.com/video/JavaScript/Digital-Clock-Tutorial-Custom-Animated-Clock
Learn some excellent Javascript fundamentals by working with Javascript functions, variables, the Date object, a looped timer, communicating with page elements in real time, and more to create a custom animated digital clock that will run in all major browser software and on smart phone browsers.

Original source

d4mer

, , , , , , , , , , , , , , , , , , , ,

42 responses to “Javascript Digital Clock Tutorial CSS Custom Animated Clock on Your Website”

  1. Mr. Khoury . . . THANK YOU for this tutorial . . . I finally get it. I have developed a Digital Clock for my Website, and I am wanted it to fit into the design of the Website, and add more "get functions. There was a sheet that was displayed for a moment on your website of Java function or code, but I didn't get where to find that sheet. Would you mind forwarding that information at: rein.wpstudio@gmail.com. I would truly appreciate the assist as I have been attempting to get my TIME in THE LAND OF ENCHANTMENT clock for over 7 years.

    Sincerely your,
    Rein Whitt-Pritchette
    Artist || Serigrapher

  10. This is my code why doesn't it work for me? on the developer tools it shows this message Uncaught TypeError: Cannot set property 'textContent' of null. Can anybody help?

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .clockStyle {
    background-color: #000;
    border: #999 2px inset;
    padding: 8px;
    color: #0FF;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    display: inline;
    float: right;

    }

    </style>
    </head>

    <body>
    <div id"clockDisplay" class="clockStyle"></div>

    <script type="text/javascript" language="javascript">

    function renderTime() {

    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    if (h == 0) {
    h = 12;
    } else if (h > 12) {
    h = h – 12;
    diem = "PM";
    }

    if (h < 10) {
    h = "0" + h;
    }

    if (m < 10) {
    m = "0" + m;
    }

    if (s < 10) {
    s = "0" + s;
    }

    var myClock = document.getElementById("clockDisplay");
    myClock.textContent = h + ":" + m + ":" + s + "" + diem;
    myClock.innerText = h + ":" + m + ":" + s + "" + diem;

    setTimeout("renderTime()",1000);

    }

    renderTime();

    </script>
    </body>

    </html>

  11. This is my code and never worked for me
    i think i checked many times as my teacher Adam Khoury told me to, but i cannot figure it out where is the problem

    a programmer can help me out please?

    <!DOCTYPE html>
    <html>
    <head>
    <title>Digital clock</title>
    <style type="text/css">
    .clockStyle{
    background-color:#000000;
    border:#41FF41 2px inset;
    padding:6px;
    color:#66FFFF;
    font-size:12px;
    font-family:"Arial Black";
    letter-spacing: 2px;
    display:inline;

    }
    </style>
    </head>
    <body>

    <div id="clockDisplay" class ="clockStyle"></div>

    <script type"text/javascript" language="javascript">
    function renderTime(){

    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();
    if (h == 0){
    h = 12;
    } elseif (h > 12){
    h = h – 12;
    diem = "PM";
    }
    if (h < 10){
    h = "0" + h;
    }
    if ( m <10){
    m = "0" + m;
    }
    if (s < 10){
    s = "0" + s;
    }
    var myClock = document.getElementById("clockDisplay");
    myClock.textContent = h + ":"+ m +":"+ s +" "+ diem;
    myClock.innerHTML = h + ":"+ m +":"+ s +" "+ diem;
    setTimeout("renderTime()" ,1000);
    }
    renderTime();

    </script>
    </body>
    </html>

  15. Hello Adam, these are awesome videos, I am learning alot, I do have some questions and I was wondering if I could contact you sometime and ask you, I am building a membership website which I want to have a certain page reset at midnight for the next day, it is a site for people to add text, and i want the text to delete at midnight is what I mean and have the page start the new day with a blank slate.  Please let me know if I can contact you or if you can direct me to one of your videos explaining how to do that.

  33. The code doesn't appear to toggle AM and PM.
    you default diem to AM.
    if h>12 : then you change diem to PM which is good.

    however, if the time goes from11:59 to 00:00, diem will remain PM
    because you don't have logic to change it back.

    you need to add an else to say well if i don't need to make diem PM, change it back to AM

  41. I'm a very, very new programmer and my biggest problem is understanding the entire scope of programming a particular object to do what you want it to do. What I mean by that is adding the right set of codes to make it work; I simply don't know where to start and how to end it. This is very frustrating for me because I feel like there is no order to learning programming, where as html is easier to learn cause there seems to be order to it. Like in html you know that "oh, this goes here."

Leave a Reply