JavaScript to achieve digital clock effects

This article example shares the specific code for implementing digital clock effects in javascript for your reference. The specific content is as follows

See the effect first, dynamic digital clock

jQuery is used, but only to get elements, only a little bit

Object-oriented development

Look at the code

HTML, import jQuery and js yourself, jQuery first

<body>
    <div class="wrapper">
        <div class="column">
            <!-- This div represents the tens digit, which can be 0, 1, or 2. -->
            <div>0</div>
            <div>1</div>
            <div>2</div>
        </div>
        <!-- The following content is too redundant to be written in HTML code, so it is written using js-->
        <div class="column ten"></div>
        <div class="coln">:</div>
        <div class="column six"></div>
        <div class="column ten"></div>
        <div class="coln">:</div>
        <div class="column six"></div>
        <div class="column ten"></div>
    </div>
</body>

CSS

*{
     margin: 0;
     padding: 0;
}
html,body{
     height: 100%;
     width: 100%;
     background-color: #0e141b;
    overflow: hidden;
    /* Set overflow to hide */
}
.wrapper{
    text-align: center;
    width: 100%;
}
.wrapper .column,
.wrapper .coln{
    display: inline-block;
    vertical-align: top;
    color: rgba(224,230,235,0.89);
    font-size: 86px;
    line-height: 86px;
    font-weight: 300;
}
.column{
    transition: all 300ms ease-in;
}
.coln{
    /* Colon position*/
    transform: translateY(calc(50vh - 83px));
}
/* The following are the transparency corresponding to different class names*/
.visible{
    opacity: 1;
}
.close{
    opacity: 0.25;
}
.far{
    opacity: 0.15;
}
.distance{
    opacity: 0.05;
}

function Index(dom, use) {
    // Convert the passed DOM element to an array this.column = Array.from(dom);
    // Transfer use to the global state, this is to determine whether the time system to be displayed is 112 hours or 24 hours this.use = use;
    // This array is the class name to be set later this.classList = ['visible', 'close', 'far', 'distance', 'distance', 'distance', 'distance', 'distance'];
    this.createDom();
    this.start();//Start}
// Start function Index.prototype.start = function () {
    var self = this;
    setInterval(function () {
        var c = self.getClock();
        // console.log(c);
        self.column.forEach(function (ele, index) {
            var n = + c[index];
            var offset = n * 86; //moving distance console.log(offset);
            $(ele).css({
                'transform': 'translateY(calc(50vh - ' + offset + 'px - 73px))'
                // Set movement });
            Array.from(ele.children).forEach(function (ele2, index2) {
                var className = self.getClass(n, index2);
                // Call function to set class name $(ele2).attr('class', className);
            })
        })
    }, 500);
};
// Set different class names for elements with different distance times Index.prototype.getClass = function (n, i) {
    var className = this.classList.find(function (ele, index) {
        return i - index === n || i + index === n;
    })
    return className || "";
}
 
// Get the time and format it, string 21:06:09 ==> 210609
Index.prototype.getClock = function () {
    var d = new Date();
    // Here we use a ternary operator. If use is true, we get the value. If it is false, we convert the remainder of 12 to a 12-hour system. return [this.use ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
        return p + ('0' + n).slice(-2);
        // Here we add 0 to the single digit, for example, 1 plus 0 gives 01, if 12 plus 0 gives 012, but taking the last two digits of the value gives 12
    }, '')
};
// Since writing all HTML elements into the HTML file is too redundant, we use a for loop to add them Index.prototype.creatDom = function () {
    for (var i = 0; i < 6; i++) {
        var oDiv = '<div>' + i + '</div>';
        $(".six").append(oDiv);
    }
    for (var i = 0; i < 10; i++) {
        var iDiv = '<div>' + i + '</div>';
        $(".ten").append(iDiv);
    }
};
 
// The second parameter, true is 24-hour system, false is 12-hour system new Index($('.column'), true);

I wrote a relatively complete comment for js, so you should be able to understand it.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: