css3+jquery实现简单时钟特效

初探前端开发，前期写一些小demo，后期会慢慢写些学习经验，欢迎各位看官交流学习经验（QQ:1759668379）

这个时钟特效是在腾讯课堂看渡一的js直播课时学到的，废话不多说，直接上源码。

html文件：很简单的用div写整体框架，但是没有用到js动态生成div块。

<?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>数字时钟</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文件：为了提高可读性，所以css部分完全与html部分分离

*{
    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文件：主要是针对对象，所有代码全部放在原型链上。

function Index(dom,use24H) {
    this.column=Array.from(dom);//组件类
    this.use24H=use24H;//时间
    this.classList=['visible','close','far','far','dis','dis'];//类名
    this.start();
}
//开始--》获取到当前时间
// --》当前时间 14 17 35 -->字符串141735
//-->六个数与六个类名为column的div分别对应上
//-->分别找到每一列为当前时间的数字垂直局中显示 --根据数字大小调节在Y轴上移动的距离
//-->同一列中不同数字位置不同 透明度不同（根据为每一个数字见不同的类名实现）

Index.prototype.start=function () {
    var self=this;
    setInterval(function () {
       var c=self.getClock();
       self.column.forEach(function (ele,index) {//遍历所有column类对象
           var n=+c[index];//第n列
           var offset=n*86;
           $(ele).css({
               'transform':'translateY(calc(50vh - ' + offset + 'px - ' + 43 + 'px))'  //对应数字垂直居中显示
           })
           Array.from(ele.children).forEach(function (ele2,index2) {//遍历column中的所有div
               var className=self.getClassName(n,index2);//获取类名
               $(ele2).attr('class',className)//动态添加类名
           })
       })
    },1000)//1秒刷新一次
}
Index.prototype.getClassName=function(n,index2){
    var className=this.classList.find(function (className,classindex) {
        return index2-classindex===n||index2+classindex===n;//查找符合此方法的值
    })
    return className||'';
}
Index.prototype.getClock=function () {
    var d=new Date();//获取当前时间
    return [this.use24H?d.getHours():d.getHours()%12||12,
    d.getMinutes(),d.getSeconds()].reduce(function (p,n) {//累加函数
        return (p+('0'+n).slice(-2));//保留后两位
    },'');
}
new Index($('.column'),true);//new一个对象

欢迎留言批评指正。

（完。）

css3+jquery实现简单时钟特效

猜你喜欢