jquery+css实现汉字款转盘时钟效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery+css实现汉字款转盘时钟效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;padding: 0;
        }
        html,body{
            font-family: "Microsoft YaHei UI";
        }
        a{
            text-decoration: none;
        }
        span,em,b,i{
            font-style: normal;
        }
        li{
            list-style: none;
        }
        html,body{
            font-size: 62.5%;
            background: #000;
        }
        .clock{
            width: 700px;height: 700px;margin: 0 auto;position: relative;z-index: 6;padding-top: 50px;
        }
        .second{
            width: 502px;height: 502px;position: absolute;left: 20px;top: 20px;
            border-radius: 100%;
        }
        .second ul{
            width: 500px;height: 500px;position: relative;z-index: 8;
            border-radius: 100%;overflow: hidden;
            background: #293C55;
            /*transform: rotate(6deg);*/
        }
        .second ul li,.minute ul li,.hour ul li{
            height: 60px;position: absolute;z-index: 9;width: 16px;text-align: center;display: table;
            /*background: #273341;*/padding: 0 2px;
            transform-origin: 10px 0;
        }
        .second ul li span,.minute ul li span,.hour ul li span{
            display: table-cell;vertical-align: middle;width: 100%;height: 100%;font-size: 10px;color: #fff;
        }
        .minute{
            width: 380px;height:380px;position: absolute;left: 80px;top: 80px;z-index: 14;border-radius: 100%;
            transform: rotate(6deg);
            background: #273341;
        }
        .hour{
            width: 260px;height:260px;position: absolute;left: 140px;top: 140px;z-index: 14;border-radius: 100%;
            background: #62778d;
        }
        .day{
            width: 140px;height: 140px;position: absolute;left: 200px;top: 200px;z-index: 14;border-radius: 100%;
            background: #293C55;
        }
        .showRod{
            width: 20px;height: 250px;position: absolute;left: 240px;top: 0;z-index: 93;
            background: rgba(255,255,255,0.5);border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;
        
        }
        .needle{
            width: 360px;height: 360px;border-radius: 100%;overflow: hidden;position: absolute;
            top: 70px;left: 70px;z-index: 12;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.rotate.js"></script>
    <script>
        let chnNumChar = ["零","一","二","三","四","五","六","七","八","九"];
let chnUnitSection = ["","万","亿","万亿","亿亿"];
let chnUnitChar = ["","十","百","千"];

function SectionToChinese(section){
    let strIns = '', chnStr = '';
    let unitPos = 0;
    let zero = true;
    while(section > 0){
        let v = section % 10;
        if(v === 0){
            if(!zero){
                zero = true;
                chnStr = chnNumChar[v] + chnStr;
            }
        }else{
            zero = false;
            strIns = chnNumChar[v];
            strIns += chnUnitChar[unitPos];
            chnStr = strIns + chnStr;
        }
        unitPos++;
        section = Math.floor(section / 10);
    }
    return chnStr;
}

function NumberToChinese(num){
    let unitPos = 0;
    let strIns = '', chnStr = '';
    let needZero = false;

    if(num === 0){
        return chnNumChar[0];
    }

    while(num > 0){
        let section = num % 10000;
        if(needZero){
            chnStr = chnNumChar[0] + chnStr;
        }
        strIns = SectionToChinese(section);
        strIns += (section !== 0) ? chnUnitSection[unitPos] : chnUnitSection[0];
        chnStr = strIns + chnStr;
        needZero = (section < 1000) && (section > 0);
        num = Math.floor(num / 10000);
        unitPos++;
    }

    return chnStr;
};
    </script>
    <script>
        let myDate = new Date,
            hours = myDate.getHours(),
            minutes = myDate.getMinutes(),
            seconds = myDate.getSeconds(),
            secondStep = -6 * seconds;
        
        function rotateSecond() {
            setInterval(showDegSecond, 1e3)
        }
        
        function secondHtml() {
            let e = "";
            for (let t = 0; t < 60; t++) e += "<li><span>" + NumberToChinese(t) + "</span></li>";
            $(".second ul").html(e);
            for (let e = 0; e < 60; e++) {
                if ($(".second ul li").eq(e).css("transform", "rotate(&q.........完整代码请登录后点击上方下载按钮下载查看