CSS3+jquery implements simple clock effects

Preliminary exploration of front-end development, writing some small demos in the early stage, and later writing some learning experience, welcome to exchange learning experience with the officials (QQ: 1759668379)

This clock special effect was learned when watching Duyi's js live class in Tencent classroom. I won't say much nonsense and go directly to the source code.

HTML file: It is very simple to use div to write the overall framework, but does not use js to dynamically generate div blocks.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Digital Clock</title>
    <link href="demo.css" rel="stylesheet"></link>
</head>
<body>
    <div class="wrapper">
        <div class="column">
            <div>0</div>
            <div>1</div>
            <div>2</div>
        </div>
        <div class="column">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="colt">:</div>
        <div class="column">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        <div class="column">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="colt">:</div>
        <div class="column">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        <div class="column">
            <div>0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
<script type="" src="jquery.js"></script>
<script type="" src="demo.js"></script>
</body>
</html>

CSS file: for better readability, the css part is completely separated from the html part

*{
    margin:0;
}
body{
    background-color:#0e141b;
    overflow: hidden;
}
.wrapper{
    width:100%;
    text-align:center;
}
.column,
.colt{
    font-weight: 300;
    color:rgba(224, 230,235,0.89);
    font-size:86px;
    line-height: 86px;
    display:inline-block;
    vertical-align: top;
    overflow: hidden;
}
.column{
    transition: transform 300ms ease-in;
}
.colt{
    transform:translateY(calc(50vh - 43px));
}
.column div{
    transition:opacity 500ms,text-shadow 400ms;
    opacity:0.25;
}
.column .visible{
    opacity:1;
    text-shadow:1px 1px 30px #336699;
}
.column .close{
    opacity:0.35;
}
.column .far{
    opacity:0.15;
}
.column .dis{
    opacity:0.1;
}

js file: mainly for objects, all code is placed on the prototype chain.

function Index(dom,use24H) {
    this.column=Array.from(dom);//Component class
    this.use24H=use24H;//time
    this.classList=['visible','close','far','far','dis','dis'];//类名
    this.start();
}
//Start--"Get the current time
// -- "Current time 14 17 35 --> String 141735
//-->The six numbers correspond to the six divs whose class name is column
//-->Find the digital vertical display of each column of the current time separately--adjust the distance moved on the Y axis according to the size of the number
//-->Different numbers in the same column have different transparency and different transparency (implemented according to different class names for each number)

Index.prototype.start=function () {
    var self=this;
    setInterval(function () {
       var c=self.getClock();
       self.column.forEach(function (ele,index) {//traverse all column class objects
           var n=+c[index];//Column n
           var offset = n * 86;
           $(ele).css({
               'transform':'translateY(calc(50vh - ' + offset + 'px - ' + 43 + 'px))' //The corresponding number is displayed vertically centered
           })
           Array.from(ele.children).forEach(function (ele2,index2) {// Traverse all divs in the column
               var className=self.getClassName(n,index2);//Get the class name
               $(ele2).attr('class',className)//Add class name dynamically
           })
       })
    },1000)//Refresh every 1 second
}
Index.prototype.getClassName=function(n,index2){
    var className=this.classList.find(function (className,classindex) {
        return index2-classindex===n||index2+classindex===n;//Find a value that matches this method
    })
    return className||'';
}
Index.prototype.getClock=function () {
    var d=new Date();//Get the current time
    return [this.use24H?d.getHours():d.getHours()%12||12,
    d.getMinutes(),d.getSeconds()].reduce(function (p,n) {//accumulation function
        return (p+('0'+n).slice(-2));//Keep the last two digits
    },'');
}
new Index($('.column'),true);//new an object

Comments and corrections are welcome.

(over.)

CSS3+jquery implements simple clock effects

Guess you like