Digital clock - Real Helper

Shovit Nepal

1234

Beautiful digital clock using html css and js

 <!doctype html>
<html lang="en">
<head>
<meta name="viewport"  content="width=device-width", initial-scale=1">
<title>WATCH</title>





</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>

Try it Yourself >>

 
.container{

    margin-left:35%;
    margin-top:20%;
    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:center;
 padding:15px;
 font-size:30px;
 vertical-align:bottom;
}
body{
 background-image:linear-gradient(to right,#f3f0f2,#12efdd);
}

Try it Yourself >>