Source Code: HTML: <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> JS Digital Clock</title> </head> <body> <div id= "clock" > <h1 id= "time" > </h1> </div> </body> </html> Enter fullscreen mode Exit fullscreen mode CSS Code: * { margin : 0 ; padding : 0 ; box-sizing : border-box ; } #clock { height : 20vh ; width : 40vw ; background-color : rgb ( 125 , 202 , 202 ); position : fixed ; margin : auto ; top : 0 ; bottom : 0 ; left : 0 ; right : 0 ; text-align : center ; box-shadow : 8px 8px 16px #cddce1 , -8px -8px 16px #cddce1 ; } h1 { font-size : 90px ; font-family : sans-serif ; text-align : center ; margin-top : 15px ; text-shadow : 4px 3px 0 #fff , 9px 8px 0 rgba ( 0 , 0 , 0 , 0.15 ); } Enter fullscreen mode Exit fullscreen mode JavaScript Code: var myVar = setInterval ( myTimer , 1000 ); function myTimer (){ var a = new Date (); document . getElementById ( " time " ). innerHTML = a . toLocaleTimeString (); } Enter fullscreen mode Exit fullscreen mode Find Me On: Facebook Youtube Github
Top comments (0)