整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給大家用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小時內與您取得聯系。
