This content originally appeared on DEV Community and was authored by Technical Vandar
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:
This content originally appeared on DEV Community and was authored by Technical Vandar
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Technical Vandar | Sciencx (2021-09-20T14:27:18+00:00) Digital Clock Using HTML, CSS & JS.. Retrieved from https://www.scien.cx/2021/09/20/digital-clock-using-html-css-js/
" » Digital Clock Using HTML, CSS & JS.." Technical Vandar | Sciencx - Monday September 20, 2021, https://www.scien.cx/2021/09/20/digital-clock-using-html-css-js/
HARVARDTechnical Vandar | Sciencx Monday September 20, 2021 » Digital Clock Using HTML, CSS & JS.., viewed ,<https://www.scien.cx/2021/09/20/digital-clock-using-html-css-js/>
VANCOUVERTechnical Vandar | Sciencx - » Digital Clock Using HTML, CSS & JS.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/20/digital-clock-using-html-css-js/
CHICAGO" » Digital Clock Using HTML, CSS & JS.." Technical Vandar | Sciencx - Accessed . https://www.scien.cx/2021/09/20/digital-clock-using-html-css-js/
IEEE" » Digital Clock Using HTML, CSS & JS.." Technical Vandar | Sciencx [Online]. Available: https://www.scien.cx/2021/09/20/digital-clock-using-html-css-js/. [Accessed: ]
rf:citation » Digital Clock Using HTML, CSS & JS. | Technical Vandar | Sciencx | https://www.scien.cx/2021/09/20/digital-clock-using-html-css-js/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.