Js練習
顯示和隱藏，改變display屬性(點選檢視圖片)
關鍵程式碼：
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>
滑鼠滑動更改內容 onmouseover
關鍵：
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 年
- getMonth 月
- getDate 日
- getHours 小時
- getMinutes 分鐘
- getSeconds 秒
- getDay 星期幾（0-6） 星期日為0
| 方法 | 說明 |
|---|---|
| getFullYear() | 從 Date 物件以四位數字返回年份。 |
| getMonth() | 從 Date 物件返回月份 (0 ~ 11)。 |
| getDate() | 從 Date 物件返回一個月中的某一天 (1 ~ 31)。 |
| getDay() | 從 Date 物件返回一週中的某一天 (0 ~ 6)。 |
| getHours() | 返回 Date 物件的小時 (0 ~ 23)。 |
| getMinutes() | 返回 Date 物件的分鐘 (0 ~ 59)。 |
| getSeconds() | 返回 Date 物件的秒數 (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 物件的毫秒(0 ~ 999)。 |
| toString() | 把 Date 物件轉換為字串。 |
| toTimeString() | 把 Date 物件的時間部分轉換為字串。 |
| toDateString() | 把 Date 物件的日期部分轉換為字串。 |
| toUTCString() | 根據世界時，把 Date 物件轉換為字串。 |
| toLocaleString() | 根據本地時間格式，把 Date 物件轉換為字串。 |
| toLocaleTimeString() | 根據本地時間格式，把 Date 物件的時間部分轉換為字串。 |
| toLocaleDateString() | 根據本地時間格式，把 Date 物件的日期部分轉換為字串。 |
var now = new Date();
var time =now.getFullYear() + '年' + now.getMonth() + '月'
+ now.getDate() + '日'
+now.getHours() +'時' + now.getMinutes() +'分' + now.getSeconds() + '秒';- setTomeout(fn, 週期：豪秒): 週期只會執行一次
- setInterval(fn, 週期：豪秒)： 間隔週期一直執行
原始碼：
<!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;
全選和反選的實現
<!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) {
//如果全選的是選中,則把全部設定為選中的狀態,否則設定為未選中
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++) {
//設定為另外的狀態
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>