导入vue的html、css、JavaScript的仿抖音的文字时钟代码解析

1.说明：

推荐指数：★★★★★

下面的代码注释很详细，慢慢看，仔细享受，有的长，先收藏，慢慢看，通俗易懂，看完就是入门了。

导言：学习python，也是需要了解其他变成的语言的相关指示，计算机编程语言是相通的，vue也的确比较火，所以带大家熟悉一下，别怕，很简单，小白都能看得懂，有注释。当然，本代码还是可以优化的，看到css一大串的类似代码，学习python的人一定知道，可以采用推导式和for啥in啥，对吧？其实html也是可以的，因为基础，所以别急，先熟悉，学会走路，大神估计看到，会呵呵，希望大家指定，继续优化代码，哈哈哈，谢谢。

2.建一个文件夹：如下这些文件放置：

3.效果图：

4.建一个index.html文件，复制如下代码：

<code>

<title>实时节气罗盘文字时钟代码/<title>


<link>
<link>


















/<code>在建一个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 很长对吧？但是搞懂了，就是入门了，哈哈哈。如果能继续优化，那就是大神。