JS罗盘特效时钟

JS罗盘时钟特效

先看看效果图:

]YEKEO]~IHA~@G}5S1B0JYO.png


在线演示地址:  https://scarecrow.top/show/showgrainluopantime


var ScarecrowGrainRotateTime = (function(window) {
    var ScarecrowGrainRotateTime = function(conf={}) {

        return new ScarecrowGrainRotateTime.fn.init(conf);
    }

    ScarecrowGrainRotateTime.fn = ScarecrowGrainRotateTime.prototype = {
        constructor: ScarecrowGrainRotateTime,
        //附属元素
        el:'',
        //根元素对象
        elObj:null,
        //显示窗口宽度
        showWidth: 750,
        //显示窗口高度
        showHeight: 750,
        //显示文字高度
        showTextHeight: 20,
        //文本颜色
        textColor:"black",
        //显示时间文本颜色
        showTimeTextColor:"chartreuse",
        //背景颜色
        backgroundColor:"white",
        //初始化函数
        init:function(conf){
            this.el = conf.el;
            this.textColor = conf.textColor || "black";
            this.showTimeTextColor = conf.showTimeTextColor || "chartreuse";
            this.backgroundColor = conf.backgroundColor || "white";
            this.setFormWidthHeight(conf.width || 0, conf.height || 0);
            this.createAllAnimClass();
            this.drawTimeForm();
            this.startAnim();
        },
        //获取根元素对象
        getRootObj:function() {
            if (this.elObj == null) {
                this.elObj = window.document.getElementById(this.el);
                if (this.elObj == null) {
                    throw new Error("根元素不存在,请传入正确的根元素ID");
                }
                
                this.elObj.className = this.elObj.className + " showRootForm";
                this.elObj.style.cssText = this.elObj.style.cssText + "width:" + this.showWidth + "px;height:" + this.showHeight + "px;";
            }
            
            return this.elObj;
        },
        //设置窗口宽高
        setFormWidthHeight:function(width, height) {
            width = width < height ? width : height;
            height = width;
            if (this.showWidth < width) {
                this.showWidth = width;
                this.showHeight = height;
            }
        },
        //获取数字对应的中文
        getNumberToChines:function(num){
            switch(num){
                case 0:
                    return "零";
                case 1:
                    return "一";
                case 2:
                    return "二";
                case 3:
                    return "三";
                case 4:
                    return "四";
                case 5:
                    return "五";
                case 6:
                    return "六";
                case 7:
                    return "七";
                case 8:
                    return "八";
                case 9:
                    return "九";
                case 10:
                    return "十";
                default:
                    return "";
            }
        },
        //获取中文时间名
        getNumerToChinesStr:function(num, isYear=false) {
            if (isYear) {
                var Y="";
                var tempY = num;
                while(true) {
                    if (tempY == 0) {
                        break;
                    }
                    
                    Y = this.getNumberToChines(tempY % 10) + Y;
                    tempY = parseInt(tempY / 10); 
                }
                return Y;
            }
            
            var M = "";
            var tempM = num;
            if (tempM <= 10)  {
                M = "零" + this.getNumberToChines(tempM);
            } else {
                M = this.getNumberToChines(parseInt(tempM / 10)) +"十"+ this.getNumberToChines(tempM % 10);
            }
            return M;
        },
        //获取当前时间详情
        getNowTimeList:function (format="",isPrc=false) {
            var myDate = new Date();
            var myYear = myDate.getFullYear();
            var myMonth = myDate.getMonth();
            var myDateStr = myDate.getDate();
            var myHours = myDate.getHours();
            var myMinu = myDate.getMinutes();
            var mySec = myDate.getSeconds();
            var relData = {
                Y:myYear,
                M:myMonth + 1,
                D:myDateStr,
                H:myHours,
                I:myMinu,
                S:mySec
            };
            
            if (isPrc) {
                relData = {
                    Y:this.getNumerToChinesStr(relData.Y, true),
                    M:this.getNumerToChinesStr(relData.M),
                    D:this.getNumerToChinesStr(relData.D),
                    H:this.getNumerToChinesStr(relData.H),
                    I:this.getNumerToChinesStr(relData.I),
                    S:this.getNumerToChinesStr(relData.S)
                };
            }
            
            if (format == "") {
                return relData;
            }
            
            format = format.replace(/Y/g, relData.Y);
            format = format.replace(/M/g, relData.M);
            format = format.replace(/D/g, relData.D);
            format = format.replace(/H/g, relData.H);
            format = format.replace(/I/g, relData.I);
            format = format.replace(/S/g, relData.S);
            return format;
        },
        //获取某一个月有多少天
        getMonthHasDateNum:function(year, month) {
            var days = new Date(year, month, 0).getDate();
            return days
        },
        createAllAnimClass:function(){
            var sStr = ".showRootForm *{height: 20px;line-height: 20px;transform-origin: 0 50%;color:"+this.textColor+";} .showRootForm{display: block;position: relative;text-align: center;background-color: "+this.backgroundColor+";} .showYBaseForm{transform-origin: 50% 50%;} .showBaseForm{display: block;position: absolute;} .showBaseForm > div{text-align: right;position: absolute;overflow: hidden;} .isShowHeight{color: "+this.showTimeTextColor+";font-weight: 700;font-size: 13px !important;} ";
            
            for(var i = 0;i<60;i++) {
                if (i < 2) {
                    sStr += "@keyframes timeRotate"+i+"{0% {transform: rotate("+((348 + 6 * i))+"deg);}50% {transform: rotate("+((348 + 6 * (i+1)) + 1)+"deg);}100% {transform: rotate("+((348 + 6 * (i+1)))+"deg);}} ";
                } else {
                    sStr += "@keyframes timeRotate"+i+"{0% {transform: rotate("+((348 + 6 * i) % 360)+"deg);}50% {transform: rotate("+((348 + 6 * (i+1)) % 360 + 1)+"deg);}100% {transform: rotate("+((348 + 6 * (i+1)) % 360)+"deg);}} ";
                }
            }
            
            for(var i = 0;i<24;i++) {
                if(i<2) {
                    sStr += "@keyframes timeHRotate"+i+"{0% {transform: rotate("+((330 + 15 * i))+"deg);}50% {transform: rotate("+((330 + 15 * (i+1))+1)+"deg);}100% {transform: rotate("+((330 + 15 * (i+1)))+"deg);}} ";
                } else {
                    sStr += "@keyframes timeHRotate"+i+"{0% {transform: rotate("+((330 + 15 * i) % 360)+"deg);}50% {transform: rotate("+((330 + 15 * (i+1)) % 360+1)+"deg);}100% {transform: rotate("+((330 + 15 * (i+1)) % 360)+"deg);}} ";
                }

            }
            
            for(var i = 1;i<=12;i++) {
                if (i <= 2) {
                    sStr += "@keyframes timeMRotate"+i+"{0% {transform: rotate("+((300 + 30 * i))+"deg);}50% {transform: rotate("+((300 + 30 * (i+1))+1)+"deg);}100% {transform: rotate("+((300 + 30 * (i+1)))+"deg);}} ";
                } else {
                    sStr += "@keyframes timeMRotate"+i+"{0% {transform: rotate("+((300 + 30 * i) % 360)+"deg);}50% {transform: rotate("+((300 + 30 * (i+1)) % 360+1)+"deg);}100% {transform: rotate("+((300 + 30 * (i+1)) % 360)+"deg);}} ";
                }
            }
            
            var timeInfo = this.getNowTimeList();
            var dateNum = this.getMonthHasDateNum(timeInfo.Y, timeInfo.M);
            var tempRotate = 360 / dateNum;
            for(var i = 1;i<=dateNum;i++) {
                if (i <= 2) {
                    sStr += "@keyframes timeDRotate"+i+"{0% {transform: rotate("+(((360 - tempRotate * 2) + tempRotate * i))+"deg);}50% {transform: rotate("+(((360 - tempRotate * 2) + tempRotate * (i+1))+1)+"deg);}100% {transform: rotate("+(((360 - tempRotate * 2) + tempRotate * (i+1)))+"deg);}} ";
                } else {
                    sStr += "@keyframes timeDRotate"+i+"{0% {transform: rotate("+(((360 - tempRotate * 2) + tempRotate * i) % 360)+"deg);}50% {transform: rotate("+(((360 - tempRotate * 2) + tempRotate * (i+1)) % 360+1)+"deg);}100% {transform: rotate("+(((360 - tempRotate * 2) + tempRotate * (i+1)) % 360)+"deg);}} ";
                }
            }
            
            
            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML=sStr;
            document.getElementsByTagName('head')[0].appendChild(style);
        },
        //绘制整个时钟
        drawTimeForm:function() {
            this.createYBaseDiv();
            this.createMBaseDiv();
            this.createDBaseDiv();
            this.createHBaseDiv();
            this.createIBaseDiv();
            this.createSBaseDiv();
        },
        //创建年份显示DIV
        createYBaseDiv:function(){
            var divStr = "<div class='showYBaseForm showBaseForm isShowHeight' style='width:"+(this.showWidth  /  8)+"px;left:"+(this.showWidth * 7 / 16)+"px;top:"+(this.showHeight / 2 - this.showTextHeight / 2)+"px;'>"+this.getNowTimeList("Y", true)+"</div>";
            this.getRootObj().innerHTML = divStr;
        },
        //创建月份显示DIV
        createMBaseDiv:function(){
            var textStr = "";
            for (var i=1;i<=12;i++) {
                textStr += "<div style='width:"+(this.showWidth / 2 / 16 * 5)+"px;transform: rotate("+ (-360 / 12 * (i-1))  +"deg)' class='isShowM"+ (i) +"'>"+ this.getNumerToChinesStr(i) +"月</div>";
            }
            var divStr = "<div class='showBaseForm showMBaseForm' style='width:"+(this.showWidth / 2 / 16 * 5)+"px;left:"+(this.showWidth / 2)+"px;top:"+(this.showHeight / 2 - this.showTextHeight / 2)+"px;'>"+textStr+"</div>";
            this.getRootObj().innerHTML = this.getRootObj().innerHTML + divStr;
        },
        //创建日期份显示DIV
        createDBaseDiv:function(){
            var textStr = "";
            var dateInfo = this.getNowTimeList();
            var dateNum = this.getMonthHasDateNum(dateInfo.Y, dateInfo.M);
            for (var i=1;i<=dateNum;i++) {
                textStr += "<div style='width:"+(this.showWidth / 2 / 16 * 8)+"px;transform: rotate("+ (-360 / dateNum * (i-1))  +"deg)' class='isShowD"+i+"'>"+ this.getNumerToChinesStr(i) +"号</div>";
            }
            var divStr = "<div class='showBaseForm showDBaseForm' style='width:"+(this.showWidth / 2 / 16 * 8)+"px;left:"+(this.showWidth / 2)+"px;top:"+(this.showHeight / 2 - this.showTextHeight / 2)+"px;'>"+textStr+"</div>";
            this.getRootObj().innerHTML = this.getRootObj().innerHTML + divStr;
        },
        //创建小时显示DIV
        createHBaseDiv:function(){
            var textStr = "";
            for (var i=1;i<=24;i++) {
                textStr += "<div style='font-size:13px;width:"+(this.showWidth / 2 / 16 * 11)+"px;transform: rotate("+ (-360 / 24 * (i-1))  +"deg)' class='isShowH"+(i%24)+"'>"+ this.getNumerToChinesStr(i%24) +"时</div>";
            }
            var divStr = "<div class='showBaseForm showHBaseForm' style='width:"+(this.showWidth / 2 / 16 * 11)+"px;left:"+(this.showWidth / 2)+"px;top:"+(this.showHeight / 2 - this.showTextHeight / 2)+"px;'>"+textStr+"</div>";
            this.getRootObj().innerHTML = this.getRootObj().innerHTML + divStr;
        },
        //创建分钟显示DIV
        createIBaseDiv:function(){
            var textStr = "";
            for (var i=1;i<=60;i++) {
                textStr += "<div style='font-size:13px;width:"+(this.showWidth / 2 / 16 * 14)+"px;transform: rotate("+ (-360 / 60 * (i-1))  +"deg)' class='isShowI"+(i%60)+"'>"+ this.getNumerToChinesStr(i%60) +"分</div>";
            }
            var divStr = "<div class='showBaseForm showIBaseForm' style='width:"+(this.showWidth / 2 / 16 * 14)+"px;left:"+(this.showWidth / 2)+"px;top:"+(this.showHeight / 2 - this.showTextHeight / 2)+"px;'>"+textStr+"</div>";
            this.getRootObj().innerHTML = this.getRootObj().innerHTML + divStr;
        },
        //创建秒显示DIV
        createSBaseDiv:function(){
            var textStr = "";
            for (var i=1;i<=60;i++) {
                textStr += "<div style='font-size:12px;width:"+(this.showWidth / 2 / 16 * 16)+"px;transform: rotate("+ (-360 / 60 * (i-1))  +"deg)' class='isShowS"+(i%60)+"'>"+ this.getNumerToChinesStr(i%60) +"秒</div>";
            }
            var divStr = "<div class='showBaseForm showSBaseForm' style='width:"+(this.showWidth / 2 / 16 * 16)+"px;left:"+(this.showWidth / 2)+"px;top:"+(this.showHeight / 2 - this.showTextHeight / 2)+"px;'>"+textStr+"</div>";
            this.getRootObj().innerHTML = this.getRootObj().innerHTML + divStr;
        },
        addClass:function(obj, className) {
            if(obj.className.search(className) != -1) {
                return true;
            }
            obj.className = (obj.className + " " + className).replace(/s+/ig," ");
            
        },
        removeClass:function(obj, className){
            obj.className = obj.className.replace(className, "").replace(/s+/ig," ");
        },
        startAnim:function() {
            var dateInfo = this.getNowTimeList();
            var dateNum = this.getMonthHasDateNum(dateInfo.Y, dateInfo.M);
            var s = dateInfo.S;
            var i = dateInfo.I;
            var h = dateInfo.H;
            var m = dateInfo.M;
            var d = dateInfo.D;
            var y = dateInfo.Y;
            var isStart = true;
            
            
            var sObj = document.getElementsByClassName('showSBaseForm')[0];
            var iObj = document.getElementsByClassName('showIBaseForm')[0];
            var hObj = document.getElementsByClassName('showHBaseForm')[0];
            var dObj = document.getElementsByClassName('showDBaseForm')[0];
            var mObj = document.getElementsByClassName('showMBaseForm')[0];
            var yObj = document.getElementsByClassName('showYBaseForm')[0];
            //秒
            setInterval(() => {
                
                this.removeClass(sObj.getElementsByClassName("isShowS"+((s - 1) < 0 ? 59 : (s - 1)))[0], 'isShowHeight');
                s = s % 60;
                sObj.style.animation="timeRotate"+ s +" 1s ease-in-out 0s 1 normal forwards";
                this.addClass(sObj.getElementsByClassName("isShowS"+s)[0], 'isShowHeight');
                if (isStart) {
                    iObj.style.animation="timeRotate"+ i +" 1s ease-in-out 0s 1 normal forwards";
                    hObj.style.animation="timeHRotate"+ h +" 1s ease-in-out 0s 1 normal forwards";
                    dObj.style.animation="timeDRotate"+ d +" 1s ease-in-out 0s 1 normal forwards";
                    mObj.style.animation="timeMRotate"+ m +" 1s ease-in-out 0s 1 normal forwards";
                    
                    this.addClass(iObj.getElementsByClassName("isShowI"+i)[0], 'isShowHeight');
                    this.addClass(hObj.getElementsByClassName("isShowH"+h)[0], 'isShowHeight');
                    this.addClass(dObj.getElementsByClassName("isShowD"+d)[0], 'isShowHeight');
                    this.addClass(mObj.getElementsByClassName("isShowM"+m)[0], 'isShowHeight');
                    
                    isStart = false;
                } else {
                    if (s == 0) {
                        this.removeClass(iObj.getElementsByClassName("isShowI"+i)[0], 'isShowHeight');
                        i++;
                        i = i % 60;
                        this.addClass(iObj.getElementsByClassName("isShowI"+i)[0], 'isShowHeight');
                        iObj.style.animation="timeRotate"+ i +" 1s ease-in-out 0s 1 normal forwards";
                        
                        if (i == 0) {
                            this.removeClass(hObj.getElementsByClassName("isShowH"+h)[0], 'isShowHeight');
                            h++;
                            h = h % 24;
                            this.addClass(hObj.getElementsByClassName("isShowH"+h)[0], 'isShowHeight');
                            hObj.style.animation="timeHRotate"+ h +" 1s ease-in-out 0s 1 normal forwards";
                            if (h == 0) {
                                this.removeClass(dObj.getElementsByClassName("isShowD"+d)[0], 'isShowHeight');
                                d++;
                                if (d == dateNum + 1) {
                                    window.location.reload();
                                }
                                this.addClass(dObj.getElementsByClassName("isShowD"+d)[0], 'isShowHeight');
                                dObj.style.animation="timeDRotate"+ d +" 1s ease-in-out 0s 1 normal forwards";
                
                            }
                        }
                    }
                }
                s++;
            }, 1000);
        }
    }

    ScarecrowGrainRotateTime.fn.init.prototype = ScarecrowGrainRotateTime.fn;
    return ScarecrowGrainRotateTime;
})(window);
//挂在全局
window.ScarecrowGrainRotateTime=ScarecrowGrainRotateTime;


demo.html

<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
        <title>Document</title>    
        </head>
    <body>
        <div id="showTimes" style="margin:auto;top:50px;">            
        </div>
        <script src="./scarecrow_time/scarecrowTime.js"></script>
        <script>    
            let a = ScarecrowGrainRotateTime({        
                    el:"showTimes",        
                    width:600,       
                    height:600,        
                    textColor:"#0053FC",        
                    showTimeTextColor:"#20D8DE",        
                    backgroundColor:"white"});
          </script>
      </body>
</html>


此篇文章没什么好讲的就是一个CSS的运用以及JS对元素的CSS设置。

单纯喜欢,所以制作    -----Scarecrow

阅读数:168
如有疑问请与我联系:点击与我联系