關鍵代碼：
e.style.display = "block";e.style.display = "none";源碼：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>顯示和隱藏</title> <script type="text/javascript"> function showPicture(){ //普通方式獲得控件實例 var e = document.getElementById("myimg"); e.style.display = "block"; } function hidePicture(){ //querySelector是html5增加的 //id前面得寫#,class前面得寫 document.querySelector("#myimg").style.display = "none"; //標簽直接寫即可,獲取到第一個img標簽 //document.querySelector("img").style.display = "none"; } </script> </head> <body> <a href="javascript:void(0);"onclick="showPicture()">查看圖片</a> <a href="javascript:void(0);"onclick="hidePicture()">隱藏圖片</a> <br /> <img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;" > </body></html>關鍵：
onmouse事件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function moveToBlue(){ var e = document.querySelector("#btn_blue"); var e2 = document.querySelector("#btn_green"); var div = document.querySelector("#content"); e.style.border = "1px solid #ccc"; e.style.backgroundColor = "white"; e2.style.border = "none"; e2.style.backgroundColor = "none"; div.style.backgroundColor = "blue"; } function moveToGreen(){ var e = document.querySelector("#btn_blue"); var e2 = document.querySelector("#btn_green"); var div = document.querySelector("#content"); e2.style.border = "1px solid #ccc"; e2.style.backgroundColor = "white"; e.style.border = "none"; e.style.backgroundColor = "none"; div.style.backgroundColor = "green"; } </script> </head> <body> <div style="width: 100px;height: 50px;"> <button id="btn_blue" style="width: 45px;"onmousemove="moveToBlue()">藍色</button> <button id="btn_green" style="width: 45px;"onmousemove="moveToGreen()">綠色</button> <div id="content" style="background-color: blue;width: auto;height: 50px;"></div> </div> <br /> <img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;"> </body></html>關鍵代碼：
Js中內置了Date對象
| 方法 | 說明 |
|---|---|
| getFullYear() | 從 Date 對象以四位數(shù)字返回年份。 |
| getMonth() | 從 Date 對象返回月份 (0 ~ 11)。 |
| getDate() | 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 |
| getDay() | 從 Date 對象返回一周中的某一天 (0 ~ 6)。 |
| getHours() | 返回 Date 對象的小時 (0 ~ 23)。 |
| getMinutes() | 返回 Date 對象的分鐘 (0 ~ 59)。 |
| getSeconds() | 返回 Date 對象的秒數(shù) (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 對象的毫秒(0 ~ 999)。 |
| toString() | 把 Date 對象轉換為字符串。 |
| toTimeString() | 把 Date 對象的時間部分轉換為字符串。 |
| toDateString() | 把 Date 對象的日期部分轉換為字符串。 |
| toUTCString() | 根據(jù)世界時，把 Date 對象轉換為字符串。 |
| toLocaleString() | 根據(jù)本地時間格式，把 Date 對象轉換為字符串。 |
| toLocaleTimeString() | 根據(jù)本地時間格式，把 Date 對象的時間部分轉換為字符串。 |
| toLocaleDateString() | 根據(jù)本地時間格式，把 Date 對象的日期部分轉換為字符串。 |
var now = new Date(); var time =now.getFullYear() + '年' + now.getMonth() + '月' + now.getDate() + '日' +now.getHours() +'時' + now.getMinutes() +'分' + now.getSeconds() + '秒';源碼：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>時間自動更新</title> </head> <body> <p></p> <script type="text/javascript"> function setTime() { var date = new Date(); var time = date.toTimeString(); document.querySelector("p").innerText = time; } setTime(); //setIime不能加上括號 // setInterval(setTime, 1000); //加括號得得在外層加雙引號或者單引號 setInterval("setTime()", 1000); </script> </body></html>源碼（es拼接字符串）：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p></p> <script type="text/javascript"> function setTime() { var now = new Date(); // 通過css的選擇符獲得html元素 var timer1 = document.querySelector('p'); var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); //es6中模板字符串,拼接 timer1.innerText = `${year}年${month}月${date}日${hours}時${minutes}分${seconds}秒`; } setTime(); //setIime不能加上括號 // setInterval(setTime, 1000); //加括號得得在外層加雙引號或者單引號 setInterval("setTime()", 1000); </script> </body></html>關鍵代碼：e.checked=true;
全選和反選的實現(xiàn)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function selectAll() { var hobbys = document.getElementsByName("hobby"); var btn = document.getElementById("checkall"); //原生for,推薦使用這一種 /* for (var i = 0; i < hobbys.length; i++) { if (btn.checked) { hobbys[i].checked = true; } else { hobbys[i].checked = false; } } */ //使用foreach,使用HBuilderX,在內置的瀏覽器會報錯,提示foreach不起作用 //使用谷歌瀏覽器打開則沒有問題,下面使用lambda也是如此情況,可能是HBuilder的bug hobbys.forEach(function(hobby) { //如果全選的是選中,則把全部設置為選中的狀態(tài),否則設置為未選中 if (btn.checked) { hobby.checked = true; } else { hobby.checked = false; } }); //使用lambda /* hobbys.forEach((hobby) => { console.log(hobby); if (btn.checked) { hobby.checked = true; } else { hobby.checked = false; } }); */ } function selectRevese() { var hobbys = document.getElementsByName("hobby"); for (var i = 0; i < hobbys.length; i++) { //設置為另外的狀態(tài) hobbys[i].checked = !hobbys[i].checked; } } </script> </head> <body> <input type="checkbox" name="hobby">讀書<br><br> <input type="checkbox" name="hobby">電影<br><br> <input type="checkbox" name="hobby">游戲<br><br> <input type="checkbox" name="hobby">游泳<br><br> <input type="checkbox" name="hobby">寫代碼<br><br> <input type="checkbox" id="checkall" onclick="selectAll()">全選 </input> <button type="button" onclick="selectRevese()">反選</button> </body></html>