ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

罗盘时钟

2021-05-30 23:01:43  阅读：255  来源： 互联网

标签：digit number nth child line 时钟 data 罗盘


小罗盘时钟效果图

代码如下:

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk= 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小罗盘时钟</title>
    <style>
        html{
            background: #000;
            color: #666;
            font-size: 12px;
            overflow:hidden;
        }
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display: block;
            float: left;
        }
        .on{
            color: #fff;
        }
        .wrapper{
            width: 200px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        .wrapper .timebox{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            left:0;
            border-radius: 100%;
            transition: all 0.5s;
        }
        .timebox span{
            transition: all 0.5s;
            float: left;
        }
        .wrapper  .timebox span{
            position: absolute;
            left:50%;
            top:50%;
            width: 40px;
            height: 18px;
            margin-top: -9px;
            margin-left: -20px;
            text-align: right;
        }
        .special{
            width:40px;
            height:40px;
            position:absolute;
            top:50%;
            left:50%;
            margin:-22px 0 0 -22px;
            font-size: 40px;
            color: red;
            border:1px solid #008800;
            border-radius:5px;
            font-family: cursive;
            background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
            -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
            -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
            -webkit-background-size: 200% 100%; 
            -webkit-animation: masked-animation 4s linear infinite;
        }
        @keyframes masked-animation {
            0% {
                background-position: 0  0;
            }
            100% {
                background-position: -100%  0;
            }
        }
 
    </style>
</head>
<body>

<span class="special">果</span>
<div id="wrapper">
    <div class="timebox yuebox" id="yueBox"></div>
    <div class="timebox riqiBox" id="riqiBox"></div>
    <div class="timebox hourbox" id="hourbox"></div>
    <div class="timebox minutebox" id="minutebox"></div>
    <div class="timebox secondbox" id="secondbox"></div>
</div>
 
</body>
<script>
 
    let wrapper = document.getElementById("wrapper");
    let yueBox = document.getElementById("yueBox");
    let riqiBox = document.getElementById("riqiBox");
    let hourbox = document.getElementById("hourbox");
    let minutebox = document.getElementById("minutebox");
    let secondbox = document.getElementById("secondbox");
 
    /*
    * 找所有的东西标签函数
    * */
    let findSiblings = function( tag ){
        let parent = tag.parentNode;
        let childs = parent.children;
        let sb = [];
        for(let i=0 ; i <= childs.length-1 ; i++){
            if( childs[i]!==tag){
                sb[sb.length] = childs[i];
            }
        }
        return  sb ;
    };
 
    /*
    * 去掉所有兄弟的类
    * */
    let removeSiblingClass =function( tag ){
        let sb = findSiblings( tag );
        for(let i=0 ;  i <= sb.length-1 ; i++){
            sb[i].className = "";
        }
    };
 
    /*
    * 初始化月份函数
    * */
    let initMonth = function(){
      for(let i=1; i<=12; i++){
            let span = document.createElement("span");
            span.innerHTML = i+"月";
            yueBox.appendChild( span );
      }
    };
 
    // 初始化日期
    let initDate = function(){
        for(let i=1; i<=31; i++){
            let span = document.createElement("span");
            span.innerHTML = i+"日";
            riqiBox.appendChild( span );
        }
    };
 
    // 初始化小时，分钟，秒
    let initHour = function(){
        for(let i=0; i<=23; i++){
            let h = i ;
            let span = document.createElement("span");
            if( h<10){
                h="0"+h;
            }
            span.innerHTML = h +"点";
            hourbox.appendChild( span );
        }
    };
    let initMinute = function(){
        for(let i=0; i<=59; i++){
            let  f = i ;
            let span = document.createElement("span");
            if( f<10){
                f="0"+f;
            }
            span.innerHTML = f +"分";
            minutebox.appendChild( span );
        }
    };
    let initSecond = function(){
        for(let i=0; i<=59; i++){
            let  miao = i ;
            let span = document.createElement("span");
            if( miao<10){
                miao="0"+miao;
            }
            span.innerHTML = miao +"秒";
            secondbox.appendChild( span );
        }
    };
 
    // 时间文字样式切换函数
    let changeTime = function(tag){
        tag.className = "on";
        removeSiblingClass( tag );
    };
 
    /*
    * 初始化日历函数
    * */
    let initRili = function(){
        initMonth(); // 初始化月份
        initDate(); // 初始化日期
        initHour(); // 小时
        initMinute();
        initSecond();
    };
 
    /*
    * 展示当前时间
    * 参数：mydate 时间对象
    * */
    let  showNow = function( mydate ){
 
        let yue = mydate.getMonth() ;
        let riqi = mydate.getDate();
        let hour = mydate.getHours()  ;
        let minute = mydate.getMinutes();
        let second = mydate.getSeconds();
        // 时间文字样式切换函数
        changeTime( yueBox.children[yue] );
        changeTime( riqiBox.children[riqi-1] );
        changeTime( hourbox.children[hour] );
        changeTime( minutebox.children[minute] );
        changeTime( secondbox.children[second] );
 
    };
 
    // 展示时间圆圈函数
    // tag：目标
    // num：数字数量
    // dis：圆圈半径
    let textRound = function(tag,num,dis){
        let span = tag.children ;
        for(let i=0 ; i<=span.length-1; i++){
            span[i].style.transform="rotate("+ (360/span.length)*i+"deg)  translateX("+dis+"px)" ;
        }
    };
    /*
    * 旋转指定“圆圈”指定度数
    * */
    let rotateTag = function(tag , deg){
        tag.style.transform = "rotate("+deg+"deg)";
    };
 
    let main = function(){
        initRili(); // 初始化日历
 
        setInterval(function(){
            let mydate = new Date();
            showNow( mydate ); // 展示当前时间
        },1000);
 
        //  n秒后，摆出圆形
        setTimeout(function(){
            wrapper.className = "wrapper";
            textRound(yueBox,12,40);
            textRound(riqiBox,31,80);
            textRound(hourbox,24,120);
            textRound(minutebox,60,160);
            textRound(secondbox,60,200);
            setInterval(function(){
                let mydate = new Date();
                rotateTag( yueBox , -30*mydate.getMonth());
                rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );
                rotateTag( hourbox , -360/24*mydate.getHours());
                rotateTag( minutebox , -6*mydate.getMinutes());
                rotateTag( secondbox , -6*mydate.getSeconds());
            },1000)
        },1000)
 
    };
    main();
   
</script>
</html>
View Code

 罗盘时钟效果图

 代码如下:

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk= 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>罗盘时钟</title>
<style>
*{
    margin:0;
    padding:0
}
html,body{
    width:97%;
    height:97%;
    background-color:#000;
    overflow:hidden
}
#clock{
    position:relative;
    width:100%;
    height:100%;
    background:#000
}
.label{
    display:inline-block;
    color:#4d4d4d;
    text-align:center;
    padding:0 5px;
    font-size:19px;
    transition:left 1s,top 1s;
    transform-origin:0% 0%
}
span{
    position: absolute;
    left: 52%;
    top: 50%;
    color: red;
    transform: rotate(-90deg);
    font-size: 49px;
    font-family: cursive;
    background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
    -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
    -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%; 
    -webkit-animation: masked-animation 4s linear infinite;
}
@keyframes masked-animation {
    0% {
        background-position: 0  0;
    }
    100% {
        background-position: -100%  0;
    }
}
 
</style>
 
 
</head>
<body>
 
<div id="clock"><span>果</span></div>

</body>

<script>
var monthText=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"];
var dayText=["零一号","零二号","零三号","零四号","零五号","零六号","零七号","零八号","零九号","十零号","十一号","十二号","十三号","十四号","十五号","十六号","十七号","十八号","十九号","二十号","二十一","二十二","二十三","二十四","二十五","二十六","二十七","二十八","二十九","三十号","三十一"];
var weekText=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var hourText=["零零点","零一点","零两点","零三点","零四点","零五点","零六点","零七点","零八点","零九点","零十点","十一点","十二点","十三点","十四点","十五点","十六点","十七点","十八点","十九点","二十点","二十一","二十二","二十三"];
var minuteText=["零一分","零二分","零三分","零四分","零五分","零六分","零七分","零八分","零九分","零十分","十一分","十二分","十三分","十四分","十五分","十六分","十七分","十八分","十九分","二十分","二十一","二十二","二十三","二十四","二十五","二十六","二十七","二十八","二十九","三十分","三十一","三十二","三十三","三十四","三十五","三十六","三十七","三十八","三十九","四十分","四十一","四十二","四十三","四十四","四十五","四十六","四十七","四十八","四十九","五十分","五十一","五十二","五十三","五十四","五十五","五十六","五十七","五十八","五十九","六十分"];
var secondsText=["零一秒","零二秒","零三秒","零四秒","零五秒","零六秒","零七秒","零八秒","零九秒","零十秒","十一秒","十二秒","十三秒","十四秒","十五秒","十六秒","十七秒","十八秒","十九秒","二十秒","二十一","二十二","二十三","二十四","二十五","二十六","二十七","二十八","二十九","三十秒","三十一","三十二","三十三","三十四","三十五","三十六","三十七","三十八","三十九","四十秒","四十一","四十二","四十三","四十四","四十五","四十六","四十七","四十八","四十九","五十秒","五十一","五十二","五十三","五十四","五十五","五十六","五十七","五十八","五十九","六十秒"];
var clock;var monthList=[];
var dayList=[];
var weekList=[];
var hourList=[];
var minuteList=[];
var secondsList=[];
var isCircle=false;
var textSet=[[monthText,monthList],
[dayText,dayList],
[weekText,weekList],
[hourText,hourList],
[minuteText,minuteList],
[secondsText,secondsList]];
window.onload=function()
{
    init();
    setInterval(function()
    {runTime();
    },100);
    changePosition();
    setTimeout(function()
    {changeCircle();
    },1000);
}
function init()
{clock=document.getElementById('clock');
for(var i=0;
    i<textSet.length;i++)
    {for(var j=0;j<textSet[i][0].length;j++)
        {var temp=createLabel(textSet[i][0][j]);
            clock.appendChild(temp);textSet[i][1].push(temp);
        }
    }
}
function createLabel(text)
{
    var div=document.createElement('div');
div.classList.add('label');
div.innerText=text;return div;
}
function runTime()
{
    var now=new Date();
    var month=now.getMonth();
    var day=now.getDate();
    var week=now.getDay();
    var hour=now.getHours();
    var minute=now.getMinutes();
    var seconds=now.getSeconds();
    initStyle();
    var nowValue=[month,day-1,week,hour,minute,seconds];
    for(var i=0;
        i<nowValue.length;
        i++)
        {var num=nowValue[i];
            textSet[i][1][num].style.color='#fff';
        }
if(isCircle)
{var widthMid=document.body.clientWidth/2;
    var heightMid=document.body.clientHeight/2;
    for(var i=0;
        i<textSet.length;
        i++){for(var j=0;
            j<textSet[i][0].length;
            j++){var r=(i+1)*35+50*i;
                var deg=360/textSet[i][1].length*(j-nowValue[i]);
                var x=r*Math.sin(deg*Math.PI/180)+widthMid;
                var y=heightMid-r*Math.cos(deg*Math.PI/180);
                var temp=textSet[i][1][j];
                temp.style.transform='rotate('+(-90+deg)+'deg)';
                temp.style.left=x+'px';
                temp.style.top=y+'px';
            }
        }
    }
}
function initStyle()
{var label=document.getElementsByClassName('label');
for(var i=0;
    i<label.length;i++)
    {label[i].style.color='#4d4d4d';
}
}
function changePosition()
{
    for(let i=0;i<textSet.length;
        i++)
        {
            for(let j=0;
                j<textSet[i][1].length;
                j++){
                    let tempX=textSet[i][1][j].offsetLeft+"px";
                    let tempY=textSet[i][1][j].offsetTop+"px";
                    setTimeout(function(){
                        textSet[i][1][j].style.position="absolute";
                        textSet[i][1][j].style.left=tempX;textSet[i][1][j].style.top=tempY;
                    },50);
                }
            }
        }
function changeCircle()
{
    isCircle=true;
    clock.style.transform="rotate(90deg)";
}
 
</script>
</html>
View Code

科技感：数字时钟效果图

 代码如下:

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk= 
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<meta name="apple-mobile-web-app-title" content="CodePen">

  <title>数字时钟</title>
  
<style>
html,
body {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}
h1{
  color: #0BFDFD;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
}
.g-number-group{
  position: relative;
}
.g-number-group:last-of-type::after,.g-number-group:last-of-type::before{
  display: none;
}
.g-number-group::before,.g-number-group::after{
  content: '';
  display: block;
  position: absolute;
  transform: translateZ(50px);
  right: 1vw;
  width: 0.5vw;
  height: 0.5vw;
  background: #0BFDFD;
  animation: point 2s linear infinite;
}
.g-number-group::before{
  bottom: 6vw;
}
.g-number-group::after{
  top: 2vw;
}

@keyframes point{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.g-number-group{
  display: inline-block;
}

.g-number-container {
  position: relative;
  margin-top: 10vh;
  text-align: center;
  z-index: 999;
}

.g-number-rotate {
  -webkit-transform: rotateX(20deg) rotateZ(0);
          transform: rotateX(20deg) rotateZ(0);
}

.preserve {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.g-number {
  position: relative;
  width: 3vw;
  height: 12vw;
  display: inline-block;
  margin: 3vw 3vw 0 0;
}
.g-number .g-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 3vw;
  height: 2px;
  background: #181919;
  /* background: #f00; */
}

.g-number .g-line:nth-child(1) {
  transform: translateY(-0.2vw);
}
.g-number .g-line:nth-child(2) {
  top: 3.2vw;
}

.g-number .g-line:nth-child(3) {
  transform: rotate(180deg) translateY(-0.2vw);
  top: 6.4vw;
}
.g-number .g-line:nth-child(4){
  transform: rotate(90deg) translateY(0.2vw);
  transform-origin: 0 center;
}
.g-number .g-line:nth-child(5) {
  transform: rotate(-90deg) translateY(0.2vw);
  transform-origin: 100% center;
}
.g-number .g-line:nth-child(6) {
  top: 3.4vw;
  transform: rotate(90deg) translateY(0.2vw);
  transform-origin: 0 center;
}
.g-number .g-line:nth-child(7) {
  top: 3.4vw;
  transform: rotate(-90deg) translateY(0.2vw);
  transform-origin: 100% center;
}
.g-number .g-line::before,
.g-number .g-line::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #34eabc;
  box-shadow: 0 0 1vw #111414, inset 0 0 0.125vmin #0BFDFD;
}
.g-number .g-line::before {
  left: 0;
  right: 50%;
  -webkit-transition: all .5s ease-in;
  transition: all .5s ease-in;
}
.g-number .g-line::after {
  left: 50%;
  right: 0;
  transition: all .5s ease-out;
}

.g-number .translate::before, .g-number .translate::after {
    transform: translateZ(50px);
}

.g-comma {
  position: relative;
  top: -5.4vw;
  display: inline-block;
  width: 1vw;
  height: 1vw;
  background: #181919;
  margin: 3vw 3vw 0 -0.8vw;
}
.g-comma::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #34eabc;
  -webkit-transform: translateZ(50px);
          transform: translateZ(50px);
}
.g-comma::after {
  content: "";
  position: absolute;
  bottom: -.8vw;
  right: .3vw;
  border: .2vw solid transparent;
  border-top: 0.9vw solid #34eabc;
  -webkit-transform: translateZ(50px) rotate(40deg);
          transform: translateZ(50px) rotate(40deg);
}

.g-number[data-digit="1"] .g-line:nth-child(1)::before, 
.g-number[data-digit="1"] .g-line:nth-child(1)::after,
.g-number[data-digit="1"] .g-line:nth-child(2)::before,
.g-number[data-digit="1"] .g-line:nth-child(2)::after,
.g-number[data-digit="1"] .g-line:nth-child(3)::before,
.g-number[data-digit="1"] .g-line:nth-child(3)::after,
.g-number[data-digit="1"] .g-line:nth-child(4)::before,
.g-number[data-digit="1"] .g-line:nth-child(4)::after,
.g-number[data-digit="1"] .g-line:nth-child(6)::before,
.g-number[data-digit="1"] .g-line:nth-child(6)::after,

.g-number[data-digit="2"] .g-line:nth-child(4)::before,
.g-number[data-digit="2"] .g-line:nth-child(4)::after,
.g-number[data-digit="2"] .g-line:nth-child(7)::before,
.g-number[data-digit="2"] .g-line:nth-child(7)::after,

.g-number[data-digit="3"] .g-line:nth-child(4)::before,
.g-number[data-digit="3"] .g-line:nth-child(4)::after,
.g-number[data-digit="3"] .g-line:nth-child(6)::before,
.g-number[data-digit="3"] .g-line:nth-child(6)::after,

.g-number[data-digit="4"] .g-line:nth-child(1)::before,
.g-number[data-digit="4"] .g-line:nth-child(1)::after,
.g-number[data-digit="4"] .g-line:nth-child(3)::before,
.g-number[data-digit="4"] .g-line:nth-child(3)::after,
.g-number[data-digit="4"] .g-line:nth-child(6)::before,
.g-number[data-digit="4"] .g-line:nth-child(6)::after,

.g-number[data-digit="5"] .g-line:nth-child(5)::before,
.g-number[data-digit="5"] .g-line:nth-child(5)::after,
.g-number[data-digit="5"] .g-line:nth-child(6)::before,
.g-number[data-digit="5"] .g-line:nth-child(6)::after,

.g-number[data-digit="6"] .g-line:nth-child(5)::before,
.g-number[data-digit="6"] .g-line:nth-child(5)::after,

.g-number[data-digit="7"] .g-line:nth-child(2)::before,
.g-number[data-digit="7"] .g-line:nth-child(2)::after,
.g-number[data-digit="7"] .g-line:nth-child(3)::before,
.g-number[data-digit="7"] .g-line:nth-child(3)::after,
.g-number[data-digit="7"] .g-line:nth-child(4)::before,
.g-number[data-digit="7"] .g-line:nth-child(4)::after,
.g-number[data-digit="7"] .g-line:nth-child(6)::before,
.g-number[data-digit="7"] .g-line:nth-child(6)::after,

.g-number[data-digit="9"] .g-line:nth-child(6)::before,
.g-number[data-digit="9"] .g-line:nth-child(6)::after,
.g-number[data-digit="0"] .g-line:nth-child(2)::before,
.g-number[data-digit="0"] .g-line:nth-child(2)::after {
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
  background: #3c4444;
  box-shadow: 0 0 1vw #425454;
}

</style>

</head>

<body translate="no" >
  <h1>
    科技感: 数字时钟
  </h1>
  <div class="g-number-container preserve">
    <div class="g-number-rotate preserve">
      <div class="g-number-group" >
          <div class="g-number preserve" data-digit="1">
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
          </div>
          <div class="g-number preserve" data-digit="3">
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
            <div class="g-line preserve translate"></div>
          </div>
      </div>
      <div class="g-number-group">
        
        <div class="g-number preserve" data-digit="5">
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
        </div>
        <div class="g-number preserve" data-digit="8">
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
        </div>
      </div>
      <div class="g-number-group" >
        <div class="g-number preserve" data-digit="0">
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
        </div>
        <div class="g-number preserve" data-digit="5">
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
          <div class="g-line preserve translate"></div>
        </div>
      </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var formatNumber = function(num) {
    return (num < 10 ? '0' + num : num) + ''
  }
  $(function() {
    var emls = $('.g-number')
    var draw = function() {
      var time = new Date()

      time = formatNumber(time.getHours()) + formatNumber(time.getMinutes()) + formatNumber(time.getSeconds())
      for (var i = 0; i < emls.length; i++) {
        $(emls[i]).attr('data-digit', time[i])
      }
    }
    setInterval(() => {
      draw()
    }, 1000);
    $('h1').click(function() {
     
    })
  })
</script>
</body>

</html>
View Code

标签：digit,number,nth,child,line,时钟,data,罗盘
来源： https://blog.51cto.com/u_15222067/2834385

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有