Create Simple Web Clock Using basic HTML,CSS(basic style and coloring lighting) and JavaScript withcode
Create Simple Web Clock Using basic HTML,CSS and JavaScript.
CODE:
<!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>
<style>
::-webkit-scrollbar{
width: 0px;
}
body{
padding: 0;
margin: 0;
}
#maindiv{
padding-top:20%;
width: 100%;
height: 1200px;
box-sizing: border-box;
background-color: rgb(0, 0, 0);
}
#timebox{
animation-name:ani1 ;
animation-duration:5s;
animation-iteration-count: infinite;
width:75.5%;
margin:auto ;
color:white;
background-color: rgba(67, 67, 67, 0);
padding:15px;
font-size: 150px;
border-radius: 15px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#hourbox,#minutebox,#secondbox{
display: inline-block;
border: 2px solid black;
box-shadow: 0px 0px 10px rgb(255, 255, 255) , inset 0px 0px 3px white;
border-radius: 15px;
padding: 5px;
}
@keyframes ani1 {
0%{
box-shadow: 0px 0px 100px rgb(0, 255, 47), inset 0px 0px 5px white;
}
20%{
box-shadow: 0px 0px 100px rgb(255, 0, 0), inset 0px 0px 5px white;
}
40%{
box-shadow: 0px 0px 100px rgb(0, 17, 255), inset 0px 0px 5px white;
}
60%{
box-shadow: 0px 0px 100px rgb(242, 0, 255), inset 0px 0px 5px white;
}
80%{
box-shadow: 0px 0px 100px rgb(217, 255, 0), inset 0px 0px 5px white;
}
100%{
box-shadow: 0px 0px 100px rgb(0, 255, 55), inset 0px 0px 5px white;
}
}
</style>
</head>
<body>
<div id="maindiv">
<div id="timebox">
<div id="hourbox">
</div> :
<div id="minutebox">
</div> :
<div id="secondbox">
</div>
</div>
<script>
setInterval(()=>{
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if(h<10){
h = "0" + h;
}
if(m<10){
m = "0" + m;
}
if(s<10){
s = "0" + s;
}
document.getElementById('hourbox').textContent = h ;
document.getElementById('minutebox').textContent = m ;
document.getElementById('secondbox').textContent = s;
if(d.getSeconds()==0){
document.getElementById('minutebox').style.color = "red"
}
else{
document.getElementById('minutebox').style.color = "white"
}
},500)
</script>
<span style="color:red;font-size: large;">Created by Dev shah <br> Available on: <a href="https://devslearningblog.blogspot.com/p/web-clock.html">https://devslearningblog.blogspot.com/p/web-clock.html</a> </span>
</div>
</body>
</html>
See the Live Output on this link : Click here
Output Preview:
Comments
Post a Comment