Breaking News: Grepper is joining You.com. Read the official announcement!

digital clock in javascript

Marwan Zayed answered on December 21, 2022 Popularity 9/10 Helpfulness 5/10

answer digital clock in javascript

digital clock in javascript

Comment

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Digital Clock</title>
    <style>
        body {
            background: black;
        }
        .clock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            color: #17D4FE;
            font-size: 60px;
            font-family: Orbitron;
            letter-spacing: 7px;
        }
    </style>
    </head>
	<body>
    	<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
    </body>
    <script>
    	function showTime(){
            var date = new Date();
            var h = date.getHours(); // 0 - 23
            var m = date.getMinutes(); // 0 - 59
            var s = date.getSeconds(); // 0 - 59
            var session = "AM";    
            if(h == 0){
                h = 12;
            }  
            if(h > 12){
                h = h - 12;
                session = "PM";
            }    
            h = (h < 10) ? "0" + h : h;
            m = (m < 10) ? "0" + m : m;
            s = (s < 10) ? "0" + s : s;    
            var time = h + ":" + m + ":" + s + " " + session;
            document.getElementById("MyClockDisplay").innerText = time;
            document.getElementById("MyClockDisplay").textContent = time;    
            setTimeout(showTime, 1000);
        }

        showTime();
    </script>
</html>

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: codepen.io

Tags: clock digital javascript

Link to this answer
Share Copy Link

Contributed on Dec 21 2022

Marwan Zayed

0 Answers Avg Quality 2/10

digital clock in javascript

Contents

More Related Answers

digital clock in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.