Wednesday, 3 August 2016

CREATE A DIGITAL CLOCK USING JAVASCRIPT HTML AND CSS

           
  1 comment  
Here is a simple code for digital clock using html css and javascript.

The CSS and HTML and JAVASCRIPT
<html>
<head>
    <title>Digital Clock</title>

    <link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" 
        type="text/css"/>

    <style>
        .tabBlock
        {
            background-color:#57574f;
            border:solid 0px #FFA54F;
            border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
            max-width:200px;
            width:100%;
            overflow:hidden;
            display:block;
        }
        .clock
        {
            vertical-align:middle;
            font-family:Orbitron;
            font-size:40px;
            font-weight:normal;
            color:#FFF;
            padding:0 10px;
        }
        .clocklg 
        {
            vertical-align:middle; 
            font-family:Orbitron;
            font-size:20px;
            font-weight:normal;
            color:#FFF;
        }
    </style>
</head>

<!-- ON LOAD OF THE PAGE, THE CLOCK WILL START TICKING. -->
<body onload="digitized();">
    <div style="background-color:#F3F3F3;
        max-width:220px;width:100%;margin:0 auto;padding:20px;">

        <table class="tabBlock" align="center" cellspacing="0" cellpadding="0" border="0">
            <tr><td class="clock" id="dc"></td>  <!-- THE DIGITAL CLOCK. -->
                <td>
                    <table cellpadding="0" cellspacing="0" border="0">
                    
                        <!-- HOUR IN 'AM' AND 'PM'. -->
                        <tr><td class="clocklg" id="dc_hour"></td></tr>

                        <!-- SHOWING SECONDS. -->
                        <tr><td class="clocklg" id="dc_second"></td></tr>
                    </table>
                </td>
            </tr>
        </table>

    </div>
 //the javascript
<script>
    // OUR FUNCTION WHICH IS EXECUTED ON LOAD OF THE PAGE.
    function digitized() {
        var dt = new Date();    // DATE() CONSTRUCTOR FOR CURRENT SYSTEM DATE AND TIME.
        var hrs = dt.getHours();
        var min = dt.getMinutes();
        var sec = dt.getSeconds();

        min = Ticking(min);
        sec = Ticking(sec);

        document.getElementById('dc').innerHTML = hrs + ":" + min;
        document.getElementById('dc_second').innerHTML = sec;
        if (hrs > 12) { document.getElementById('dc_hour').innerHTML = 'PM'; }
        else { document.getElementById('dc_hour').innerHTML = 'AM'; }

        var time
                
        // CALL THE FUNCTION EVERY 1 SECOND (RECURSION).
        time = setInterval('digitized()', 1000);
    }

    function Ticking(ticVal) {
        if (ticVal < 10) {
            ticVal = "0" + ticVal;
        }
        return ticVal;
    }
</script>


 
 </body>
</html>
 


 







Share: 








































1 comment:








  1. Anonymous30 March 2022 at 03:07
    Create A Digital Clock Using Javascript Html And Css ~ Itgist >>>>> Download Now

    >>>>> Download Full

    Create A Digital Clock Using Javascript Html And Css ~ Itgist >>>>> Download LINK

    >>>>> Download Now

    Create A Digital Clock Using Javascript Html And Css ~ Itgist >>>>> Download Full

    >>>>> Download LINK 
    ReplyDelete