An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Some of Our Sources
- Team Treehouse
- Joshua Blankenship
- Abduzeedo
- You The Designer
- Naldz Graphics
- CSS Tricks
- Web Resource Source
- Daily Now
- The Verge
- TechPowerUp
Help Webnuz
Referal links:
September 20, 2021 02:27 pm GMT
Original Link: https://dev.to/technicalvandar885/digital-clock-using-html-css-js-5l3
Digital Clock Using HTML, CSS & JS.
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>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); }JavaScript Code:
var myVar=setInterval(myTimer, 1000); function myTimer(){ var a=new Date(); document.getElementById("time").innerHTML=a.toLocaleTimeString(); }Find Me On:
Original Link: https://dev.to/technicalvandar885/digital-clock-using-html-css-js-5l3
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To