In our earlier article, we have explained how to create analog style clock with HTML5 Canvas JavaScript. Let us create a simple digital clock widget for Weebly site. The widget will get the time from the clock of your computer and display the time in hours, minutes and seconds. Below is how the widget will look like.
Simple Digital Clock Widget for Weebly
The widget contains CSS, JavaScript and HTML part and we will explain one by one on detail.
JavaScript for Digital Clock
Below is the scrip to get the hours, minutes and seconds from your computer’s clock. The first script line is the script jQuery library link for the widget to work.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval( function() {
var hours = new Date().getHours();
$(".hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
setInterval( function() {
var minutes = new Date().getMinutes();
$(".minutes").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
var seconds = new Date().getSeconds();
$(".seconds").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
});
</script>
Note: In case if the script is not working on your Weebly site, then replace the $ variable with jQuery and publish the site again.
CSS for the Widget
The CSS has three classes – .time, .clock and .align. The “.time” class is used to align the clock numbers while the “.clock” class is used to setup the clock styles. The “.align” class is simply used to adjust the margin and font size.
<style>
.time {
display: inline-block;
color: #fff;
}
.clock {
border: 1px solid yellow;
border-radius: 5px;
background-color: darkslateblue;
text-align: center;
color: #fff;
}
.align {
margin: 15px;
font-size: 40px;
font-weight: 700;
}
</style>
HTML for the Widget
Below is the HTML code for the widget:
<div class="clock"> <div class="align"> <a><span class="time hours"></span></a> : <a><span class="time minutes"></span></a> : <a><span class="time seconds"></span></a> </div> </div>
The colon : is used as a separator between hours, minutes and seconds.
Complete Code for the Digital Clock Widget
The complete widget will look like below by adding the script, CSS and HTML together.
<html>
<head>
<style>
.time {
display: inline-block;
color: #fff;
}
.clock {
border: 1px solid yellow;
border-radius: 5px;
background-color: darkslateblue;
text-align: center;
color: #fff;
}
.align {
margin: 15px;
font-size: 40px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="clock">
<div class="align">
<a><span class="time hours"></span></a> :
<a><span class="time minutes"></span></a> :
<a><span class="time seconds"></span></a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval( function() {
var hours = new Date().getHours();
$(".hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
setInterval( function() {
var minutes = new Date().getMinutes();
$(".minutes").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
var seconds = new Date().getSeconds();
$(".seconds").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
});
</script>
</body>
</html>
Inserting the Widget in Weebly Site
There are many ways to insert the digital clock widget in your Weebly site.
- Insert the complete code on the required page using embed code element.
- Insert the script under footer code section and the CSS and HTML inside embed code element.
- Insert HTML inside embed code element, CSS under header code section and script under footer code section.
Customizing the Widget
Adjust the following CSS properties to customize the widget according to your need:
- Change the background color by modifying the “darkslateblue” in “background-color: darkslateblue;”.
- Change color of the numbers by modifying the “color:#fff;” property under “.time” class.
- Change the color of the separator with the “color:#fff;” under “.clock” class.
- Font weight, margin and font size can be adjusted with the “.align” class properties.
Below are some of the examples of digital clocks with different color variations. The clocks are placed side by side in Weebly site using embed code element. You can view the digital clocks demo on Weebly site here.
Leave a Reply
Your email is safe with us.