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

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

代码语言：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 = chnNum.........完整代码请登录后点击上方下载按钮下载查看