精华内容
下载资源
问答
  • html5罗盘时钟.zip

    2020-01-14 15:01:42
    html5 时钟显示模板,直接显示当前的时间,还能按照秒自动加时,动画效果也随着时间的变化而变化。动画指向也为当前的时间,罗盘显示,贼帅罗盘时钟
  • 罗盘时钟HTML源码下载

    2019-07-09 14:29:31
    罗盘时钟
  • 罗盘时钟.html

    2019-07-24 01:45:28
    原生js制作一款在抖音上很火的文字罗盘布局时钟代码。带月份、星期、时分秒圆盘时钟,酷炫效果,
  • 本资源包含一个“罗盘时钟”的全部源代码和所有源文件,需要的朋友可以下载哦!!!!!!!!!!!!!!!!!!!!!11
  • 时钟罗盘HTML时钟罗盘代码,老师发的学习案例)
  • 这是“罗盘时钟”星空版的全部源代码,具体效果我在博客中已经展示了,还不错,可以根据背景,自己随便再去修改哈!需要的朋友可以下载!!!
  • 偶然在抖音上看到一个时钟特效!感觉挺好玩的!就自己做了一个罗盘时钟、八卦时钟、炫酷时钟,欢迎大家下载互相探讨!
  • 2021抖音潮流罗盘时钟代码
  • 本资源包含一个前端界面,是一个罗盘样式的时钟,包含所有源代码,需要的朋友可以下载哦!
  • 电脑壁纸时钟(带时钟特效、背景特效),需要的朋友可以下载体验一般,不会操作的朋友可以加我QQ:64814219(注:需说明来意,否则不通过)
  • CSS+JS+HTML实现罗盘时钟(附完整代码

    千次阅读 多人点赞 2021-06-11 00:09:17
    CSS+JS+HTML实现罗盘时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...

    CSS+JS+HTML实现罗盘时钟

    代码以及效果如下:

    <!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>
    body{
      background-image: url(./img/29.jpg);
      background-size: cover;
    }
    #clock {
      background-color: #333;
      margin-top: 300px;
    }
    .label{
        display:inline-block;
        text-align: center;
        font-size:10px;
        transition:left 1s,top 1s;
        transform-origin: 0 0;
        width: 50px;
    }
    .out{
      width: 100px;
      height: 400px;
      line-height: 100px;
      background-image: url(./img/preview.jpg);
      background-size: contain;
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text; 
      font-size: 100px;
      position: absolute;
      top: 50%;
      transform: translate(-10%,-50%);
    }
        </style>
    </head>
     
    <body>
    <div id="clock"></div>
    <div class="out">
      當前時間
    </div>
    </body>
     <script>
    let weekText = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
    // 使用循环生成月日时分秒
    let monthText = [];
      for(let i=0;i<12;i++){
        if(i<9){
          let j=i+1
          monthText[i]='0'+j+'月';
        }else{
          monthText[i]=i+1+'月';
        }
      }
    let dayText = [];
      for(let i=0;i<31;i++){
        if(i<9){
          let j=i+1
          dayText[i]='0'+j+'号';
        }else{
          dayText[i]=i+1+'号';
        }
      }
    let hourText = [];
      for(let i=0;i<24;i++){
        if(i<10){
          hourText[i]='0'+i+'点';
        }else{
          hourText[i]=i+'点';
        }
      }
    let minuteText = [];
      for(let i=0;i<60;i++){
        if(i<10){
          minuteText[i]='0'+i+'分';
        }else{
          minuteText[i]=i+'分';
        }
      }
    let secondText = [];
      for(let i=0;i<60;i++){
        if(i<9){
          let j=i+1
          secondText[i]='0'+j+'s';
        }else{
          secondText[i]=i+1+'s';
        }
      }
    
      // 存放dom元素的数组
    let monthList = [];
    let dayList = [];
    let weekList = [];
    let hourList = [];
    let minuteList = [];
    let secondList = [];
     
    //二维数组 存放文字内容及页面显示标签
    let timeTextSet = [
        [monthText, monthList],
        [dayText, dayList],
        [weekText, weekList],
        [hourText, hourList],
        [minuteText, minuteList],
        [secondText, secondList]
    ];
    console.log(timeTextSet);
    // 判断是否为旋转页面
    let isRotating = false;
    //时钟页面
    let clock;
    window.onload = function () {
        init();
        // 每隔100ms获得 当前时间
        setInterval(function () {
            runTime();
        }, 100);
     
        // 旋转之前定位到当前时间
        locateCurrent();
        // 变成旋转样式
        setTimeout(function () {
            toRotate();
        }, 100);
    }
    // 初始化函数
    function init() {
        clock = document.getElementById('clock');
        // 生成标签 存放文字展示
        for (let i = 0; i < timeTextSet.length; i++) {
            for (let j = 0; j < timeTextSet[i][0].length; j++) {
                let temp = createLabel(timeTextSet[i][0][j]);
                clock.appendChild(temp);
                // 将生成的标签存放在数组list中
                timeTextSet[i][1].push(temp);
            }
        }
    }
     
    // 创建标签并将文字填充标签内 接收参数为文字内容
    function createLabel(text) {
        let div = document.createElement('div');
        div.classList.add('label');
        div.innerText = text;
        return div;
    }
     
    function runTime() {
        //当前时间获取
        let now = new Date();
        let month = now.getMonth();
        let day = now.getDate();
        let week = now.getDay();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let seconds = now.getSeconds();
     
        // 初始化时间颜色 并将走过的时间设置为黄色
        initStyle();
     
        // 将当前时间月份存放在数组中
        let nowValue = [month, day - 1, week, hour, minute, seconds];
        for (let i = 0; i < nowValue.length; i++) {
            let num = nowValue[i];
            timeTextSet[i][1][num].style.color = 'rgb(255, 0, 191)';
            timeTextSet[i][1][num].style.width = '65px';
            timeTextSet[i][1][num].style.borderBottom = '1px solid rgb(255, 0, 255)';
        }
     
        // 变成旋转时钟
        if (isRotating) {
            // 圆心位置确定
            let widthMid = document.body.clientWidth / 2
            let heightMid = document.body.clientHeight/2
            // 将每一个dom元素确定到圆的位置
            for (let i = 0; i < timeTextSet.length; i++) {
                for (let j = 0; j < timeTextSet[i][0].length; j++) {
                    // 计算出每一个元素的位置  x y 坐标,圆的半径与时分秒的位置有关
                    let r = (i + 1) * 35 + 30 * i;
                    // 计算每一个平均的角度  将每一个单位对齐,再转化成弧度
                    let deg = 360 / timeTextSet[i][1].length * (j - nowValue[i]) ;
                    // 计算dom元素的坐标
                    let x = r * Math.sin(deg * Math.PI / 180) + widthMid;
                    let y = heightMid - r*Math.cos(deg * Math.PI / 180);
                    // 样式
                    let temp =  timeTextSet[i][1][j];
                    temp.style.transform = 'rotate(' + (-90 + deg ) + 'deg)';
                    temp.style.left = x + 'px';
                    temp.style.top = y + 'px';
                }
            }
        }
    }
     
    // 将所有标签置为灰色
    function initStyle() {
        let label = document.getElementsByClassName('label');
        for (let i = 0; i < label.length; i++) {
            label[i].style.color = 'rgb(251, 255, 0)';
            label[i].style.borderBottom = 'none';
            label[i].style.width = '30px';
            label[i].style.background = 'none';
        }
    }
     
    function locateCurrent() {
        for (let i = 0; i < timeTextSet.length; i++) {
            for (let j = 0; j < timeTextSet[i][1].length; j++) {
                // 获取原来的位置  再修改position 设置left top
                let tempX = timeTextSet[i][1][j].offsetLeft + "px";
                let tempY = timeTextSet[i][1][j].offsetTop + "px";
                // console.log(timeTextSet[i][1][j]);
                // 利用let 防止闭包
                setTimeout(function () {
                    timeTextSet[i][1][j].style.position = "absolute";
                    timeTextSet[i][1][j].style.left = tempX;
                    timeTextSet[i][1][j].style.top = tempY;
                }, 50);
            }
        }
    }
     
    function toRotate() {
        isRotating = true;
        clock.style.transform = "rotate(90deg)";
    }
    var out=document.querySelector('.out')
      out.onclick=function(){
        window.open('vitaminMain.html');
      }
     </script>
    </html>

    这是我的背景图片:记得将style里面的.out的background-image的src改成这个图片路径

    展开全文
  • 抖音时钟原生JS文字钟源码由目前市面上比较给力的抖音数字罗盘源码,精致简洁的外观搭配创意的罗盘效果,用户可以自由挑选数字罗盘特效,这里整合了目前比较创新的特效玩法,设计感十足,小伙伴们可以前来本站,根据...
  • 抖音最火罗盘时钟源码
  • 代码 罗盘效果.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...js罗盘时钟

    代码

    罗盘效果.html

    <!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>js罗盘时钟</title>
     
    <link rel="stylesheet" href="demo.css" >
     
    </head>
    <body> 
    <div id="clock"></div>
    <script src="demo.js"></script>
    </body>
    </html>
    

    demo.css

    *{
     margin:0;
     padding:0
    }
    html,body{
     width:100%;
     height:100%;
     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%
    }
    

    demo.js

    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.οnlοad=function()
    {
     init();
     setInterval(function()
     {runTime();
     },100);
     changePosition();
     setTimeout(function()
     {changeCircle();
     },2000);
    }
    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)";
    }
    

    效果演示

    在这里插入图片描述

    展开全文
  • 用前端代码编写一个动态的罗盘时钟前言一、代码如下1.index2.js3.css页面效果 前言 今天给大家分享一个罗盘时钟的前端代码,喜欢的小伙伴帮忙点赞一下噢! 一、代码如下 1.index <!DOCTYPE html> <html ...

    用前端代码编写一个动态的罗盘时钟


    前言

    今天给大家分享一个罗盘时钟的前端代码,喜欢的小伙伴帮忙点赞一下噢!


    一、代码如下

    1.index

    <!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" />
    
        <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <link rel="stylesheet" href="css/luopan1.css" />
        <link rel="stylesheet" href="css/luopan2.css" />
        <link rel="stylesheet" href="css/luopan3.css" />
        <title>罗盘时钟</title>
    </head>
    <style></style>
    
    <body>
    <div id="sum">
    
        <div id="message">
            <ul>
                <li class="msgs" v-for="(item,index) in Arrays">{{item}}</li>
            </ul>
        </div>
    
        <li id="shade"></li>
    
        <div id="second">
            <ul>
                <li v-for="item in flag">
                    {{item}} </li>
            </ul>
        </div>
    
        <div id="minute">
            <ul>
                <li v-for="item in flag_minute">
                    {{item}} </li>
            </ul>
        </div>
    
        <div id="hour">
            <ul>
                <li v-for="item in flag_hour">
                    {{item}} </li>
            </ul>
        </div>
    
        <div id="year">
            <ul>
                <li id="yearAll">天祈</li>
            </ul>
        </div>
    
        <div id="mouth">
            <ul>
                <li v-for="item in flag_mouth">
                    {{item.name}} </li>
            </ul>
        </div>
    
        <div id="solar">
            <ul>
                <li v-for="(item,index) in flag_solar" :key="index" v-on:mouseover="showMsg(index)" v-on:mouseout="hideMsg()" class="mm">
                    {{item.name}} </li>
            </ul>
        </div>
    
        <div id="data">
            <ul>
                <li v-for="item in flag_data">
                    {{item.name}} </li>
            </ul>
        </div>
    
        <div id="AP">
            <ul>
                <li v-for="item in flag_AP">
                    {{item.name}} </li>
            </ul>
        </div>
    </div>
    </body>
    <script src="https://www.jq22.com/jquery/vue.min.js"></script>
    <script src="js/luopan.js"></script>
    </html>
    
    

    2.js

    luopan.js

    const vm = new Vue({
        el: '#sum',
        data() {
            return {
                flag: ['零秒', '一秒', '二秒', '三秒', '四秒', '五秒', '六秒', '七秒', '八秒', '九秒', '十秒', '十一秒', '十二秒', '十三秒', '十四秒', '十五秒', '十六秒', '十七秒', '十八秒', '十九秒', '二十秒', '二十一秒', '二十二秒', '二十三秒', '二十四秒', '二十五秒', '二十六秒', '二十七秒', '二十八秒', '二十九秒', '三十秒', '三十一秒', '三十二秒', '三十三秒', '三十四秒', '三十五秒', '三十六秒', '三十七秒', '三十八秒', '三十九秒', '四十秒', '四十一秒', '四十二秒', '四十三秒', '四十四秒', '四十五秒', '四十六秒', '四十七秒', '四十八秒', '四十九秒', '五十秒', '五十一秒', '五十二秒', '五十三秒', '五十四秒', '五十五秒', '五十六秒', '五十七秒', '五十八秒', '五十九秒'],
                flag_minute: ['零分', '一分', '二分', '三分', '四分', '五分', '六分', '七分', '八分', '九分', '十分', '十一分', '十二分', '十三分', '十四分', '十五分', '十六分', '十七分', '十八分', '十九分', '二十分', '二十一分', '二十二分', '二十三分', '二十四分', '二十五分', '二十六分', '二十七分', '二十八分', '二十九分', '三十分', '三十一分', '三十二分', '三十三分', '三十四分', '三十五分', '三十六分', '三十七分', '三十八分', '三十九分', '四十分', '四十一分', '四十二分', '四十三分', '四十四分', '四十五分', '四十六分', '四十七分', '四十八分', '四十九分', '五十分', '五十一分', '五十二分', '五十三分', '五十四分', '五十五分', '五十六分', '五十七分', '五十八分', '五十九分'],
                flag_hour: ['十二时', '一时', '二时', '三时', '四时', '五时', '六时', '七时', '八时', '九时', '十时', '十一时'],
                flag_mouth: [{
                    name: '一月',
                    flag: false
                }, {
                    name: '二月',
                    flag: false
                }, {
                    name: '三月',
                    flag: false
                }, {
                    name: '四月',
                    flag: false
                }, {
                    name: '五月',
                    flag: false
                }, {
                    name: '六月',
                    flag: false
                }, {
                    name: '七月',
                    flag: false
                }, {
                    name: '八月',
                    flag: false
                }, {
                    name: '九月',
                    flag: false
                }, {
                    name: '十月',
                    flag: false
                }, {
                    name: '十一月',
                    flag: false
                }, {
                    name: '十二月',
                    flag: false
                }],
                flag_solar: [{
                    name: '立春',
                    flag: false,
                    msg: '公历2月03-05日交节立春,二十四节气之首,是春季的第一个节气。立春,意味着新的一个轮回已开启,乃万物起始、一切更生之义也。立,是“开始”之意;春,代表着温暖、生长。立春后阳气开始上升,日照增加,风和日暖,意味着万物闭藏的冬季已过去,开始进入生长的季节,万物至此渐次复苏.'
                }, {
                    name: '雨水',
                    flag: false,
                    msg: '公历2月18-20日交节雨水节气标示着降雨开始,雨量渐增。雨雨水和谷雨、小满、小雪、大雪等节气一样,都是反映降水现象的节气,是古代农耕文化对于节令的反映。进入雨水节气,我国北方阴寒未尽,一些地方仍下雪,尚未入春,仍是很冷;南方大多数地方则是春意盎然,一幅早春的景象。'
                }, {
                    name: '惊蛰',
                    flag: false,
                    msg: '公历3月05-07日交节惊蛰的意思是天气回暖,春雷始鸣,惊醒蛰伏于地下冬眠的昆虫。“惊蛰”标志着仲春卯月的开始。作为全年气温回升最快的节气,我国北方大部分地区平均气温已升至0℃以上。南方沿江江南地区为8℃以上,而西南和华南已达10至15℃以上,早已是一派融融春光了,日照时数也有了明显的增加。'
                }, {
                    name: '春分',
                    flag: false,
                    msg: '公历3月20-22日交节春分时,太阳直射点在赤道上,此后太阳直射点继续北移,故春分也称“升分”。古时又称为“日中”、“日夜分”、“仲春之月”。南北半球昼夜平分,这天以后太阳直射位置继续由赤道向北半球推移,北半球开始昼长夜短。春分的意义,一是指一天时间白天黑夜平分,各为12小时;二是古时以立春至立夏为春季,春分正当春季三个月之中,平分了春季。'
                }, {
                    name: '清明',
                    flag: false,
                    msg: '公历4月04-06日交节“清明”的含义是气候暖和,草木萌动,杏桃开花,处处给人以清新明朗、欣欣向荣的感觉。此时气候清爽温暖,万物“吐故纳新”,草木始发新枝芽,万物开始生长,大地呈现春和景明之象。'
                }, {
                    name: '谷雨',
                    flag: false,
                    msg: '公历4月19-21日交节谷雨,是春季最后一个节气,顾名思义也就是播谷降雨的意思。在谷雨时节雨水会增多,大大有利于谷类农作物的生长。由于雨谷雨,这时田中的秧苗初插、作物新种,最需要雨水的滋润,所以说“春雨贵如油”。'
                }, {
                    name: '立夏',
                    flag: false,
                    msg: '公历5月05-07日交节夏季的第一个节气,表示盛夏时节的正式开始。万物至此皆长大,故名立夏也。从此进入夏天,万物生长旺盛。习惯上把立夏当作是气温显著升高,炎暑将临,雷雨增多,农作物进入旺季生长的一个最重要节气。'
                }, {
                    name: '小满',
                    flag: false,
                    msg: '公历5月20-22日交节“小满”节气,天气渐渐由暖变热,并且降水也会逐渐增多,小满节气意味着进入了大幅降水的雨季,雨水开始增多,往往会出现持续大范围的强降水。进入小满节气后,我国南方地区一般会降雨多、雨量大;北方,小满节气期间降雨很少,气温上升很快,与南方的温差进一步缩小。'
                }, {
                    name: '芒种',
                    flag: false,
                    msg: '公历6月21-22日交节芒种,谐音“忙种”,芒种的“种”字,是指谷黍类作物播种的节令。“芒种”到来预示着农民开始了忙碌的田间生活。气候特点:节雨量充沛,气温显著升高。农事:作物栽培。'
                }, {
                    name: '夏至',
                    flag: false,
                    msg: '公历6月21-22日交节夏至这天,太阳直射地面的位置到达一年的最北端,几乎直射北回归线,此时,北半球各地的白昼时间达到全年最长。夏至是太阳的转折点,这天过后它将走“回头路”,阳光直射点开始从北回归线向南移动,北半球白昼将会逐日减短。同时,夏至到来后,夜空星象也逐渐变成夏季星空。'
                }, {
                    name: '小暑',
                    flag: false,
                    msg: '公历7月06-08日交节小暑,是夏季的第五个节气,表示盛夏正式开始。暑,表示炎热的意思,小暑为小热,还不十分热。意指天气开始炎热,但还没到最热。此时,已是初伏前后。各地也进入雷暴最多的季节,常伴随着大风、暴雨。'
                }, {
                    name: '大暑',
                    flag: false,
                    msg: '公历7月22-24日交节大暑是一年中最热的节气,这时正值中伏前后,"湿热交蒸"在此时到达顶点。在我国很多地区,经常会出现摄氏40度的高温天气。大暑期间为一年最热时期,也是喜热作物生长速度最快的时期。这个时期气温最高,农作物生长最快,同时,很多地区的旱、涝、风灾等各种气象灾害也最为频繁。'
                }, {
                    name: '立秋',
                    flag: false,
                    msg: '公历8月07-09日交节进入秋季,意味着降雨、风暴、湿度等,处于一年中的转折点,趋于下降或减少;在自然界,万物开始从繁茂成长趋向萧索成熟。立秋并不代表酷热天气就此结束,初秋期间天气仍然很热。按照“三伏”的推算方法,“立秋”这天往往还处在中伏期间,也就是说,酷暑并没有过完,真正凉爽一般要到白露节气之后。酷热与凉爽的分水岭并不是在立秋节气。'
                }, {
                    name: '处暑',
                    flag: false,
                    msg: '公历8月22-24日交节“处”是终止的意思,处暑是表示炎热的酷暑结束,这时三伏已过或近尾声。由于受短期回热天气影响,处暑过后仍有持续高温,会感到闷热,天气由炎热向闷热转变。处暑节气处在短期回热天气期内,真正凉爽一般要到白露前后。'
                }, {
                    name: '白露',
                    flag: false,
                    msg: '公历9月07-09日交节白露是一个反映自然界气温变化的重要节令。古人以四时配五行,秋属金,金色白,故以白形容秋露。白露前后,夏日残留的暑气逐渐消失,天地的阴气上升扩散,天气渐渐转凉。白露节气基本结束了暑天的闷热,是秋季由闷热转向凉爽的转折点。 白露过后,天高云淡、气爽风凉。'
                }, {
                    name: '秋分',
                    flag: false,
                    msg: '公历9月22-24日交节秋分这一天同春分一样,阳光几乎直射赤道,昼夜几乎相等。从这一天起,阳光直射位置继续由赤道向南半球推移,北半球开始昼短夜长,南半球相反。秋分时节,我国大部分地区已经进入凉爽的秋季。'
                }, {
                    name: '寒露',
                    flag: false,
                    msg: '公历10月08-09交节寒露是一个反映气候变化特征的节气,寒露节气后,昼渐短,夜渐长,日照减少,热气慢慢退去,寒气渐生,昼夜的温差较大,晨晚略感丝丝寒意。古人将寒露作为寒气渐生的表征。从气候特点上看,寒露时节,南方秋意渐浓,气爽风凉,少雨干燥;北方广大地区已从深秋进入或即将进入冬季。'
                }, {
                    name: '霜降',
                    flag: false,
                    msg: '公历10月23-24交节霜降是秋季的最后一个节气,是秋季到冬季的过渡。霜降节气特点是早晚天气较冷、中午则比较热,昼夜温差大,秋燥明显。由于“霜”是天冷、昼夜温差变化大的表现,故以“霜降”命名这个表示“气温骤降、昼夜温差大”的节令。霜降时节,万物毕成,毕入于戌,阳下入地,阴气始凝。霜降过后,植物渐渐失去生机,大地一片萧索,气温骤降、昼夜温差大。霜降节气后,深秋景象明显,冷空气南下越来越频繁。'
                }, {
                    name: '立冬',
                    flag: false,
                    msg: '公历11月07-8日交节立冬是季节类节气,表示自此进入了冬季,意味着风雨、干湿、光照、气温等,处于转折点上,开始从秋季向冬季气候过渡。“秋收冬藏”,万物在冬季闭藏,冬季是享受丰收、休养生息的季节。白昼时间缩短,北半球获得太阳的辐射量越来越少,但由于此时地表在下半年贮存的热量还有一定的能量,所以还不很冷。'
                }, {
                    name: '小雪',
                    flag: false,
                    msg: '公历11月22-23交节小雪和大雪、雨水、谷雨、小满等节气一样,都是直接反映降水的节气。小雪节气是一个气候概念,它代表的是小雪节小雪节气是寒潮和强冷空气活动频数较高的节气。'
                }, {
                    name: '大雪',
                    flag: false,
                    msg: '公历12月6-08日交节大雪是直接反映降水的节气。节气大雪的到来,意味着天气会越来越冷,降水量渐渐增多。大雪节气最常见的就是降温、下雨或下雪。大雪节气是一个气候概念,它代表的是大雪节气期间的气候特征,即气温与降水量。'
                }, {
                    name: '冬至',
                    flag: false,
                    msg: '公历12月21-23交节冬至标示着北半球的太阳高度最小,白昼时间最短,但是冬至日的温度不是最低。冬至日是北半球各地一年中白昼最短的一天,并且越往北白昼越短。而冬至以后,阳光直射位置逐渐向北移动,北半球的白天就逐渐变长了。天文学上把立冬作为冬季的开始,冬至作为寒冷气候的开始。冬至之前通常不会很冷,冬季的真正寒天是在冬至之后。'
                }, {
                    name: '小寒',
                    flag: false,
                    msg: '公历1月05-07日交节小寒,标志着寒冬正式开始。冷气积久而寒,小寒是天气寒冷但还没有到极点的意思。它与大寒、小暑、大暑及处暑一样,都是表示气温冷暖变化的节气。小寒的天气特点是:天渐寒,尚未大冷。俗话有讲:“冷在三九”,由于隆冬“三九”也基本上处于该节气之内,因此有“小寒胜大寒”之讲法。'
                }, {
                    name: '大寒',
                    flag: false,
                    msg: '公历1月20-21日交节大寒同小寒一样,也是表示天气寒冷程度的节气。在我国部分地区,大寒不如小寒冷,但在某些年份和沿海少数地方,全年最低汽温仍然会出在大寒节气内。小寒、大寒是一年中雨水最少的时段。大寒以后,立春接着到来,天气渐暖。至此地球绕太阳公转了一周,完成了一个循环。'
                }],
                Arrays: [],
                flag_data: [{
                    name: '一号',
                    flag: false
                }, {
                    name: ' 二号',
                    flag: false
                }, {
                    name: '三号',
                    flag: false
                }, {
                    name: ' 四号',
                    flag: false
                }, {
                    name: '五号',
                    flag: false
                }, {
                    name: '六号',
                    flag: false
                }, {
                    name: '七号',
                    flag: false
                }, {
                    name: '八号',
                    flag: false
                }, {
                    name: '九号',
                    flag: false
                }, {
                    name: ' 十号',
                    flag: false
                }, {
                    name: '十一号',
                    flag: false
                }, {
                    name: '  十二号',
                    flag: false
                }, {
                    name: '   十三号',
                    flag: false
                }, {
                    name: '    十四号',
                    flag: false
                }, {
                    name: '   十五号',
                    flag: false
                }, {
                    name: ' 十六号',
                    flag: false
                }, {
                    name: '  十七号',
                    flag: false
                }, {
                    name: '   十八号',
                    flag: false
                }, {
                    name: '    十九号',
                    flag: false
                }, {
                    name: '     二十号',
                    flag: false
                }, {
                    name: '二十一号',
                    flag: false
                }, {
                    name: ' 二十二号',
                    flag: false
                }, {
                    name: '  二十三号',
                    flag: false
                }, {
                    name: '   二十四号',
                    flag: false
                }, {
                    name: '二十五号',
                    flag: false
                }, {
                    name: ' 二十六号',
                    flag: false
                }, {
                    name: ' 二十七号',
                    flag: false
                }, {
                    name: '  二十八号',
                    flag: false
                }, {
                    name: '   二十九号 ',
                    flag: false
                }, {
                    name: '   三十号 ',
                    flag: false
                }, {
                    name: '   三十一号 ',
                    flag: false
                }],
                flag_AP: [{
                    name: '上午'
                }, {
                    name: '下午'
                }],
                NllNumber: []
            }
        },
        methods: {
            showMsg: function(index) {
                var this_ = this
                var sum = this_.flag_solar
                var a = 0
                var b = 12
                var newObject
                var strings = sum[index].msg
                var arrayy = strings.split('')
                var length = arrayy.length
                var arrayOne
                var stringOne = ''
                for (var i = 0; i < 10; i++) {
                    arrayOne = arrayy.slice(a, b)
                    if (arrayOne.length !== 0) {
                        stringOne = arrayOne.join()
                        newObject = stringOne.replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '')
                        this.Arrays.push(newObject)
                    }
                    if (i === 0) {
                        a += 12
                        b += 20
                    } else {
                        a += 20
                        b += 20
                    }
                }
            },
            hideMsg: function() {
                this.Arrays = []
                this.NllNumber = []
            }
        }
    })
    var number = 0
    
    function sell() {
        var data = new Date()
        var second = data.getSeconds() + 1
        number = second * -6
        document.getElementById('second').setAttribute('style', '-webkit-transform:rotate' + '(' + number + 'deg)')
        var myVar = setInterval(function() {
            sell_one()
        }, 1000)
    }
    
    function sell_one() {
        document.getElementById('second').setAttribute('style', '-webkit-transform:rotate' + '(' + number + 'deg)')
        number += -6
    }
    sell()
    var number_minute = 0
    
    function minutes() {
        var myVar = setInterval(function() {
            sell_two()
        }, 1000)
    }
    
    function sell_two() {
        var data = new Date()
        var minute = data.getMinutes()
        number_minute = minute * -6
        document.getElementById('minute').style.webkitTransform = 'rotate' + '(' + number_minute + 'deg)'
    }
    minutes()
    var number_hour = 0
    
    function hours() {
        var myVar = setInterval(function() {
            sell_three()
        }, 1000)
    }
    
    function sell_three() {
        var data = new Date()
        var hour = data.getHours()
        number_hour = hour * -30
        document.getElementById('hour').style.webkitTransform = 'rotate' + '(' + number_hour + 'deg)'
    }
    hours()
    
    function year() {
        var data = new Date()
        var year = data.getFullYear()
        document.getElementById('yearAll').innerHTML = year + '年'
    }
    year()
    
    function solarAndMouth() {
        var data = new Date()
        var mouth = data.getMonth()
        var number_mouth = mouth * -30
        document.getElementById('mouth').style.webkitTransform = 'rotate' + '(' + number_mouth + 'deg)'
        document.getElementById('solar').style.webkitTransform = 'rotate' + '(' + number_mouth + 'deg)'
    }
    solarAndMouth()
    
    function dates() {
        var data = new Date()
        var date = data.getDate()
        var number_date = date * -11.25 + 11.25
        document.getElementById('data').style.webkitTransform = 'rotate' + '(' + number_date + 'deg)'
    }
    dates()
    
    function APS() {
        var data = new Date()
        var ap = data.getHours()
        if (ap > 12) {
            document.getElementById('AP').style.webkitTransform = 'rotate(180deg)'
        } else {
            document.getElementById('AP').style.webkitTransform = 'rotate(0deg)'
        }
    }
    APS()
    
    

    3.css

    1.luopan1.css

    #year {
    	position: absolute;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	transition: all 1s
    }
    
    #mouth {
    	position: absolute;
    	width: 200px;
    	height: 200px;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	transition: all 1s
    }
    
    #mouth li {
    	position: absolute;
    	width: 80px;
    	height: 20px
    }
    
    #mouth ul {
    	position: relative;
    	left: -40px;
    	top: -10px
    }
    
    #mouth ul li:nth-child(1) {
    	transform: rotate(0deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(2) {
    	transform: rotate(30deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(3) {
    	transform: rotate(60deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(4) {
    	transform: rotate(90deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(5) {
    	transform: rotate(120deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(6) {
    	transform: rotate(150deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(7) {
    	transform: rotate(180deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(8) {
    	transform: rotate(210deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(9) {
    	transform: rotate(240deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(10) {
    	transform: rotate(270deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(11) {
    	transform: rotate(300deg) translateX(100px)
    }
    
    #mouth ul li:nth-child(12) {
    	transform: rotate(330deg) translateX(100px)
    }
    
    #solar {
    	position: absolute;
    	width: 300px;
    	height: 300px;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	transform: rotate(0);
    	transition: all 5s;
    	z-index: 50
    }
    
    #solar li {
    	position: absolute;
    	width: 80px;
    	height: 20px;
    	cursor: pointer
    }
    
    #solar ul {
    	position: relative;
    	left: -40px;
    	top: -10px
    }
    
    #solar ul li:nth-child(1) {
    	transform: rotate(22.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(2) {
    	transform: rotate(37.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(3) {
    	transform: rotate(52.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(4) {
    	transform: rotate(67.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(5) {
    	transform: rotate(82.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(6) {
    	transform: rotate(97.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(7) {
    	transform: rotate(112.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(8) {
    	transform: rotate(127.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(9) {
    	transform: rotate(142.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(10) {
    	transform: rotate(157.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(11) {
    	transform: rotate(172.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(12) {
    	transform: rotate(187.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(13) {
    	transform: rotate(202.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(14) {
    	transform: rotate(217.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(15) {
    	transform: rotate(232.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(16) {
    	transform: rotate(247.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(17) {
    	transform: rotate(262.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(18) {
    	transform: rotate(277.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(19) {
    	transform: rotate(292.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(20) {
    	transform: rotate(307.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(21) {
    	transform: rotate(322.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(22) {
    	transform: rotate(337.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(23) {
    	transform: rotate(352.5deg) translateX(210px)
    }
    
    #solar ul li:nth-child(24) {
    	transform: rotate(367.5deg) translateX(210px)
    }
    
    #data {
    	position: absolute;
    	width: 300px;
    	height: 300px;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	transition: all 1s
    }
    
    #data li {
    	position: absolute;
    	width: 80px;
    	height: 20px
    }
    
    #data ul {
    	position: relative;
    	left: -40px;
    	top: -10px
    }
    
    #data ul li:nth-child(1) {
    	transform: rotate(0) translateX(160px)
    }
    
    #data ul li:nth-child(2) {
    	transform: rotate(11.25deg) translateX(160px)
    }
    
    #data ul li:nth-child(3) {
    	transform: rotate(22.5deg) translateX(160px)
    }
    
    #data ul li:nth-child(4) {
    	transform: rotate(33.75deg) translateX(160px)
    }
    
    #data ul li:nth-child(5) {
    	transform: rotate(45deg) translateX(160px)
    }
    
    #data ul li:nth-child(6) {
    	transform: rotate(56.25deg) translateX(160px)
    }
    
    #data ul li:nth-child(7) {
    	transform: rotate(67.5deg) translateX(160px)
    }
    
    #data ul li:nth-child(8) {
    	transform: rotate(78.75deg) translateX(160px)
    }
    
    #data ul li:nth-child(9) {
    	transform: rotate(90deg) translateX(160px)
    }
    
    #data ul li:nth-child(10) {
    	transform: rotate(101.25deg) translateX(160px)
    }
    
    #data ul li:nth-child(11) {
    	transform: rotate(112.5deg) translateX(160px)
    }
    
    #data ul li:nth-child(12) {
    	transform: rotate(123.75deg) translateX(160px)
    }
    
    #data ul li:nth-child(13) {
    	transform: rotate(135deg) translateX(160px)
    }
    
    #data ul li:nth-child(14) {
    	transform: rotate(146.25deg) translateX(160px)
    }
    
    #data ul li:nth-child(15) {
    	transform: rotate(157.5deg) translateX(160px)
    }
    
    #data ul li:nth-child(16) {
    	transform: rotate(168.75deg) translateX(160px)
    }
    
    #data ul li:nth-child(17) {
    	transform: rotate(180deg) translateX(160px)
    }
    
    #data ul li:nth-child(18) {
    	transform: rotate(191.25deg) translateX(160px)
    }
    
    #data ul li:nth-child(19) {
    	transform: rotate(202.5deg) translateX(160px)
    }
    
    #data ul li:nth-child(20) {
    	transform: rotate(213.75deg) translateX(160px)
    }
    
    #data ul li:nth-child(21) {
    	transform: rotate(225deg) translateX(160px)
    }
    
    #data ul li:nth-child(22) {
    	transform: rotate(236.25deg) translateX(160px)
    }
    
    #data ul li:nth-child(23) {
    	transform: rotate(247.5deg) translateX(160px)
    }
    
    #data ul li:nth-child(24) {
    	transform: rotate(258.75deg) translateX(160px)
    }
    
    #data ul li:nth-child(25) {
    	transform: rotate(270deg) translateX(160px)
    }
    
    #data ul li:nth-child(26) {
    	transform: rotate(281.25deg) translateX(160px)
    }
    
    #data ul li:nth-child(27) {
    	transform: rotate(292.5deg) translateX(160px)
    }
    
    #data ul li:nth-child(28) {
    	transform: rotate(303.75deg) translateX(160px)
    }
    
    #data ul li:nth-child(29) {
    	transform: rotate(315deg) translateX(160px)
    }
    
    #data ul li:nth-child(30) {
    	transform: rotate(326.25deg) translateX(160px)
    }
    
    #data ul li:nth-child(31) {
    	transform: rotate(337.5deg) translateX(160px)
    }
    
    #AP {
    	position: absolute;
    	width: 400px;
    	height: 400px;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	transition: all 1s
    }
    
    #AP li {
    	position: absolute;
    	width: 80px;
    	height: 20px
    }
    
    #AP ul {
    	position: relative;
    	left: -40px;
    	top: -10px
    }
    
    #AP ul li:nth-child(1) {
    	transform: rotate(0deg) translateX(250px)
    }
    
    #AP ul li:nth-child(2) {
    	transform: rotate(180deg) translateX(250px)
    }
    
    

    2.luopan2.css

    #message {
    	position: absolute;
    	width: 240px;
    	height: 500px;
    	right: -310px;
    	font-size: 18px;
    	color: #b4eeb4;
    	font-family: fontOne;
    	box-sizing: border-box
    }
    
    #message ul li {
    	position: absolute;
    	margin: 25px 3px;
    	width: 18px;
    	text-align: center;
    	word-wrap: break-word;
    	border: 1px solid #fff
    }
    
    #message ul li:nth-child(1) {
    	right: 5px
    }
    
    #message ul li:nth-child(2) {
    	right: 30px
    }
    
    #message ul li:nth-child(3) {
    	right: 55px
    }
    
    #message ul li:nth-child(4) {
    	right: 80px
    }
    
    #message ul li:nth-child(5) {
    	right: 105px
    }
    
    #message ul li:nth-child(6) {
    	right: 130px
    }
    
    #message ul li:nth-child(7) {
    	right: 155px
    }
    
    #message ul li:nth-child(8) {
    	right: 180px
    }
    
    #message ul li:nth-child(9) {
    	right: 205px
    }
    
    #message ul li:nth-child(10) {
    	right: 230px
    }
    
    

    3.luopan3.css

    * {
    	padding: 0;
    	margin: 0
    }
    
    body {
    	background: #0e0008;
    	overflow: hidden;
    	color: #fff;
    	font-size: 14px
    }
    
    #sum {
    	width: 730px;
    	height: 730px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-left: -365px;
    	margin-top: -365px;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: center;
    	align-items: center
    }
    
    li {
    	text-align: center;
    	list-style-type: none
    }
    
    #second {
    	position: absolute;
    	width: 600px;
    	height: 600px;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	transition: all 1s
    }
    
    #second li {
    	position: absolute;
    	width: 80px;
    	height: 20px
    }
    
    #second ul {
    	position: relative;
    	left: -40px;
    	top: -10px
    }
    
    #minute {
    	position: absolute;
    	width: 500px;
    	height: 500px;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	transition: all 1s
    }
    
    #minute li {
    	position: absolute;
    	width: 80px;
    	height: 20px
    }
    
    #minute ul {
    	position: relative;
    	left: -40px;
    	top: -10px
    }
    
    #hour {
    	position: absolute;
    	width: 400px;
    	height: 400px;
    	box-sizing: border-box;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	transition: all 1s
    }
    
    #hour li {
    	position: absolute;
    	width: 50px;
    	height: 20px
    }
    
    #hour ul {
    	position: relative;
    	left: -25px;
    	top: -10px
    }
    
    #shade {
    	position: absolute;
    	list-style-type: none;
    	background: rgba(11, 87, 187, .7);
    	width: 430px;
    	height: 28px;
    	left: 366px
    }
    
    #second ul li:nth-child(1) {
    	transform: rotate(0) translateX(400px)
    }
    
    #second ul li:nth-child(2) {
    	transform: rotate(6deg) translateX(400px)
    }
    
    #second ul li:nth-child(3) {
    	transform: rotate(12deg) translateX(400px)
    }
    
    #second ul li:nth-child(4) {
    	transform: rotate(18deg) translateX(400px)
    }
    
    #second ul li:nth-child(5) {
    	transform: rotate(24deg) translateX(400px)
    }
    
    #second ul li:nth-child(6) {
    	transform: rotate(30deg) translateX(400px)
    }
    
    #second ul li:nth-child(7) {
    	transform: rotate(36deg) translateX(400px)
    }
    
    #second ul li:nth-child(8) {
    	transform: rotate(42deg) translateX(400px)
    }
    
    #second ul li:nth-child(9) {
    	transform: rotate(48deg) translateX(400px)
    }
    
    #second ul li:nth-child(10) {
    	transform: rotate(54deg) translateX(400px)
    }
    
    #second ul li:nth-child(11) {
    	transform: rotate(60deg) translateX(400px)
    }
    
    #second ul li:nth-child(12) {
    	transform: rotate(66deg) translateX(400px)
    }
    
    #second ul li:nth-child(13) {
    	transform: rotate(72deg) translateX(400px)
    }
    
    #second ul li:nth-child(14) {
    	transform: rotate(78deg) translateX(400px)
    }
    
    #second ul li:nth-child(15) {
    	transform: rotate(84deg) translateX(400px)
    }
    
    #second ul li:nth-child(16) {
    	transform: rotate(90deg) translateX(400px)
    }
    
    #second ul li:nth-child(17) {
    	transform: rotate(96deg) translateX(400px)
    }
    
    #second ul li:nth-child(18) {
    	transform: rotate(102deg) translateX(400px)
    }
    
    #second ul li:nth-child(19) {
    	transform: rotate(108deg) translateX(400px)
    }
    
    #second ul li:nth-child(20) {
    	transform: rotate(114deg) translateX(400px)
    }
    
    #second ul li:nth-child(21) {
    	transform: rotate(120deg) translateX(400px)
    }
    
    #second ul li:nth-child(22) {
    	transform: rotate(126deg) translateX(400px)
    }
    
    #second ul li:nth-child(23) {
    	transform: rotate(132deg) translateX(400px)
    }
    
    #second ul li:nth-child(24) {
    	transform: rotate(138deg) translateX(400px)
    }
    
    #second ul li:nth-child(25) {
    	transform: rotate(144deg) translateX(400px)
    }
    
    #second ul li:nth-child(26) {
    	transform: rotate(150deg) translateX(400px)
    }
    
    #second ul li:nth-child(27) {
    	transform: rotate(156deg) translateX(400px)
    }
    
    #second ul li:nth-child(28) {
    	transform: rotate(162deg) translateX(400px)
    }
    
    #second ul li:nth-child(29) {
    	transform: rotate(168deg) translateX(400px)
    }
    
    #second ul li:nth-child(30) {
    	transform: rotate(174deg) translateX(400px)
    }
    
    #second ul li:nth-child(31) {
    	transform: rotate(180deg) translateX(400px)
    }
    
    #second ul li:nth-child(32) {
    	transform: rotate(186deg) translateX(400px)
    }
    
    #second ul li:nth-child(33) {
    	transform: rotate(192deg) translateX(400px)
    }
    
    #second ul li:nth-child(34) {
    	transform: rotate(198deg) translateX(400px)
    }
    
    #second ul li:nth-child(35) {
    	transform: rotate(204deg) translateX(400px)
    }
    
    #second ul li:nth-child(36) {
    	transform: rotate(210deg) translateX(400px)
    }
    
    #second ul li:nth-child(37) {
    	transform: rotate(216deg) translateX(400px)
    }
    
    #second ul li:nth-child(38) {
    	transform: rotate(222deg) translateX(400px)
    }
    
    #second ul li:nth-child(39) {
    	transform: rotate(228deg) translateX(400px)
    }
    
    #second ul li:nth-child(40) {
    	transform: rotate(234deg) translateX(400px)
    }
    
    #second ul li:nth-child(41) {
    	transform: rotate(240deg) translateX(400px)
    }
    
    #second ul li:nth-child(42) {
    	transform: rotate(246deg) translateX(400px)
    }
    
    #second ul li:nth-child(43) {
    	transform: rotate(252deg) translateX(400px)
    }
    
    #second ul li:nth-child(44) {
    	transform: rotate(258deg) translateX(400px)
    }
    
    #second ul li:nth-child(45) {
    	transform: rotate(264deg) translateX(400px)
    }
    
    #second ul li:nth-child(46) {
    	transform: rotate(270deg) translateX(400px)
    }
    
    #second ul li:nth-child(47) {
    	transform: rotate(276deg) translateX(400px)
    }
    
    #second ul li:nth-child(48) {
    	transform: rotate(282deg) translateX(400px)
    }
    
    #second ul li:nth-child(49) {
    	transform: rotate(288deg) translateX(400px)
    }
    
    #second ul li:nth-child(50) {
    	transform: rotate(294deg) translateX(400px)
    }
    
    #second ul li:nth-child(51) {
    	transform: rotate(300deg) translateX(400px)
    }
    
    #second ul li:nth-child(52) {
    	transform: rotate(306deg) translateX(400px)
    }
    
    #second ul li:nth-child(53) {
    	transform: rotate(312deg) translateX(400px)
    }
    
    #second ul li:nth-child(54) {
    	transform: rotate(318deg) translateX(400px)
    }
    
    #second ul li:nth-child(55) {
    	transform: rotate(324deg) translateX(400px)
    }
    
    #second ul li:nth-child(56) {
    	transform: rotate(330deg) translateX(400px)
    }
    
    #second ul li:nth-child(57) {
    	transform: rotate(336deg) translateX(400px)
    }
    
    #second ul li:nth-child(58) {
    	transform: rotate(342deg) translateX(400px)
    }
    
    #second ul li:nth-child(59) {
    	transform: rotate(348deg) translateX(400px)
    }
    
    #second ul li:nth-child(60) {
    	transform: rotate(354deg) translateX(400px)
    }
    
    #minute ul li:nth-child(1) {
    	transform: rotate(0) translateX(340px)
    }
    
    #minute ul li:nth-child(2) {
    	transform: rotate(6deg) translateX(340px)
    }
    
    #minute ul li:nth-child(3) {
    	transform: rotate(12deg) translateX(340px)
    }
    
    #minute ul li:nth-child(4) {
    	transform: rotate(18deg) translateX(340px)
    }
    
    #minute ul li:nth-child(5) {
    	transform: rotate(24deg) translateX(340px)
    }
    
    #minute ul li:nth-child(6) {
    	transform: rotate(30deg) translateX(340px)
    }
    
    #minute ul li:nth-child(7) {
    	transform: rotate(36deg) translateX(340px)
    }
    
    #minute ul li:nth-child(8) {
    	transform: rotate(42deg) translateX(340px)
    }
    
    #minute ul li:nth-child(9) {
    	transform: rotate(48deg) translateX(340px)
    }
    
    #minute ul li:nth-child(10) {
    	transform: rotate(54deg) translateX(340px)
    }
    
    #minute ul li:nth-child(11) {
    	transform: rotate(60deg) translateX(340px)
    }
    
    #minute ul li:nth-child(12) {
    	transform: rotate(66deg) translateX(340px)
    }
    
    #minute ul li:nth-child(13) {
    	transform: rotate(72deg) translateX(340px)
    }
    
    #minute ul li:nth-child(14) {
    	transform: rotate(78deg) translateX(340px)
    }
    
    #minute ul li:nth-child(15) {
    	transform: rotate(84deg) translateX(340px)
    }
    
    #minute ul li:nth-child(16) {
    	transform: rotate(90deg) translateX(340px)
    }
    
    #minute ul li:nth-child(17) {
    	transform: rotate(96deg) translateX(340px)
    }
    
    #minute ul li:nth-child(18) {
    	transform: rotate(102deg) translateX(340px)
    }
    
    #minute ul li:nth-child(19) {
    	transform: rotate(108deg) translateX(340px)
    }
    
    #minute ul li:nth-child(20) {
    	transform: rotate(114deg) translateX(340px)
    }
    
    #minute ul li:nth-child(21) {
    	transform: rotate(120deg) translateX(340px)
    }
    
    #minute ul li:nth-child(22) {
    	transform: rotate(126deg) translateX(340px)
    }
    
    #minute ul li:nth-child(23) {
    	transform: rotate(132deg) translateX(340px)
    }
    
    #minute ul li:nth-child(24) {
    	transform: rotate(138deg) translateX(340px)
    }
    
    #minute ul li:nth-child(25) {
    	transform: rotate(144deg) translateX(340px)
    }
    
    #minute ul li:nth-child(26) {
    	transform: rotate(150deg) translateX(340px)
    }
    
    #minute ul li:nth-child(27) {
    	transform: rotate(156deg) translateX(340px)
    }
    
    #minute ul li:nth-child(28) {
    	transform: rotate(162deg) translateX(340px)
    }
    
    #minute ul li:nth-child(29) {
    	transform: rotate(168deg) translateX(340px)
    }
    
    #minute ul li:nth-child(30) {
    	transform: rotate(174deg) translateX(340px)
    }
    
    #minute ul li:nth-child(31) {
    	transform: rotate(180deg) translateX(340px)
    }
    
    #minute ul li:nth-child(32) {
    	transform: rotate(186deg) translateX(340px)
    }
    
    #minute ul li:nth-child(33) {
    	transform: rotate(192deg) translateX(340px)
    }
    
    #minute ul li:nth-child(34) {
    	transform: rotate(198deg) translateX(340px)
    }
    
    #minute ul li:nth-child(35) {
    	transform: rotate(204deg) translateX(340px)
    }
    
    #minute ul li:nth-child(36) {
    	transform: rotate(210deg) translateX(340px)
    }
    
    #minute ul li:nth-child(37) {
    	transform: rotate(216deg) translateX(340px)
    }
    
    #minute ul li:nth-child(38) {
    	transform: rotate(222deg) translateX(340px)
    }
    
    #minute ul li:nth-child(39) {
    	transform: rotate(228deg) translateX(340px)
    }
    
    #minute ul li:nth-child(40) {
    	transform: rotate(234deg) translateX(340px)
    }
    
    #minute ul li:nth-child(41) {
    	transform: rotate(240deg) translateX(340px)
    }
    
    #minute ul li:nth-child(42) {
    	transform: rotate(246deg) translateX(340px)
    }
    
    #minute ul li:nth-child(43) {
    	transform: rotate(252deg) translateX(340px)
    }
    
    #minute ul li:nth-child(44) {
    	transform: rotate(258deg) translateX(340px)
    }
    
    #minute ul li:nth-child(45) {
    	transform: rotate(264deg) translateX(340px)
    }
    
    #minute ul li:nth-child(46) {
    	transform: rotate(270deg) translateX(340px)
    }
    
    #minute ul li:nth-child(47) {
    	transform: rotate(276deg) translateX(340px)
    }
    
    #minute ul li:nth-child(48) {
    	transform: rotate(282deg) translateX(340px)
    }
    
    #minute ul li:nth-child(49) {
    	transform: rotate(288deg) translateX(340px)
    }
    
    #minute ul li:nth-child(50) {
    	transform: rotate(294deg) translateX(340px)
    }
    
    #minute ul li:nth-child(51) {
    	transform: rotate(300deg) translateX(340px)
    }
    
    #minute ul li:nth-child(52) {
    	transform: rotate(306deg) translateX(340px)
    }
    
    #minute ul li:nth-child(53) {
    	transform: rotate(312deg) translateX(340px)
    }
    
    #minute ul li:nth-child(54) {
    	transform: rotate(318deg) translateX(340px)
    }
    
    #minute ul li:nth-child(55) {
    	transform: rotate(324deg) translateX(340px)
    }
    
    #minute ul li:nth-child(56) {
    	transform: rotate(330deg) translateX(340px)
    }
    
    #minute ul li:nth-child(57) {
    	transform: rotate(336deg) translateX(340px)
    }
    
    #minute ul li:nth-child(58) {
    	transform: rotate(342deg) translateX(340px)
    }
    
    #minute ul li:nth-child(59) {
    	transform: rotate(348deg) translateX(340px)
    }
    
    #minute ul li:nth-child(60) {
    	transform: rotate(354deg) translateX(340px)
    }
    
    #hour ul li:nth-child(1) {
    	transform: rotate(0deg) translateX(290px)
    }
    
    #hour ul li:nth-child(2) {
    	transform: rotate(30deg) translateX(290px)
    }
    
    #hour ul li:nth-child(3) {
    	transform: rotate(60deg) translateX(290px)
    }
    
    #hour ul li:nth-child(4) {
    	transform: rotate(90deg) translateX(290px)
    }
    
    #hour ul li:nth-child(5) {
    	transform: rotate(120deg) translateX(290px)
    }
    
    #hour ul li:nth-child(6) {
    	transform: rotate(150deg) translateX(290px)
    }
    
    #hour ul li:nth-child(7) {
    	transform: rotate(180deg) translateX(290px)
    }
    
    #hour ul li:nth-child(8) {
    	transform: rotate(210deg) translateX(290px)
    }
    
    #hour ul li:nth-child(9) {
    	transform: rotate(240deg) translateX(290px)
    }
    
    #hour ul li:nth-child(10) {
    	transform: rotate(270deg) translateX(290px)
    }
    
    #hour ul li:nth-child(11) {
    	transform: rotate(300deg) translateX(290px)
    }
    
    #hour ul li:nth-child(12) {
    	transform: rotate(330deg) translateX(290px)
    }
    
    

    页面效果

    是一个动态转动的罗盘界面
    在这里插入图片描述

    展开全文
  • 罗盘时钟源码分享 js,css都写在html
  • 电脑罗盘时钟动态壁纸(带时钟特效、背景特效),需要的朋友可以下载体验一般,不会操作的朋友可以加我QQ:64814219(注:需说明来意,否则不通过)
  • html5罗盘时钟

    2012-06-12 18:00:01
    html5 罗盘时钟 使用html5开发 需要使用支持html5的浏览器 或者手机等
  • 罗盘时钟代码

    千次阅读 2020-12-12 23:26:36
    HTML <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...

    HTML

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <!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>
    
        <link rel="stylesheet" href="css/clock.css" >
    
    </head>
    <body>
    
    <div id="clock"></div>
    
    <script src="js/clock.js"></script>
    
    </body>
    </html>
    

    CSS

    *{
        margin:0;
        padding:0
    }
    html,body{
        width:100%;
        height:100%;
        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%
    }
    

    JacaScript

    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();
        },2000);
    }
    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)";
    }
    
    展开全文
  • 360°动态罗盘时钟显示HTML源码

    万次阅读 2020-05-10 23:59:44
    看着有点黑科技的感觉就跟前段时间比较火的抖音动态时间那个一个效果,以前我分享过是手机APP版的,这个是TTML源码的!分享给大家! 源码截图 预览截图 ...源码下载: https://wuzuhua.cn/987.html
  • 最近抖音上有一个罗盘文字时钟软件非常火,就是文字时钟,给大家分享这款就是通过原生js来实现的文字时钟源码,有喜欢的朋友可以下载哦,无需安装,上传访问即可使用
  • 源码介绍: 看着有点黑科技的感觉,就跟前段时间比较火的抖音动态时间那个一个效果,纯HTML源码!
  • html--js编写八卦阵式罗盘时钟

    万次阅读 多人点赞 2019-10-14 12:55:08
    clock.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
  • 主要为大家详细介绍了JavaScript实现抖音罗盘时钟,特别实用的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 罗盘时钟

    2021-03-26 13:00:46
    html+jq写的一个罗盘时钟页面
  • 抖音网红的时间罗盘不是粗编乱造,并在css和js上进行注释方便学习 html5 时钟显示模板,直接显示当前的时间,还能按照秒自动加时,动画效果也随着时间的变化而变化...动画指向也为当前的时间,罗盘显示,贼帅罗盘时钟
  • 罗盘时钟代码(转载)

    万次阅读 热门讨论 2019-12-06 23:16:57
    文件结构如下: ...├── hello.html └── js └── demo.js 浏览器打开hello.html即可(文件见附录),效果如下: #----------------------------------------------------------------------------...
  • 代码 clock.css body{ font-size: 14px; color: white; font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif; background: url(../image/16.jpg) no-repeat; padding: 0; margin: 0; ...
  • 介绍: 看着有点黑科技的感觉,就跟前段时间比较火的抖音动态时间那个一个效果,纯HTML源码! 网盘下载地址: http://kekewl.org/TkZBwfOBqIb 图片:
  • 圆盘时钟动画源码

    2019-05-06 14:04:39
    圆盘时钟动画源码,很有美感,希望对在学前端的你能有所帮助

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 313
精华内容 125
关键字:

罗盘时钟html代码