需要源码 文末公众号回复【时钟】即可获得源码 废话不多说 直接看效果
由于代码过长 所以下文代码展示为部分代码
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样式代码
common.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;
}
demo5.css文件
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;
}