FOCUS ON US

点击蓝字.关注我们

前言：最近很多朋友私信我说，想要自己学点前端知识，至少是前端三件套。HTML、CSS还好，但是JavaScript老是记不住，所以我给大家带来了一些有趣的特效、案例、简单小游戏，无需环境配置就能轻松运行的前端代码。帮助大家在娱乐中体验编程乐趣，同时提高技术能力。后面我将每周更新1-2篇，同时会附上完整代码文件链接。需要的伙伴可以持续关注博主的新合集——《前端特效》

话不多说上干货

直接看效果由于代码过长所以下文代码展示为部分代码 需要完整源码在文末获取

HTML代码

<!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代码

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

JS代码

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

ITPub博客

特效合集-炫酷罗盘时钟

七夕情人节表白代码合集

爱心代码大全---含十余款特效源码

纯HTML制作打地鼠小游戏

HTML+CSS做一个时尚柿子造型计时器

HTML+CSS做一个冰立方体时钟

最新文章