<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width", initial-scale=1">
<title>WATCH</title>
<style>
.container{
margin-left:35%;
margin-top:10%;
height:300px;
width:300px;
border-color:#bc1ac5;
display:inline-flex;
background-color:#060606db;
color:#00BCD4;
border-radius: 100px;
box-shadow: 0px 0px 50px #151414;
text-align:center;
justify-content:flex-start;
padding:15px;
font-size:30px;
vertical-align:bottom;
}
body{
background-image:linear-gradient(to right,#f3f0f2,#12efdd);
}
</style>
</head>
<div class="container">
<div id="clock"></div>
</div>
<script>
function currentTime(){
var date=new Date();
var hour=date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();
date.getSeconds();
hour=updateTime(hour);
min=updateTime(min);
sec=updateTime(sec);
document.getElementById("clock").innerText=hour+":"+min+":"+sec;
var t=setTimeout(function(){currentTime()},1000);
}
function updateTime(k){
if(k<10){
return "0" +k;
}
else{
return k;
}
}
currentTime();
</script>
</body>
</html>
Comments
Post a Comment