導入vue的html、css、JavaScript的仿抖音的文字時鐘代碼解析

1.說明：

推薦指數：★★★★★

下面的代碼註釋很詳細，慢慢看，仔細享受，有的長，先收藏，慢慢看，通俗易懂，看完就是入門了。

導言：學習python，也是需要了解其他變成的語言的相關指示，計算機編程語言是相通的，vue也的確比較火，所以帶大家熟悉一下，別怕，很簡單，小白都能看得懂，有註釋。當然，本代碼還是可以優化的，看到css一大串的類似代碼，學習python的人一定知道，可以採用推導式和for啥in啥，對吧？其實html也是可以的，因為基礎，所以別急，先熟悉，學會走路，大神估計看到，會呵呵，希望大家指定，繼續優化代碼，哈哈哈，謝謝。

對大神來說，代碼優化後只需一點點代碼就可以了，python也是，html也是。

2.建一個文件夾：如下這些文件放置：

3.效果圖：

very beautiful！

4.建一個index.html文件，複製如下代碼：

<code>


 







<title>實時節氣羅盤文字時鐘代碼/<title>


<link>
<link>








 



  
  


  
  
  

\t

\t  

\t\t{{item}}          

\t

  


  
  

\t

\t  

\t\t{{item}}          

\t

  


  
  

\t

\t   

\t\t{{item}}          

\t

  


  
  

\t

\t  
天祈

\t

  


  
  

\t

\t  

\t\t{{item.name}}          

\t

  


  
  

\t

\t  
\t\tv-for="(item,index) in flag_solar"
\t\tclass="mm">
\t\t{{item.name}}          

\t
 

  


  
  

\t

\t  

\t\t{{item.name}}          

\t

  


  
  

\t

\t  

\t\t{{item.name}}          

\t

  









/<code>

5. 在建一個jieqi1.js文件，代碼：

<code>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,
        },
        {
          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,
        }
      ],
      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)
        // console.log(arrayOne.length)
        if (arrayOne.length !== 0) {
          stringOne = arrayOne.join()
          // console.log(stringOne)
          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
//  window.onload =
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()
  // console.log(hour)
  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()

// data控制
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()

// AP控制
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()
/<code>

6 再去下載一個vue.js文件，官網上有的，也可以外部在線導入，直接複製可以。

7 jieqi2.css文件，代碼：

<code>* {
  padding: 0;
  margin: 0;
}
/* 此部分樣式包括總，時，分,秒 */
body {
  /*注意css的顏色設定法，可以直接輸入英文，比如：red；或者顏色的十六進制，還有這種*/
  background: rgba(14, 0, 8, 1);
  overflow: hidden;
  color: #fff;
  /*顯示字體大小*/
  font-size: 8px;}

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

/* --第7圈---秒數控制樣式 */
#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;}
#second ul li:nth-child(1) {
  transform: rotate(0) translateX(240px);}
#second ul li:nth-child(2) {
  transform: rotate(6deg) translateX(240px);}
#second ul li:nth-child(3) {
  transform: rotate(12deg) translateX(240px);}
#second ul li:nth-child(4) {
  transform: rotate(18deg) translateX(240px);}
#second ul li:nth-child(5) {
  transform: rotate(24deg) translateX(240px);}
#second ul li:nth-child(6) {
  transform: rotate(30deg) translateX(240px);}
#second ul li:nth-child(7) {
  transform: rotate(36deg) translateX(240px);}
#second ul li:nth-child(8) {
  transform: rotate(42deg) translateX(240px);}
#second ul li:nth-child(9) {
  transform: rotate(48deg) translateX(240px);}
#second ul li:nth-child(10) {
  transform: rotate(54deg) translateX(240px);}
#second ul li:nth-child(11) {
  transform: rotate(60deg) translateX(240px);}
#second ul li:nth-child(12) { 

  transform: rotate(66deg) translateX(240px);}
#second ul li:nth-child(13) {
  transform: rotate(72deg) translateX(240px);}
#second ul li:nth-child(14) {
  transform: rotate(78deg) translateX(240px);}
#second ul li:nth-child(15) {
  transform: rotate(84deg) translateX(240px);}
#second ul li:nth-child(16) {
  transform: rotate(90deg) translateX(240px);}
#second ul li:nth-child(17) {
  transform: rotate(96deg) translateX(240px);}
#second ul li:nth-child(18) {
  transform: rotate(102deg) translateX(240px);}
#second ul li:nth-child(19) {
  transform: rotate(108deg) translateX(240px);}
#second ul li:nth-child(20) {
  transform: rotate(114deg) translateX(240px);}
#second ul li:nth-child(21) {
  transform: rotate(120deg) translateX(240px);}
#second ul li:nth-child(22) {
  transform: rotate(126deg) translateX(240px);}
#second ul li:nth-child(23) {
  transform: rotate(132deg) translateX(240px);}
#second ul li:nth-child(24) {
  transform: rotate(138deg) translateX(240px);}
#second ul li:nth-child(25) {
  transform: rotate(144deg) translateX(240px);}
#second ul li:nth-child(26) {
  transform: rotate(150deg) translateX(240px);}
#second ul li:nth-child(27) {
  transform: rotate(156deg) translateX(240px);}
#second ul li:nth-child(28) {
  transform: rotate(162deg) translateX(240px);}
#second ul li:nth-child(29) {
  transform: rotate(168deg) translateX(240px);}
#second ul li:nth-child(30) {
  transform: rotate(174deg) translateX(240px);}
#second ul li:nth-child(31) {
  transform: rotate(180deg) translateX(240px);}
#second ul li:nth-child(32) {
  transform: rotate(186deg) translateX(240px);}
#second ul li:nth-child(33) {
  transform: rotate(192deg) translateX(240px);}
#second ul li:nth-child(34) {
  transform: rotate(198deg) translateX(240px);}
#second ul li:nth-child(35) {
  transform: rotate(204deg) translateX(240px);}
#second ul li:nth-child(36) {
  transform: rotate(210deg) translateX(240px);}
#second ul li:nth-child(37) { 

  transform: rotate(216deg) translateX(240px);}
#second ul li:nth-child(38) {
  transform: rotate(222deg) translateX(240px);}
#second ul li:nth-child(39) {
  transform: rotate(228deg) translateX(240px);}
#second ul li:nth-child(40) {
  transform: rotate(234deg) translateX(240px);}
#second ul li:nth-child(41) {
  transform: rotate(240deg) translateX(240px);}
#second ul li:nth-child(42) {
  transform: rotate(246deg) translateX(240px);}
#second ul li:nth-child(43) {
  transform: rotate(252deg) translateX(240px);}
#second ul li:nth-child(44) {
  transform: rotate(258deg) translateX(240px);}
#second ul li:nth-child(45) {
  transform: rotate(264deg) translateX(240px);}
#second ul li:nth-child(46) {
  transform: rotate(270deg) translateX(240px);}
#second ul li:nth-child(47) {
  transform: rotate(276deg) translateX(240px);}
#second ul li:nth-child(48) {
  transform: rotate(282deg) translateX(240px);}
#second ul li:nth-child(49) {
  transform: rotate(288deg) translateX(240px);}
#second ul li:nth-child(50) {
  transform: rotate(294deg) translateX(240px);}
#second ul li:nth-child(51) {
  transform: rotate(300deg) translateX(240px);}
#second ul li:nth-child(52) {
  transform: rotate(306deg) translateX(240px);}
#second ul li:nth-child(53) {
  transform: rotate(312deg) translateX(240px);}
#second ul li:nth-child(54) {
  transform: rotate(318deg) translateX(240px);}
#second ul li:nth-child(55) {
  transform: rotate(324deg) translateX(240px);}
#second ul li:nth-child(56) {
  transform: rotate(330deg) translateX(240px);}
#second ul li:nth-child(57) {
  transform: rotate(336deg) translateX(240px);}
#second ul li:nth-child(58) {
  transform: rotate(342deg) translateX(240px);}
#second ul li:nth-child(59) {
  transform: rotate(348deg) translateX(240px);}
#second ul li:nth-child(60) {
  transform: rotate(354deg) translateX(240px);}


/*--第6圈---分針樣式 */ 

#minute {
  position: absolute;
  width: 500px;
  height: 500px;
  color:green;
  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;}
#minute ul li:nth-child(1) {
  transform: rotate(0) translateX(200px);}
#minute ul li:nth-child(2) {
  transform: rotate(6deg) translateX(200px);}
#minute ul li:nth-child(3) {
  transform: rotate(12deg) translateX(200px);}
#minute ul li:nth-child(4) {
  transform: rotate(18deg) translateX(200px);}
#minute ul li:nth-child(5) {
  transform: rotate(24deg) translateX(200px);}
#minute ul li:nth-child(6) {
  transform: rotate(30deg) translateX(200px);}
#minute ul li:nth-child(7) {
  transform: rotate(36deg) translateX(200px);}
#minute ul li:nth-child(8) {
  transform: rotate(42deg) translateX(200px);}
#minute ul li:nth-child(9) {
  transform: rotate(48deg) translateX(200px);}
#minute ul li:nth-child(10) {
  transform: rotate(54deg) translateX(200px);}
#minute ul li:nth-child(11) {
  transform: rotate(60deg) translateX(200px);}
#minute ul li:nth-child(12) {
  transform: rotate(66deg) translateX(200px);}
#minute ul li:nth-child(13) {
  transform: rotate(72deg) translateX(200px);}
#minute ul li:nth-child(14) {
  transform: rotate(78deg) translateX(200px);}
#minute ul li:nth-child(15) {
  transform: rotate(84deg) translateX(200px);}
#minute ul li:nth-child(16) {
  transform: rotate(90deg) translateX(200px);} 

#minute ul li:nth-child(17) {
  transform: rotate(96deg) translateX(200px);}
#minute ul li:nth-child(18) {
  transform: rotate(102deg) translateX(200px);}
#minute ul li:nth-child(19) {
  transform: rotate(108deg) translateX(200px);}
#minute ul li:nth-child(20) {
  transform: rotate(114deg) translateX(200px);}
#minute ul li:nth-child(21) {
  transform: rotate(120deg) translateX(200px);}
#minute ul li:nth-child(22) {
  transform: rotate(126deg) translateX(200px);}
#minute ul li:nth-child(23) {
  transform: rotate(132deg) translateX(200px);}
#minute ul li:nth-child(24) {
  transform: rotate(138deg) translateX(200px);}
#minute ul li:nth-child(25) {
  transform: rotate(144deg) translateX(200px);}
#minute ul li:nth-child(26) {
  transform: rotate(150deg) translateX(200px);}
#minute ul li:nth-child(27) {
  transform: rotate(156deg) translateX(200px);}
#minute ul li:nth-child(28) {
  transform: rotate(162deg) translateX(200px);}
#minute ul li:nth-child(29) {
  transform: rotate(168deg) translateX(200px);}
#minute ul li:nth-child(30) {
  transform: rotate(174deg) translateX(200px);}
#minute ul li:nth-child(31) {
  transform: rotate(180deg) translateX(200px);}
#minute ul li:nth-child(32) {
  transform: rotate(186deg) translateX(200px);}
#minute ul li:nth-child(33) {
  transform: rotate(192deg) translateX(200px);}
#minute ul li:nth-child(34) {
  transform: rotate(198deg) translateX(200px);}
#minute ul li:nth-child(35) {
  transform: rotate(204deg) translateX(200px);}
#minute ul li:nth-child(36) {
  transform: rotate(210deg) translateX(200px);}
#minute ul li:nth-child(37) {
  transform: rotate(216deg) translateX(200px);}
#minute ul li:nth-child(38) {
  transform: rotate(222deg) translateX(200px);}
#minute ul li:nth-child(39) {
  transform: rotate(228deg) translateX(200px);}
#minute ul li:nth-child(40) {
  transform: rotate(234deg) translateX(200px);}
#minute ul li:nth-child(41) {
  transform: rotate(240deg) translateX(200px);} 

#minute ul li:nth-child(42) {
  transform: rotate(246deg) translateX(200px);}
#minute ul li:nth-child(43) {
  transform: rotate(252deg) translateX(200px);}
#minute ul li:nth-child(44) {
  transform: rotate(258deg) translateX(200px);}
#minute ul li:nth-child(45) {
  transform: rotate(264deg) translateX(200px);}
#minute ul li:nth-child(46) {
  transform: rotate(270deg) translateX(200px);}
#minute ul li:nth-child(47) {
  transform: rotate(276deg) translateX(200px);}
#minute ul li:nth-child(48) {
  transform: rotate(282deg) translateX(200px);}
#minute ul li:nth-child(49) {
  transform: rotate(288deg) translateX(200px);}
#minute ul li:nth-child(50) {
  transform: rotate(294deg) translateX(200px);}
#minute ul li:nth-child(51) {
  transform: rotate(300deg) translateX(200px);}
#minute ul li:nth-child(52) {
  transform: rotate(306deg) translateX(200px);}
#minute ul li:nth-child(53) {
  transform: rotate(312deg) translateX(200px);}
#minute ul li:nth-child(54) {
  transform: rotate(318deg) translateX(200px);}
#minute ul li:nth-child(55) {
  transform: rotate(324deg) translateX(200px);}
#minute ul li:nth-child(56) {
  transform: rotate(330deg) translateX(200px);}
#minute ul li:nth-child(57) {
  transform: rotate(336deg) translateX(200px);}
#minute ul li:nth-child(58) {
  transform: rotate(342deg) translateX(200px);}
#minute ul li:nth-child(59) {
  transform: rotate(348deg) translateX(200px);}
#minute ul li:nth-child(60) {
  transform: rotate(354deg) translateX(200px);}

/*--第5圈--時針控制樣式，半徑160px */
#hour {
  position: absolute;
  width: 400px;
  height: 400px;
  color:#4876FF;
  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;}
#hour ul li:nth-child(1) {
  transform: rotate(0deg) translateX(160px);}
#hour ul li:nth-child(2) {
  transform: rotate(30deg) translateX(160px);}
#hour ul li:nth-child(3) {
  transform: rotate(60deg) translateX(160px);}
#hour ul li:nth-child(4) {
  transform: rotate(90deg) translateX(160px);}
#hour ul li:nth-child(5) {
  transform: rotate(120deg) translateX(160px);}
#hour ul li:nth-child(6) {
  transform: rotate(150deg) translateX(160px);}
#hour ul li:nth-child(7) {
  transform: rotate(180deg) translateX(160px);}
#hour ul li:nth-child(8) {
  transform: rotate(210deg) translateX(160px);}
#hour ul li:nth-child(9) {
  transform: rotate(240deg) translateX(160px);}
#hour ul li:nth-child(10) {
  transform: rotate(270deg) translateX(160px);}
#hour ul li:nth-child(11) {
  transform: rotate(300deg) translateX(160px);}
#hour ul li:nth-child(12) {
  transform: rotate(330deg) translateX(160px);}

/*---當前時間向右的水平線條設置 */
#shade {
  position: absolute;
  list-style-type: none;
  background: #CAE1FF;
  /*當前時間顏色向右水平條框*/
  width: 300px;
  height: 2px;
  left: 350px;}/<code>

8 jieqi3.css文件，代碼：

<code>/* 此部分樣式寫年，月，節氣，日 */ 

/*圓心點---年分控制 */
#year {
  position: absolute;
  display: flex;
  color: darkorange;
  font-size: large;
  justify-content: center;
  align-items: center;
  transition: all 1s;}

/*--第3圈--月份控制 */
#mouth {
  position: absolute;
  width: 50px;
  height: 50px;
  color:#8A2BE2;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;}
#mouth li {
  position: absolute;
  /*月份的字體寬度，太小不好，比如：十二月，就會分兩部分顯示*/
  width: 80px;
  /* inline-size: auto; */
  height: 20px;
  left: -40px;
  top: -10px;}
#mouth ul {
  position: relative;}
/*月份的一圈的半徑30px控制*/
#mouth ul li:nth-child(1) {
  transform: rotate(0deg) translateX(80px);}
#mouth ul li:nth-child(2) {
  transform: rotate(30deg) translateX(80px);}
#mouth ul li:nth-child(3) {
  transform: rotate(60deg) translateX(80px);}
#mouth ul li:nth-child(4) {
  transform: rotate(90deg) translateX(80px);}
#mouth ul li:nth-child(5) {
  transform: rotate(120deg) translateX(80px);}
#mouth ul li:nth-child(6) {
  transform: rotate(150deg) translateX(80px);}
#mouth ul li:nth-child(7) { 

  transform: rotate(180deg) translateX(80px);}
#mouth ul li:nth-child(8) {
  transform: rotate(210deg) translateX(80px);}
#mouth ul li:nth-child(9) {
  transform: rotate(240deg) translateX(80px);}
#mouth ul li:nth-child(10) {
  transform: rotate(270deg) translateX(80px);}
#mouth ul li:nth-child(11) {
  transform: rotate(300deg) translateX(80px);}
#mouth ul li:nth-child(12) {
  transform: rotate(330deg) translateX(80px);}

/*--第2圈--solar=節氣*/
#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(50px);}
#solar ul li:nth-child(2) {
  transform: rotate(37.5deg) translateX(50px);}
#solar ul li:nth-child(3) {
  transform: rotate(52.5deg) translateX(50px);}
#solar ul li:nth-child(4) {
  transform: rotate(67.5deg) translateX(50px);}
#solar ul li:nth-child(5) {
  transform: rotate(82.5deg) translateX(50px);}
#solar ul li:nth-child(6) {
  transform: rotate(97.5deg) translateX(50px);}
#solar ul li:nth-child(7) {
  transform: rotate(112.5deg) translateX(50px);}
#solar ul li:nth-child(8) {
  transform: rotate(127.5deg) translateX(50px);}
#solar ul li:nth-child(9) { 

  transform: rotate(142.5deg) translateX(50px);}
#solar ul li:nth-child(10) {
  transform: rotate(157.5deg) translateX(50px);}
#solar ul li:nth-child(11) {
  transform: rotate(172.5deg) translateX(50px);}
#solar ul li:nth-child(12) {
  transform: rotate(187.5deg) translateX(50px);}
#solar ul li:nth-child(13) {
  transform: rotate(202.5deg) translateX(50px);}
#solar ul li:nth-child(14) {
  transform: rotate(217.5deg) translateX(50px);}
#solar ul li:nth-child(15) {
  transform: rotate(232.5deg) translateX(50px);}
#solar ul li:nth-child(16) {
  transform: rotate(247.5deg) translateX(50px);}
#solar ul li:nth-child(17) {
  transform: rotate(262.5deg) translateX(50px);}
#solar ul li:nth-child(18) {
  transform: rotate(277.5deg) translateX(50px);}
#solar ul li:nth-child(19) {
  transform: rotate(292.5deg) translateX(50px);}
#solar ul li:nth-child(20) {
  transform: rotate(307.5deg) translateX(50px);}
#solar ul li:nth-child(21) {
  transform: rotate(322.5deg) translateX(50px);}
#solar ul li:nth-child(22) {
  transform: rotate(337.5deg) translateX(50px);}
#solar ul li:nth-child(23) {
  transform: rotate(352.5deg) translateX(50px);}
#solar ul li:nth-child(24) {
  transform: rotate(367.5deg) translateX(50px);}

/*--第4圈--日期控制 */
#data {
  position: absolute;
  width: 300px;
  height: 300px;
  color:yellow;
  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=日期=幾號，半徑120px*/
#data ul li:nth-child(1) {
  transform: rotate(0) translateX(120px);}
#data ul li:nth-child(2) {
  transform: rotate(11.25deg) translateX(120px);}
#data ul li:nth-child(3) {
  transform: rotate(22.5deg) translateX(120px);}
#data ul li:nth-child(4) {
  transform: rotate(33.75deg) translateX(120px);}
#data ul li:nth-child(5) {
  transform: rotate(45deg) translateX(120px);}
#data ul li:nth-child(6) {
  transform: rotate(56.25deg) translateX(120px);}
#data ul li:nth-child(7) {
  transform: rotate(67.5deg) translateX(120px);}
#data ul li:nth-child(8) {
  transform: rotate(78.75deg) translateX(120px);}
#data ul li:nth-child(9) {
  transform: rotate(90deg) translateX(120px);}
#data ul li:nth-child(10) {
  transform: rotate(101.25deg) translateX(120px);}
#data ul li:nth-child(11) {
  transform: rotate(112.5deg) translateX(120px);}
#data ul li:nth-child(12) {
  transform: rotate(123.75deg) translateX(120px);}
#data ul li:nth-child(13) {
  transform: rotate(135deg) translateX(120px);}
#data ul li:nth-child(14) {
  transform: rotate(146.25deg) translateX(120px);}
#data ul li:nth-child(15) {
  transform: rotate(157.5deg) translateX(120px);}
#data ul li:nth-child(16) {
  transform: rotate(168.75deg) translateX(120px);}
#data ul li:nth-child(17) {
  transform: rotate(180deg) translateX(120px);}
#data ul li:nth-child(18) {
  transform: rotate(191.25deg) translateX(120px);}
#data ul li:nth-child(19) {
  transform: rotate(202.5deg) translateX(120px);}
#data ul li:nth-child(20) {
  transform: rotate(213.75deg) translateX(120px);}
#data ul li:nth-child(21) {
  transform: rotate(225deg) translateX(120px);}
#data ul li:nth-child(22) {
  transform: rotate(236.25deg) translateX(120px);}
#data ul li:nth-child(23) {
  transform: rotate(247.5deg) translateX(120px);}
#data ul li:nth-child(24) {
  transform: rotate(258.75deg) translateX(120px);} 

#data ul li:nth-child(25) {
  transform: rotate(270deg) translateX(120px);}
#data ul li:nth-child(26) {
  transform: rotate(281.25deg) translateX(120px);}
#data ul li:nth-child(27) {
  transform: rotate(292.5deg) translateX(120px);}
#data ul li:nth-child(28) {
  transform: rotate(303.75deg) translateX(120px);}
#data ul li:nth-child(29) {
  transform: rotate(315deg) translateX(120px);}
#data ul li:nth-child(30) {
  transform: rotate(326.25deg) translateX(120px);}
#data ul li:nth-child(31) {
  transform: rotate(337.5deg) translateX(120px);}
/*注意由於日期有不等，28~32天，所以造成1號～31號之間的距離稍微寬些*/

/*--最外圈--上午/白天和下午/晚上的設置*/
#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;
  /*顏色設置可以是英文，可以是十六進制*/
  color:red;
  height: 20px;}
#AP ul {
  position: relative;
  left: -40px;
  top: -10px;}
/*上午和下午的設置，半徑270px,改成最外邊*，改成白天和晚上/
/*上午的設置*/
#AP ul li:nth-child(1) {
  transform: rotate(0deg) translateX(270px);}
/*下午的設置*/ 

#AP ul li:nth-child(2) {
  transform: rotate(180deg) translateX(270px);}
/<code>

9 很長對吧？但是搞懂了，就是入門了，哈哈哈。如果能繼續優化，那就是大神。

閱讀更多 易三一世 的文章

關鍵字: 代碼 瀏覽器 Python