Create a simple digital clock using CSS and Pure JavaScript
Here is how to create a simple Simple Digital Clock using CSS and Pure JavaScript.
Include the following CSS:
<style>
#clock{
background-color:#292929;
width:220px;
color:#ffffff;
padding:20px;
font-size:50px;
text-align:center;
border-radius: 15px;
text-shadow: 2px 2px #4e4c4c;
}
.clockWrapper{
background-color: #c4c5c7;
border-radius: 15px;
padding:20px;
width: 260px;
box-shadow: 6px 6px 25px #333;
margin:auto;
}
</style>
This is the the HTML and JavaSript:
<body onload="startTime()">
<div class="clockWrapper">
<div id="clock">
</div>
</div>
<script type="text/javascript">
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>