How To create a digital-clock in HTML CSS JavaScript

on

 



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link rel="preconnect" href="https://fonts.googleapis.com">

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">

<title>Digital Clock</title>

<style>

 *{     margin: 0;

        padding: 0;

    }

 body{

            height: 100vh;

            width: 100vw;

            background-color: black;

           display: flex;

           justify-content: center;

           align-items: center;

        }

#showclock{

            color: #17D4FE;

            font-size: 8rem;

            font-family: 'Orbitron', sans-serif;

        }

</style>

</head>

<body>

<div id="showclock" onload="showTime()">showTime</div>

<script>

        function showTime(){

            var date=new Date();

            var h=date.getHours();

            var m=date.getMinutes();

            var s=date.getSeconds();

            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('showclock').innerText=time;

            document.getElementById('showclock').textContent=time;

            setTimeout(showTime,1000);

        }

        showTime();

</script>

</body>

</html>

Comments

Post a Comment

Blogs