Html makes Douyin net red clock compass [including source code free download]

You need to reply to the [clock] from the public number at the end of the source code text, you can get the source code without talking nonsense and see the effect directly.
Because the code is too long, the following code is shown as part of the code
Please add image description

html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3抖音网红文字时钟特效</title>

<link rel="stylesheet" href="css/commen.css">
<link rel="stylesheet" href="css/demo5.css">

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/rotate.js"></script>
<script src="js/numToChinese.js"></script>
<script src="js/demo5.js"></script>

</head>
<body>
<div class="clock">
    <div class="second">
        <ul></ul>
        <div class="showRod"></div>
        <div class="needle"></div>
    </div>
    <div class="minute">
        <ul></ul>
    </div>
    <div class="hour">
        <ul></ul>
    </div>
    <div class="day"></div>
</div>

<script>
    window.onload = function(){
      
      
        secondHtml();
    }
</script>

</body>
</html>

css style code

common.css file

*{
    
    
    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;
}

demo5.css file

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;
}

js code

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;
}

Guess you like

Origin blog.csdn.net/weixin_45735355/article/details/122539586