网站首页 > 技术文章 正文
1.说明：
推荐指数：★★★★★
下面的代码注释很详细，慢慢看，仔细享受，有的长，先收藏，慢慢看，通俗易懂，看完就是入门了。
导言：学习python，也是需要了解其他变成的语言的相关指示，计算机编程语言是相通的，vue也的确比较火，所以带大家熟悉一下，别怕，很简单，小白都能看得懂，有注释。当然，本代码还是可以优化的，看到css一大串的类似代码，学习python的人一定知道，可以采用推导式和for啥in啥，对吧？其实html也是可以的，因为基础，所以别急，先熟悉，学会走路，大神估计看到，会呵呵，希望大家指定，继续优化代码，哈哈哈，谢谢。
2.建一个文件夹：如下这些文件放置：
3.效果图：
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 很长对吧？但是搞懂了，就是入门了，哈哈哈。如果能继续优化，那就是大神。
猜你喜欢
- 2024-11-15 CSS3+JS实现静态圆形进度条（css 圆形进度条）
- 2024-11-15 前端必读榜——如何在React中用SpreadJS导入/导出Excel文件
- 2024-11-15 Svelte教程翻译(六、生命周期)（servelet生命周期阶段）
- 2024-11-15 uniapp(Vue) 实现可粘贴的 个性化验证码 输入框
- 2024-11-15 国产开源，GoLang也可以高效处理Excel的利器了
- 2024-11-15 css精髓:这些布局你都学废了吗?（css布局技术）
- 2024-11-15 Java 中的 AI:使用 Spring Boot 和 LangChain 构建 ChatGPT 克隆
- 2024-11-15 仅用18行JavaScript实现一个倒数计时器
- 2024-11-15 Web上的图片技巧「前端篇」（web网页图片）
- 2024-11-15 55个JS代码让你轻松当大神（完整的js代码）
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-