How to Display Time or Countdown Digitally on a Website Using jquery.classyled.js

The ability to display time or a countdown digitally on a website not only captures the visual interest of users but also helps convey important information intuitively. For example, when displaying the end time of a sale or the start time of the next event, visually appealing digital displays can be very effective. In this article, we will introduce a method using a plugin called “jquery.classyled.js” that makes it easy to achieve such digital displays.

What is jquery.classyled.js?

“jquery.classyled.js” is a plugin based on jQuery that allows you to display time or a countdown in a digital format. By using this plugin, you can easily introduce visually sophisticated digital displays without writing complex code. Even beginners can start using it immediately by making some basic settings.

Advantages of Digital Display

Displaying time or a countdown digitally on a website offers the following advantages:

• Easy to capture users’ attention: Dynamically changing numbers naturally draw the user’s gaze.
• Intuitive information delivery: Numbers are a universal information format and are easily understood regardless of language.
• Enhances brand image: A visually sophisticated design emphasizes the professional image of the brand.

CSS for Displaying Digital Numbers for Time or Countdown

First, set the style for the digital display. The following CSS code is an example where the background is black and the text color is white. You can freely customize the font size and design, so adjust it according to your website’s design.

<style type="text/css">
<!--
body{
    margin:0;
    padding:0;
}
h1{
    font-size:18px;
    font-weight:bold;
    line-height:1.6em;
    text-align:center;
    padding:15px 0;
}
#idWrap{
    width:700px;
    margin:0 auto;
    text-align:left;
}
#led0,#led1{
    background-color:#000;
}
-->
</style>

Loading JavaScript for Displaying Digital Numbers for Time or Countdown

Next, load the necessary JavaScript files: jquery.min.js (1.8.3), raphael.js, and jquery.classyled.js. This includes jQuery, Raphael.js, and the main subject of this article, “jquery.classyled.js”. By adding these to the HTML, the digital display function will start working.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/raphael.js"></script>
<script src="js/jquery.classyled.js"></script>

HTML for Implementing the Digital Display

Below is an example of HTML code for implementing the digital display. This code sets up four different digital display patterns. Each pattern has different formats and display styles to accommodate various needs.

<h1>Display Time in a Digital Format.</h1>

    <div id="led0" class="autosize"></div>
    <br />
    <div id="led1" class="autosize"></div>
    <p>Format = hh:mm</p>
    <div id="led2" class="autosize"></div>
    <p>Format = hh:mm:ss</p>
    <div id="led3" class="autosize"></div>

JavaScript for Displaying Time or Countdown Digitally Using jquery.classyled.js

Using “jquery.classyled.js,” you can easily customize the display format of time or a countdown. Below is a specific code example. For each pattern, you can specify the ID of the element to display, format, text color, background color, size, and the roundness of the dots. By changing these, you can flexibly adjust the display style.

Use new ClassyLED({tag id, display information (time or countdown), format method, text color, background color, font size, dot roundness}) to specify the display method. Four display patterns are provided. Modify as needed.

<script>
    $(document).ready(function() {
        var l0 = new ClassyLED({
            id : "led0",
            type : "countdown",
            format : "ddd:hh:mm:ss",
            color : "#eee",
            bgcolor : "#000",
            size : 8,
            rounded : 1,
            led : "font1"
        });
        var l1 = new ClassyLED({
            id : "led1",
            type : "random",
            length : 7,
            color : "#af0",
            bgcolor : "#101a10",
            size : 8,
            rounded : 6
        });
        var l2 = new ClassyLED({
            id : "led2",
            type : "time",
            format : "hh:mm",
            color : "#f0a",
            bgcolor : "#222",
            size : 10,
            rounded : 4
        });
        var l3 = new ClassyLED({
            id : "led3",
            type : "time",
            format : "hh:mm:ss",
            hourformat : 12,
            color : "#fa0",
            bgcolor : "#222",
            size : 10,
            rounded : 0
        });
    });
</script>

jquery.classyled: Demo Page for Displaying Time in a Digital Format

By following the above steps, you can actually display time or a countdown digitally on your website. For example, you can access the demo page from the link below to check the actual operation.

jquery.classyled: Demo Page for Displaying Time in a Digital Format

On this demo page, you can try various digital display patterns and check how it feels to use them. Consider using it as a reference when integrating it into your own website.

Summary

Using “jquery.classyled.js,” you can easily display time or a countdown digitally on a website. The strong visual impact and smooth information delivery can enhance the appeal of your site. Try adding digital displays to your site using this easy-to-implement plugin, and you will surely experience great effects that capture users’ attention.

　

* Please use this at your own risk if you intend to reuse it.

Do not use the Google Analytics tag in the head tag of the demo page.