整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天给大家用canvasu做一个时钟，希望大家自己也能够多练练，学习需要案例的积累。文章的代码自己可以拿去练习下。
主要的知识点:
状态保存 context.save()
状态恢复 context.restore()
旋转 context.rotate(弧度)
平移 context.translate(x,y) x,y 是需要移动到的目标位置坐标
缩放 context.scale(1.5,1.5) 1.5,1.5 是缩放比例, 将原来的画布放大1.5倍
画圆弧 context.arc(x,y,r,初始弧度, 最终弧度)
清空矩形内容context.clearRect(x,y,width,height)
时间(时,分,秒)的角度换算
效果图就是这样：
代码如下：
学习javascript也是有门槛的，就是你的html和css至少还比较熟练，您不能连html这东东是干啥的都不知道就开始学javascript了，学乘除前，学好加减法总是有益无害的。
再说二点建议：
不要急着看一些复杂的javascript网页特效的代码，这样除了打击你的自信心，什么也学不到
看网上什么几天精通javascript的，直接跳过吧，没戏
.说明：
推荐指数：★★★★★
下面的代码注释很详细，慢慢看，仔细享受，有的长，先收藏，慢慢看，通俗易懂，看完就是入门了。
导言：学习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>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 很长对吧？但是搞懂了，就是入门了，哈哈哈。如果能继续优化，那就是大神。
函数
函数的概念：将一段常用代码进行命名，这个名称就叫“函数”。
函数的步骤：（1）先定义函数，函数定义后不能直接执行，必须调用函数，函数才会执行
（2）调用函数：直接写函数名称，后面直接跟一个小括号，小括号中可以有“实参”
函数语法格式：
function functionName([形参1][,形参2][,形参3])
{
实现一个功能的程序代码；
[return 参数]
}
语法说明：
函数名称的命名同变量一样；
形式参数：定义函数的参数就叫“形式参数”，该参数接受调用函数时传递过来的值；
形式参数的命名，同变量也一样；
形式参数不能是具体的值；比如：function getMax(10,20)是错误的
函数定义了，就必须要调用；
调用函数用时，直接写函数名称，后跟小括号，括号中是“实参”；
实际参数：调用函数时，传递的参数叫“实参”，就是“实际的数据”；
形式参数和实际参数的个数和顺序应保持一致；
Return语句：可以调用函数者返回一个结果;
Return语句执行后，立即结束函数的运行；
如果return语句后面，还有其它程序代码，将不再执行；
因此，return语句放在函数的最后面；
JS中是区分大小写的，但关键字一律小写；对象的方法：today.toLocaleString()
全局变量和局部变量
全局变量：可以在任何地方(函数内部和函数外部)使用的变量，就叫“全局变量”；
一般来说，在函数外部定义的变量，是“全局变量”；
省略关键字var定义的变量，也是“全局变量”，一般情况下不要省略；
局部变量：只能在函数内部使用的变量，叫“局部变量”。
注意：在JS中，在函数外部定义的变量，可以在函数内部使用；但在函数内部定义的变量，只能在函数内部使用。
将函数定义作为数据，赋给其它变量
将函数定义，赋给一个基本数据类型的变量
function showInfo()
{
return “我是一个函数”;
document.write(“我是一个函数”);
}
var a = showInfo; //将函数定义(地址)，赋给一个变量，变量a是复合数据类型
document.write(a() );
var b = showInfo(); //将函数的执行结果，赋给一个变量b，变量b是基本数据类型
注意的是：函数名showInfo后不能跟小括号；
如果showInfo后面跟了小括号，就是调用函数，将函数的执行结果，赋给a变量，而不是地址
将函数定义，赋给一个数组元素，那么，该数组元素就是一个函数了；
Var arr = [10,20,30];
arr[1] = showInfo(); //arr[1]的值是“我是一个函数”
arr[2] = showInfo; //arr[2]就变成了函数
document.write( arr[1] );
document.write( arr[2]() ); //既然arr[2]是一个函数，在调用时，一定要写小括号
3）将函数定义，赋给一个对象属性，那么，该对象的属性就是一个函数了；
var obj = {
name:“张三”,
age：30,
show：showInfo //将函数定义，赋给了一对象属性
};
obj.show(); //方法和函数的定义是一样的，只是在不同的地方叫法不一样
document.write( obj.name );
基本数据类型和复合数据类型
基本数据类型：是将变量名称和变量的值，都存入“快速内存”“栈内存”；
将基本数据类型的变量，赋给其它变量，是将原来变量的值“复制”一份，放到了新变量中，因此，这两个变量没有任何关系，换句话说：修改其中一个变量的值，另一个变量的值不会改变；
var a = 10; //基本数据类型，在赋值是地，是传值
var b = a; //将a的值，复制一份，传给b
a = 100; //给变量a重新赋值
document.write(b); //求变量b的值，是否会改变
引用数据类型(复合数据类型)：它的存储分两个部分，一是把数据存到“慢内存”“堆内存”，二是将变量名称和数据地址存到“快速内存”“栈内存”。
换句话说：就是新变量和旧变量，同时指向了同一个数据地址，只是变量名称不一样。
var arr1 = [1,10,20,30];
var arr1 = new Array(1,10,20,30);
var arr2 = arr1; //将arr1赋给了arr2，其实，这里传的数据地址，并不是具体的数据
arr1[0] = 100; //对arr1中的第1个元素，重新赋值
document.write( arr2[0] );
补充知识点：for in循环
For ……in主要是循环或遍历，数组元素或对象的属性。
注意：如果遍历数组的话，未定义的数组元素，不会输出；只会输出有效数据。
语法结构：
for(index in arr)
{
document.write( arr[index] );
}
参数说明：
arr代表一个数组；
index代表一个数组元素的下标；
举例：
var arr = [1,2,,,,,3,,,,,,,,,,,,,,,,,4];
遍历对象属性
for(name in window)
{
document.write( name );
}
参数说明：
Name就是遍历对象，返回的属性名称；
Window是一个窗口，代表当前浏览器窗口，比如：document、 history、screen、 navigator等
一个函数对应一个函数对象。
arguments属性：函数对象的一个数组对象属性，包含了所有接收到的参数；
arguments.length：取得所有接收到的参数的个数
arguments是在函数内部来使用；
3.对象
对象是一组属性和方法的集合。
JS中的对象分类：
自定义对象：自己根据需要定义自己的对象；var obj = {}
JS内置对象：
String：字符串对象，提供字符串操作的属性和方法。比如：length
Array：数组对象，提供数组操作的属性和方法。比如：length
Date：日期时间对象，提供访问系统时间日期的信息。比如：getDay()、toLocaleString()
Math：数学对象，提供数学处理的方法。比如：Math.floor()、Math.ceil()、Math.round()
Number：数字对象。比如：toFixed()
Function：函数对象。比如：arguments数组对象
Event：事件对象。比如：onMouseOver、onMouseOut、onClick、onLoad
正则对象：正则表达式，对数据进行更严格的验证。（就业班讲）
BOM和DOM对象（核心）
BOM提供了访问和操作浏览器各组件的途径；
DOM提供了访问和操作网页中各HTML元素的途径
对象就是一组属性和方法的集合。
一、创建自定义对象
（1）使用new关键字和Object()来创建一个空对象，然后添加属性和方法
方法就是函数，在对象中的函数，就叫“方法”。
Var obj = new Object();
obj.name = “张三”; //增加一个属性，并赋值
obj.sex = “男”;
obj.age = 30;
obj.isMarried = true;
obj.school = null;
obj.showInfo = function(){
var str = this.name+“的基本资料”;
str += “<br>姓名：”+this.name;
}
onload：当网页加载完成，去执行JS程序代码。
当网页的中所有HTML标记都加载完成后，才会触发onLoad事件；
触发onLoad事件后，会去调用相应的JS程序。
只要<body>中有一个HTML标记没有显示出来，onLoad就不会发生
<body>……</body>……onload事件……调用JS函数——document.write
（2）使用{}来创建对象
Var obj = {
name:“张三”,
sex:true
}
一个字符串的变量，就是一个String对象。
一、创建String对象的方法
1）使用new关键字和String()构造函数来创建(不常用)
var strObj = new String(“Welcome”);
var len = strObj.length; //获得字符串的长度
定义一个字符串变量，就对应一个String对象（最常用）
var str = “重蔚自留地”;
var len = str.length;
二、String对象的属性和方法
length：获得字符串的长度，var len = str.length
注意：JS的length是指字符个数，并不是按字节来计算。
charAt(index)：返回指定位置的一个字符。
提示：String中的下标与Array中的下标一样。
index：表示指定位置的下标(索引号)
举例：
var str = “Welcome”;
var str1 = str.charAt(str.length-1) //取得最后一个字符
indexOf(substr[,startIndex])：
描述：从原字符串中，查找子字符串，如果找到，返回起点索引号；如果未找到，返回-1。
参数：
substr：子字符串
startIndex：开始查找的位置索引号。如果省略，则从0开始查找。
lastIndexOf(substr[,startIndex])
描述：在原字符串中，从右往左搜索子字符串，如果没有找到，则返回-1。
参数：同indeOf()方法一样
substr(startIndex[,length])
描述：返回一个子字符串。
参数：
startIndex：开始索引号
length：返回几个字符。如果length省略，返回到结束的所有字符。
举例：
var str = “welcome”;
var str2 = str.substr(3,2); // str2 = co
substring(startIndex[,endIndex])
描述：返回索引号从startIndex到索引号endIndex之间的一个子字符串。
参数：
startIndex：开始索引号
endIndex：结束索引号，如果省略，返回到结尾的所有字符。
split(separator)
描述：将一个字符串，用指定分割符separator分成一个数组。
参数：separator就是一个分割符
举例：
Var str = “星期一,星期二,星期三”;
Var arr = str.split(“,”);
search(substr)
描述：查找指定的子字符串，如果没有找到，返回-1
replace(substr,replacement)
描述：在原始字符串中，将一个指定的子字符串，替换成指定的内容。
参数：
Substr：要查找的内容
Replacement：要替换的内容
注意：如果不使用“正则表达式”，则只能替换一次。
var new = str.replace(/X/g,”itcast”); //JS中的正则，是放在//中间的，不能加引号。g参数代表全部替换。
toLowerCase()
描述：转成小写
举例：str.toLowerCase()
toUpperCase()
描述：转成大写
举例：str.toUpperCase()
localeCompare(str)
描述：对字符串使用本地规则进行比较。我们使用的操作系统是中文操作系统，中文操作系统默认的排序规则就按“拼音”先后来排序的。
str1.localeCompare(str2)
如果str1 > str2 则返回一个大于0的值
如果str1=str2 则返回一个等于0的值
如果str1<str2 则返回一个小于0的值
onchange：当选择内容发生改变时，去调用JS验证函数。
length：取得数组元素的个数
shift()：删除第一个数组元素，数组的长度－1。
pop()：删除最后一个数组元素，数组的长度－1
unshift()：在开头添加一个数组元素，数组的长度+1
push()：在最后添加一个数组元素，数组的长度+1
注意：delete删除的是数组元素的内容，而shift()删除的是内容和下标。
join([separator))：将数组各个元素，用指定的连接符，连成一个字符串。与split()正好相反
separator是可选项，如果省略，则用逗号连接。
reverse()：反转数组中各个元素，颠倒顺序。
sort()
描述：对数组中各个元素进行排序，默认是按字母的先后顺序排列。
格式：arr.sort([orderby])
参数：orderby是可选参数，它指定排序的规则，一般是一个函数。
（1）对数值进行排序
orderby函数必须接收两个参数，比如a和b;
orderby函数中使用return返回值；
如果a-b>0，返回1
如果a-b=0，返回0
如果a-b<0，返回-1
var arr = [1,2,10,12,3,31,15,19,25,39];
arr.sort(orderby);
function orderby(a,b)
{
return a-b;
}
document.write(arr);
一、创建Date对象的实例
（1）使用new关键字和Date()构造函数来创建
Var today = new Date(); //注意：如果不带参数，则创建一个当前系统时间的实例
（2）指定一个日期时间字符串参数
Var yestoday = new Date(“1990/10/23 10:09:00”); //可以创建基于某一个时间的一对象实例
二、Date对象的方法
getFullYear()：取出四位的年份
getMonth()：取出月份，取值0-11
getDate()：取出天数
getHours()：取出小时数
getSeconds()：取出秒数
getMinutes()：取出分钟数
getDay()：取出星期值，取值：0-6
getTime()：取出距离1970年1月1日，0时0分0秒的毫秒数
toLocaleString()：转成字符串
*请认真填写需求信息，我们会在24小时内与您取得联系。
