極簡javascript時鐘，代碼卻不簡單！

擊查看時鐘特效

極簡主義，程序員javascript打造極簡時鐘特效

對于javascript特效的學習，重要的是邏輯思路，所以這個時鐘特效不是很華麗，但是功能都展現出來了，而學習javascript并不是單純的扣代碼，很多人都覺得，摳完代碼，能看懂了，就算是學會了，但是，說的難聽點這樣的學習方式其實是自斷前程的學習方法，若是一門月薪過萬的技術有那么簡單學習，那么怎么還會有那么多人找不到工作呢？學習javascript特效最重要的是仔細研究一個特效的思路方法，然后根據這個特效可以擴展最初其他類似功能或者更復雜的特效，才算徹底的掌握好了這方面的知識！我的頭條號里面也有許多華麗的特效以及HTML5/javascript游戲，有興趣的朋友可以去看看！文末附上本次javascript時鐘的源碼！

如果想要更多的企業求職加分項目，案例，學習方法可以來一下我的前端群570946165，每天都會精挑細選一個特效，項目出來詳細講解，分享！包括答疑解惑！

HTML5/javascript時鐘特效源碼

代碼過長需要文檔版源碼來我的前端群570946165，已上傳到群文件

頭條號里有許多web前端學習視頻/源碼，企業常用特效/案例/項目，敬請關注！

.說明：

推薦指數：★★★★★

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

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

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

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

3.效果圖：

very beautiful！

4.建一個index.html文件，復制如下代碼：

<!--說明：注意html、css、js的位置和注釋不同的學習-->
<!--第1步--聲明-->
<!DOCTYPE html>

<!--第2步：html大框架包起來-->
<!--也可以這樣聲明lang語言：html lang="en"-->
<html>
<!--第2-1步：head設置：包括編碼字符串格式和標題，基本固定-->
<head>
<meta charset="UTF-8" />
<title>實時節氣羅盤文字時鐘代碼</title>
<!--css文件的導入，可以放在head，也可以放在body，注意格式：link rel和href-->
<!--css文件的導入，本代碼中是./代表同一個文件夾下，是linux系統，注意win可能不一樣-->
<link rel="stylesheet" href="./jieqi2.css" />
<link rel="stylesheet" href="./jieqi3.css" />

<!--以下2個meta，可要可不要，注意是對瀏覽器的聲明和框的設定，我注釋掉了-->
<!--meta name="viewport" content="width=device-width, initial-scale=1.0" /-->
<!--meta http-equiv="X-UA-Compatible" content="ie=edge" /-->
</head>

<!--第2-2步：body部分的設置：一般放導入js文件或者編寫js代碼（JavaScript代碼）-->
<!--注意有一個細節：一般導入vue.js和其他.js文件，可以放在head或者body的位置，但本代碼只能放在body的div之后-->
<body>

<div id="sum">
  <!--當前時間向右的指示的水平線條 -->
  <li id="shade"></li>

  <!-- 注意：下面的兩個大括號是vue的特點 -->
  <!-- 秒 -->
  <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"
		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>


<!-- vue和其他js文件的引入 -->
<script src="./vue.js"></script>
<script src="./jieqi1.js"></script>

</body>
</html>

在建一個jieqi1.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,
        },
        {
          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()

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

7 jieqi2.css文件，代碼：

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

8 jieqi3.css文件，代碼：

/* 此部分樣式寫年，月，節氣，日 */
/*圓心點---年分控制 */
#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);}

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

avascript寫特效寫多了，今天想換個風格，就用CSS寫個小時鐘玩下吧。

用CSS3做一個小小的時鐘，跟現實中的時鐘，功能一樣，都能實現看時間的效果。

這里還是要說一下我自己建的前端學習群：594959296，從我一個人到現在的1755個都是看我每一篇文章看我每一個案例來的，可以說都是我們大前端的學霸啊，不定期分享干貨。想學到東西的都可以來，歡迎初學和進階中的小伙伴

1. 簡介

2. 制作時鐘的思路

第一步畫表盤
第二步添加時針，分針，秒針
第三步設置指針

3. 代碼

3.1畫表盤

你會好奇，為什么數字都會在一塊，因為定位了啊，那么，怎么讓他們分開？可以用循環變換角度。。。

又有問題了，那字怎么倒了啊，怎么整??？在反轉回去，這里別反轉div，要是反轉div的話，字又回去了，那你看我的HTML結構，我在反轉span標簽就歐克了。

3.2 添加時針，分針，秒針

3.3 設置指針

4. 完整代碼

今天的這個案例就寫完了，希望大家能夠學習到東西。

因為之前有很多案例都是javascript做的，有些人也想我用CSS做幾個試試，讓他們學學，所以今天才有了這篇文章。

學習javascript也是有難度的，前提是你的html和css學的應該要很號，您不能連html這東東是干啥的都不知道就開始學javascript了，學乘除前，學好加減法總是有益無害的。

再說幾點建議：

不要急著看一些復雜的javascript網頁特效的代碼，這樣除了打擊你的自信心，什么也學不到
看網上什么幾天精通javascript的，直接跳過吧，會浪費你很多時間
這個案例就算做完了，想要完整代碼自己練習的小伙伴進我的群自助領取，已經上傳到群文件里了，群號：594959296，歡迎學習交流的小伙伴過來一起學習交流。

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻

在線咨詢

上一篇：HTML入門基礎知識
下一篇：HTML標簽以及各個標簽屬性大全（網頁制作必備）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

極簡javascript時鐘，代碼卻不簡單！