學(xué)完HTML5，用Canvas做了一個時鐘，代碼一起分享

天給大家用canvasu做一個時鐘，希望大家自己也能夠多練練，學(xué)習(xí)需要案例的積累。文章的代碼自己可以拿去練習(xí)下。

這里還是要說一下我的前端學(xué)習(xí)群：594959296，從我一個人到現(xiàn)在的1369人都是我每篇文章每個特效聚集的小伙伴，可以說都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來，歡迎初學(xué)和進(jìn)階中的小伙伴

主要的知識點:

狀態(tài)保存 context.save()
狀態(tài)恢復(fù) context.restore()
旋轉(zhuǎn) context.rotate(弧度)
平移 context.translate(x,y) x,y 是需要移動到的目標(biāo)位置坐標(biāo)
縮放 context.scale(1.5,1.5) 1.5,1.5 是縮放比例, 將原來的畫布放大1.5倍
畫圓弧 context.arc(x,y,r,初始弧度, 最終弧度)
清空矩形內(nèi)容context.clearRect(x,y,width,height)
時間(時,分,秒)的角度換算

效果圖就是這樣：

代碼如下：

學(xué)習(xí)javascript也是有門檻的，就是你的html和css至少還比較熟練，您不能連html這東東是干啥的都不知道就開始學(xué)javascript了，學(xué)乘除前，學(xué)好加減法總是有益無害的。

再說二點建議：

不要急著看一些復(fù)雜的javascript網(wǎng)頁特效的代碼，這樣除了打擊你的自信心，什么也學(xué)不到
看網(wǎng)上什么幾天精通javascript的，直接跳過吧，沒戲

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗可以關(guān)注我的微信公眾號：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

.說明：

推薦指數(shù)：★★★★★

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

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

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

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

3.效果圖：

very beautiful！

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

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

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

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

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

<div id="sum">
  <!--當(dāng)前時間向右的指示的水平線條 -->
  <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>

  <!-- 節(jié)氣 -->
  <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
      // 獲取到的數(shù)組（循環(huán)中）
      var arrayOne
      // 獲取數(shù)組轉(zhuǎn)換的字符串（帶','需要處理的）
      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(',', '')
          // 添加數(shù)組元素
          this.Arrays.push(newObject)
        }
        // 第一列個數(shù)和別的列字?jǐn)?shù)不一樣
        if (i === 0) {
          a += 12
          b += 20
        } else {
          a += 20
          b += 20
        }

      }

    },
    hideMsg: function() {
      this.Arrays = []
      this.NllNumber = []
    }
  }
})

// 秒數(shù)圈動作控制
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()

// 節(jié)氣控制
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文件，官網(wǎng)上有的，也可以外部在線導(dǎo)入，直接復(fù)制可以。

7 jieqi2.css文件，代碼：

* {
  padding: 0;
  margin: 0;
}
/* 此部分樣式包括總，時，分,秒 */
body {
  /*注意css的顏色設(shè)定法，可以直接輸入英文，比如：red；或者顏色的十六進(jìn)制，還有這種*/
  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圈---秒數(shù)控制樣式 */
#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);}

/*---當(dāng)前時間向右的水平線條設(shè)置 */
#shade {
  position: absolute;
  list-style-type: none;
  background: #CAE1FF;
  /*當(dāng)前時間顏色向右水平條框*/
  width: 300px;
  height: 2px;
  left: 350px;}

8 jieqi3.css文件，代碼：

/* 此部分樣式寫年，月，節(jié)氣，日 */
/*圓心點---年分控制 */
#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=節(jié)氣*/
#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號之間的距離稍微寬些*/

/*--最外圈--上午/白天和下午/晚上的設(shè)置*/
#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;
  /*顏色設(shè)置可以是英文，可以是十六進(jìn)制*/
  color:red;
  height: 20px;}
#AP ul {
  position: relative;
  left: -40px;
  top: -10px;}
/*上午和下午的設(shè)置，半徑270px,改成最外邊*，改成白天和晚上/
/*上午的設(shè)置*/
#AP ul li:nth-child(1) {
  transform: rotate(0deg) translateX(270px);}
/*下午的設(shè)置*/
#AP ul li:nth-child(2) {
  transform: rotate(180deg) translateX(270px);}

9 很長對吧？但是搞懂了，就是入門了，哈哈哈。如果能繼續(xù)優(yōu)化，那就是大神。

.昨日回顧

函數(shù)

函數(shù)的概念：將一段常用代碼進(jìn)行命名，這個名稱就叫“函數(shù)”。

函數(shù)的步驟：（1）先定義函數(shù)，函數(shù)定義后不能直接執(zhí)行，必須調(diào)用函數(shù)，函數(shù)才會執(zhí)行

（2）調(diào)用函數(shù)：直接寫函數(shù)名稱，后面直接跟一個小括號，小括號中可以有“實參”

函數(shù)語法格式：

function functionName([形參1][,形參2][,形參3])

{

實現(xiàn)一個功能的程序代碼；

[return 參數(shù)]

}

語法說明：

函數(shù)名稱的命名同變量一樣；

形式參數(shù)：定義函數(shù)的參數(shù)就叫“形式參數(shù)”，該參數(shù)接受調(diào)用函數(shù)時傳遞過來的值；

形式參數(shù)的命名，同變量也一樣；

形式參數(shù)不能是具體的值；比如：function getMax(10,20)是錯誤的

函數(shù)定義了，就必須要調(diào)用；

調(diào)用函數(shù)用時，直接寫函數(shù)名稱，后跟小括號，括號中是“實參”；

實際參數(shù)：調(diào)用函數(shù)時，傳遞的參數(shù)叫“實參”，就是“實際的數(shù)據(jù)”；

形式參數(shù)和實際參數(shù)的個數(shù)和順序應(yīng)保持一致；

Return語句：可以調(diào)用函數(shù)者返回一個結(jié)果;

Return語句執(zhí)行后，立即結(jié)束函數(shù)的運行；

如果return語句后面，還有其它程序代碼，將不再執(zhí)行；

因此，return語句放在函數(shù)的最后面；

JS中是區(qū)分大小寫的，但關(guān)鍵字一律小寫；對象的方法：today.toLocaleString()

全局變量和局部變量

全局變量：可以在任何地方(函數(shù)內(nèi)部和函數(shù)外部)使用的變量，就叫“全局變量”；

一般來說，在函數(shù)外部定義的變量，是“全局變量”；

省略關(guān)鍵字var定義的變量，也是“全局變量”，一般情況下不要省略；

局部變量：只能在函數(shù)內(nèi)部使用的變量，叫“局部變量”。

注意：在JS中，在函數(shù)外部定義的變量，可以在函數(shù)內(nèi)部使用；但在函數(shù)內(nèi)部定義的變量，只能在函數(shù)內(nèi)部使用。

將函數(shù)定義作為數(shù)據(jù)，賦給其它變量

將函數(shù)定義，賦給一個基本數(shù)據(jù)類型的變量

function showInfo()

{

return “我是一個函數(shù)”;

document.write(“我是一個函數(shù)”);

}

var a = showInfo; //將函數(shù)定義(地址)，賦給一個變量，變量a是復(fù)合數(shù)據(jù)類型

document.write(a() );

var b = showInfo(); //將函數(shù)的執(zhí)行結(jié)果，賦給一個變量b，變量b是基本數(shù)據(jù)類型

注意的是：函數(shù)名showInfo后不能跟小括號；

如果showInfo后面跟了小括號，就是調(diào)用函數(shù)，將函數(shù)的執(zhí)行結(jié)果，賦給a變量，而不是地址

將函數(shù)定義，賦給一個數(shù)組元素，那么，該數(shù)組元素就是一個函數(shù)了；

Var arr = [10,20,30];

arr[1] = showInfo(); //arr[1]的值是“我是一個函數(shù)”

arr[2] = showInfo; //arr[2]就變成了函數(shù)

document.write( arr[1] );

document.write( arr[2]() ); //既然arr[2]是一個函數(shù)，在調(diào)用時，一定要寫小括號

3）將函數(shù)定義，賦給一個對象屬性，那么，該對象的屬性就是一個函數(shù)了；

var obj = {

name:“張三”,

age：30,

show：showInfo //將函數(shù)定義，賦給了一對象屬性

};

obj.show(); //方法和函數(shù)的定義是一樣的，只是在不同的地方叫法不一樣

document.write( obj.name );

基本數(shù)據(jù)類型和復(fù)合數(shù)據(jù)類型

基本數(shù)據(jù)類型：是將變量名稱和變量的值，都存入“快速內(nèi)存”“棧內(nèi)存”；

將基本數(shù)據(jù)類型的變量，賦給其它變量，是將原來變量的值“復(fù)制”一份，放到了新變量中，因此，這兩個變量沒有任何關(guān)系，換句話說：修改其中一個變量的值，另一個變量的值不會改變；

var a = 10; //基本數(shù)據(jù)類型，在賦值是地，是傳值

var b = a; //將a的值，復(fù)制一份，傳給b

a = 100; //給變量a重新賦值

document.write(b); //求變量b的值，是否會改變

引用數(shù)據(jù)類型(復(fù)合數(shù)據(jù)類型)：它的存儲分兩個部分，一是把數(shù)據(jù)存到“慢內(nèi)存”“堆內(nèi)存”，二是將變量名稱和數(shù)據(jù)地址存到“快速內(nèi)存”“棧內(nèi)存”。

換句話說：就是新變量和舊變量，同時指向了同一個數(shù)據(jù)地址，只是變量名稱不一樣。

var arr1 = [1,10,20,30];

var arr1 = new Array(1,10,20,30);

var arr2 = arr1; //將arr1賦給了arr2，其實，這里傳的數(shù)據(jù)地址，并不是具體的數(shù)據(jù)

arr1[0] = 100; //對arr1中的第1個元素，重新賦值

document.write( arr2[0] );

補(bǔ)充知識點：for in循環(huán)

For ……in主要是循環(huán)或遍歷，數(shù)組元素或對象的屬性。

注意：如果遍歷數(shù)組的話，未定義的數(shù)組元素，不會輸出；只會輸出有效數(shù)據(jù)。

語法結(jié)構(gòu)：

for(index in arr)

{

document.write( arr[index] );

}

參數(shù)說明：

arr代表一個數(shù)組；

index代表一個數(shù)組元素的下標(biāo)；

舉例：

var arr = [1,2,,,,,3,,,,,,,,,,,,,,,,,4];

遍歷對象屬性

for(name in window)

{

document.write( name );

}

參數(shù)說明：

Name就是遍歷對象，返回的屬性名稱；

Window是一個窗口，代表當(dāng)前瀏覽器窗口，比如：document、 history、screen、 navigator等

2.函數(shù)對象

一個函數(shù)對應(yīng)一個函數(shù)對象。

arguments屬性：函數(shù)對象的一個數(shù)組對象屬性，包含了所有接收到的參數(shù)；

arguments.length：取得所有接收到的參數(shù)的個數(shù)

arguments是在函數(shù)內(nèi)部來使用；

3.對象

對象是一組屬性和方法的集合。

JS中的對象分類：

自定義對象：自己根據(jù)需要定義自己的對象；var obj = {}

JS內(nèi)置對象：

String：字符串對象，提供字符串操作的屬性和方法。比如：length

Array：數(shù)組對象，提供數(shù)組操作的屬性和方法。比如：length

Date：日期時間對象，提供訪問系統(tǒng)時間日期的信息。比如：getDay()、toLocaleString()

Math：數(shù)學(xué)對象，提供數(shù)學(xué)處理的方法。比如：Math.floor()、Math.ceil()、Math.round()

Number：數(shù)字對象。比如：toFixed()

Function：函數(shù)對象。比如：arguments數(shù)組對象

Event：事件對象。比如：onMouseOver、onMouseOut、onClick、onLoad

正則對象：正則表達(dá)式，對數(shù)據(jù)進(jìn)行更嚴(yán)格的驗證。（就業(yè)班講）

BOM和DOM對象（核心）

BOM提供了訪問和操作瀏覽器各組件的途徑；

DOM提供了訪問和操作網(wǎng)頁中各HTML元素的途徑

4.自定義對象

對象就是一組屬性和方法的集合。

一、創(chuàng)建自定義對象

（1）使用new關(guān)鍵字和Object()來創(chuàng)建一個空對象，然后添加屬性和方法

方法就是函數(shù)，在對象中的函數(shù)，就叫“方法”。

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：當(dāng)網(wǎng)頁加載完成，去執(zhí)行JS程序代碼。

當(dāng)網(wǎng)頁的中所有HTML標(biāo)記都加載完成后，才會觸發(fā)onLoad事件；

觸發(fā)onLoad事件后，會去調(diào)用相應(yīng)的JS程序。

只要<body>中有一個HTML標(biāo)記沒有顯示出來，onLoad就不會發(fā)生

<body>……</body>……onload事件……調(diào)用JS函數(shù)——document.write

（2）使用{}來創(chuàng)建對象

Var obj = {

name:“張三”,

sex:true

}

5.JS的內(nèi)置對象——String對象

一個字符串的變量，就是一個String對象。

一、創(chuàng)建String對象的方法

1）使用new關(guān)鍵字和String()構(gòu)造函數(shù)來創(chuàng)建(不常用)

var strObj = new String(“Welcome”);

var len = strObj.length; //獲得字符串的長度

定義一個字符串變量，就對應(yīng)一個String對象（最常用）

var str = “重蔚自留地”;

var len = str.length;

二、String對象的屬性和方法

length：獲得字符串的長度，var len = str.length

注意：JS的length是指字符個數(shù)，并不是按字節(jié)來計算。

charAt(index)：返回指定位置的一個字符。

提示：String中的下標(biāo)與Array中的下標(biāo)一樣。

index：表示指定位置的下標(biāo)(索引號)

舉例：

var str = “Welcome”;

var str1 = str.charAt(str.length-1) //取得最后一個字符

indexOf(substr[,startIndex])：

描述：從原字符串中，查找子字符串，如果找到，返回起點索引號；如果未找到，返回-1。

參數(shù)：

substr：子字符串

startIndex：開始查找的位置索引號。如果省略，則從0開始查找。

lastIndexOf(substr[,startIndex])

描述：在原字符串中，從右往左搜索子字符串，如果沒有找到，則返回-1。

參數(shù)：同indeOf()方法一樣

substr(startIndex[,length])

描述：返回一個子字符串。

參數(shù)：

startIndex：開始索引號

length：返回幾個字符。如果length省略，返回到結(jié)束的所有字符。

舉例：

var str = “welcome”;

var str2 = str.substr(3,2); // str2 = co

substring(startIndex[,endIndex])

描述：返回索引號從startIndex到索引號endIndex之間的一個子字符串。

參數(shù)：

startIndex：開始索引號

endIndex：結(jié)束索引號，如果省略，返回到結(jié)尾的所有字符。

split(separator)

描述：將一個字符串，用指定分割符separator分成一個數(shù)組。

參數(shù)：separator就是一個分割符

舉例：

Var str = “星期一,星期二,星期三”;

Var arr = str.split(“,”);

search(substr)

描述：查找指定的子字符串，如果沒有找到，返回-1

replace(substr,replacement)

描述：在原始字符串中，將一個指定的子字符串，替換成指定的內(nèi)容。

參數(shù)：

Substr：要查找的內(nèi)容

Replacement：要替換的內(nèi)容

注意：如果不使用“正則表達(dá)式”，則只能替換一次。

var new = str.replace(/X/g,”itcast”); //JS中的正則，是放在//中間的，不能加引號。g參數(shù)代表全部替換。

toLowerCase()

描述：轉(zhuǎn)成小寫

舉例：str.toLowerCase()

toUpperCase()

描述：轉(zhuǎn)成大寫

舉例：str.toUpperCase()

localeCompare(str)

描述：對字符串使用本地規(guī)則進(jìn)行比較。我們使用的操作系統(tǒng)是中文操作系統(tǒng)，中文操作系統(tǒng)默認(rèn)的排序規(guī)則就按“拼音”先后來排序的。

str1.localeCompare(str2)

如果str1 > str2 則返回一個大于0的值

如果str1=str2 則返回一個等于0的值

如果str1<str2 則返回一個小于0的值

onchange：當(dāng)選擇內(nèi)容發(fā)生改變時，去調(diào)用JS驗證函數(shù)。

6.Array對象

length：取得數(shù)組元素的個數(shù)

shift()：刪除第一個數(shù)組元素，數(shù)組的長度－1。

pop()：刪除最后一個數(shù)組元素，數(shù)組的長度－1

unshift()：在開頭添加一個數(shù)組元素，數(shù)組的長度+1

push()：在最后添加一個數(shù)組元素，數(shù)組的長度+1

注意：delete刪除的是數(shù)組元素的內(nèi)容，而shift()刪除的是內(nèi)容和下標(biāo)。

join([separator))：將數(shù)組各個元素，用指定的連接符，連成一個字符串。與split()正好相反

separator是可選項，如果省略，則用逗號連接。

reverse()：反轉(zhuǎn)數(shù)組中各個元素，顛倒順序。

sort()

描述：對數(shù)組中各個元素進(jìn)行排序，默認(rèn)是按字母的先后順序排列。

格式：arr.sort([orderby])

參數(shù)：orderby是可選參數(shù)，它指定排序的規(guī)則，一般是一個函數(shù)。

（1）對數(shù)值進(jìn)行排序

orderby函數(shù)必須接收兩個參數(shù)，比如a和b;

orderby函數(shù)中使用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);

7.Date對象

一、創(chuàng)建Date對象的實例

（1）使用new關(guān)鍵字和Date()構(gòu)造函數(shù)來創(chuàng)建

Var today = new Date(); //注意：如果不帶參數(shù)，則創(chuàng)建一個當(dāng)前系統(tǒng)時間的實例

（2）指定一個日期時間字符串參數(shù)

Var yestoday = new Date(“1990/10/23 10:09:00”); //可以創(chuàng)建基于某一個時間的一對象實例

二、Date對象的方法

getFullYear()：取出四位的年份

getMonth()：取出月份，取值0-11

getDate()：取出天數(shù)

getHours()：取出小時數(shù)

getSeconds()：取出秒數(shù)

getMinutes()：取出分鐘數(shù)

getDay()：取出星期值，取值：0-6

getTime()：取出距離1970年1月1日，0時0分0秒的毫秒數(shù)

toLocaleString()：轉(zhuǎn)成字符串

在線咨詢

上一篇：H5棋牌百問百答-做H5棋牌項目必讀！
下一篇：HTML 表格標(biāo)簽

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

學(xué)完HTML5，用Canvas做了一個時鐘，代碼一起分享

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗可以關(guān)注我的微信公眾號：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

.昨日回顧

2.函數(shù)對象

4.自定義對象

5.JS的內(nèi)置對象——String對象

6.Array對象

7.Date對象

您的項目需求