Clock Using Html & Js
CLOCK 
::
Code for this clock
<!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">
<title>Document</title>
</head>
<style>
body {
background-color: black;
width: 98vw;
height: 95vh;
border: 4px double cornflowerblue;
}
.heading {
text-align: center;
margin-top: 10px;
font-size: 70px;
color: crimson;
}
.heading img {
height: 50px;
width: 60px;
}
.time {
text-align: center;
color: crimson;
font-size: 100px;
padding-top: 70px;
}
.time span {
color: azure;
}
#s {
color: yellow;
}
</style>
<body>
<div class="heading"> CLOCK <img src="https://icons.
iconarchive.com/icons/flat-icons.com/flat/512/Clock-icon.png"
alt="clock img">
</div>
<div class="time">
<span id="h"></span>:<span id="m"></span>:<span id="s"></span>
</div>
</body>
<script>
function displayTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
document.getElementById('h').innerHTML = hours;
document.getElementById('m').innerHTML = minutes;
document.getElementById('s').innerHTML = seconds;
}
setInterval(displayTime, 1000);
</script>
</html>
Comments
Post a Comment
knowledgeable post