會動的時鐘
1.目標
2.分析
1.最開始頁面不顯示時間，有兩個按鈕 開始 暫停。開始按鈕是可以點擊的，暫停按鈕不能點擊
2.當點擊開始按鈕后，設置開始按鈕不可用，暫停按鈕可用。然后將當前系統時間放到按鈕上面。每隔1秒中更新一下頁面顯示的時間。
3.當點擊暫停按鈕，設置開始按鈕可用，暫停按鈕不可用。同時停止時間的走動
3.步驟：
1.創建一個htm頁面
2.在頁面中書寫html標簽
3.獲取開始按鈕的標簽對象，并給綁定單擊事件，并綁定匿名函數 ??
4.在開始按鈕的單擊事件綁定的函數中設置開始按鈕不可用，暫停按鈕可用
5.獲取當前系統時間 ？？？
6.獲取顯示時間的標簽
7.使用顯示時間的標簽對象調用屬性將當前系統時間顯示到標簽文本中 ??
8.開啟定時器，每隔1秒更新文本時間
9.點擊暫停，給暫停按鈕綁定單擊事件，綁定匿名函數
10.在暫停按鈕的函數中，設置開始按鈕可用，暫停按鈕不可用
11.停止時間走動，取消定時器
4.代碼實現
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 style="color: darkgreen" id="clock">現在的時間</h1>
<hr/>
<input type="button" value="開始" id="btnStart">
<input type="button" value="暫停" id="btnPause" disabled="disabled">
<script type="text/javascript">// 3.獲取開始按鈕的標簽對象，并給綁定單擊事件，并綁定匿名函數 ??let timer;document.getElementById('btnStart').onclick = function () {// 4.在開始按鈕的單擊事件綁定的函數中設置設置開始按鈕不可用，暫停按鈕可用/*讓開始按鈕不可用就是給開始按鈕標簽的disabled屬性值使用js代碼設置為true，表示開始按鈕有disabled即不可用*/document.getElementById('btnStart').disabled = true;/*讓暫停按鈕可用就是給暫停按鈕標簽的disabled屬性值使用js代碼設置為false，表示暫停按鈕沒有disabled即可用*/document.getElementById('btnPause').disabled = false;// 5.獲取當前系統時間let date = new Date();// console.log(date);//5.1將系統時間轉換為能夠看懂的時間//toLocaleString() 據本地時間格式，把 Date 對象轉換為字符串。// console.log(date.toLocaleString());let timeDateStr = date.toLocaleString();// 6.獲取顯示時間的標簽 <h1 style="color: darkgreen" id="clock">現在的時間</h1>// 7.使用顯示時間的標簽對象調用屬性將當前系統時間顯示到標簽文本中 ??//在js中操作標簽的文本使用:標簽對象.innerHTML 獲取文本值，修改文本值：標簽對象.innerHTML=新的值document.getElementById('clock').innerHTML = timeDateStr;// 8.開啟定時器，每隔1秒更新文本時間timer = window.setInterval(function () {//每隔1秒就將當期系統時間賦值給h1標簽文本一次//new Date().toLocaleString() 獲取當前系統時間并轉換為字符串document.getElementById('clock').innerHTML = new Date().toLocaleString();}, 1000);};// 9.點擊暫停，給暫停按鈕綁定單擊事件，綁定匿名函數document.getElementById('btnPause').onclick = function () {// 10.在暫停按鈕的函數中，// 10.1設置開始按鈕可用document.getElementById('btnStart').disabled = false;// 10.2暫停按鈕不可用document.getElementById('btnPause').disabled = true;// 11.停止時間走動，取消定時器window.clearInterval(timer);//timer表示定時器返回值};</script>
</body>
</html>
小結：
1.操作某個標簽的文本使用：標簽對象.innerHTML
 、折射率（ior）)
 葉子游戲新聞)
