JavaScript學習 第四周（完結）
阿新 • • 發佈：2022-04-04
表單物件form
- HTML的表單物件（按鈕，選項等）可以當做js的物件來處理。
| form | 作用 |
|---|---|
| button | 按鈕 |
| checkbox | 多選 |
| radio | 單選 |
| reset | 將這個頁面所有互動過的部品重置 |
| submit | 提交 |
| text | 文字條？？ |
| hidden | |
| passwd | 密碼 |
| textarea | |
| select | 選項（伴隨option使用） |
- 使用時，把這些東西夾在“< form ></ form >”裡面，並且需要設定好form的name屬性。
舉個例子
<body> <form name="weightForm"> 男性:<input type="radio" name="sex" checked>//checked是預設選中之意。 女性:<input type="radio" name="sex"><br> 身高:<input type="text" name="height">cm<br> <input type="button" value="計算" name="calc"><br> 標準體重: <input type="text" name="weight" readonly>//readonly是隻讀之意，意味著這個文字框只能用來顯示。 </form> </body>
- 如果想指定某一個值，需要按這樣的順序：
document.form名.部品名.value
例如，document.weightForm.height.value 這樣就指定了身高這個值。
radio單選與if判斷的聯動。
- 多個radio可以擁有同一個name。但是同name的radio中只能有一個被勾選。
- 使用if條件判斷時檢查checked屬性:
如果checked，則返回值為1.
document.form名.radio名[序號].checked
<script> var weight; if(document.weightForm.sex[0].checked){//[]內的數字是第幾個的意思，0是第一個。 weight = (height - 80)*0.7; }else{ weight = (height-70)*0.6; } </script>
結合起來的一個小程式：
<head> <script> function stdWeight(){ var height,weight; height = Number(document.weightForm.height.value); //把“height輸入框內的值數字化。” if(document.weightForm.sex[0].checked){//[]內的數字是第幾個的意思，0是第一個。 weight = (height - 80)*0.7; }else{ weight = (height-70)*0.6; } document.weightForm.weight.value = weight; } </script> </head>
<body>
<form name="weightForm">
男性:<input type="radio" name="sex" checked>//checked是預設選中之意。
女性:<input type="radio" name="sex"><br>
身高:<input type="text" name="height">cm<br>
<input type="button" value="計算" name="calc" onclick="stdWeight()"><br>//點選時啟用這個函式。
標準體重: <input type="text" name="weight" readonly>
</form>
</body>
this.form：快捷短語
- 在< form>之間，可以使用this.form來代指【document.form名】
- 函式的自變數也可以是form，所以可以使用這個小技巧來避免繁瑣的文字。
- 通過用自變數指定this.form並呼叫函式，可以從表單層次對錶單的各個部件進行指定。(不再需要document層級)
於是上一個小程式可以寫為：
<script>
function stdWeight(myForm){//這個函式的自變數是一個form。
var height,weight;
height = Number(myForm.height.value);
if(myForm.sex[0].checked){
weight = (height - 80)*0.7;
}else{
weight = (height-70)*0.6;
}
myForm.weight.value = weight;
}
</script>
<input type="button" value="計算" name="calc" onclick="stdWeight(this.form)"><br>
具體體現在：document.weightForm --> this.form/myForm
setTimeout 方法
-
是window物件的方法
-
在指定的時間後執行處理(僅一次)
<script>
var timer;
timer = window.setTimeout("alert('5秒了')",5000)//毫秒為單位
</script>
以上程式的結果是：五秒後彈出一個視窗。
用遞迴可以完成一些關於時間的操作，例如：實時顯示時間。
實時顯示時間
<script>
var timer;
var i;
window.onload = dClock;//用於開幕雷擊
function dClock(){
var now = new Date();
var sec = now.getSeconds();
if(sec < 10){
sec += "0";
}
document.clockForm.sec.value = sec;//賦值給部件，讓它顯示。
timer = setTimeout("dClock()",1000);//再執行一遍自己咯
}
</script>
<body>
<form name="clockForm">
<input type="text" name="sec" size="2">秒
</form>
</body>
這樣就能實時顯示秒。
計算經過多少秒了
<script>
var timer;
var i = 0;
window.onload = dClock;
function dClock(){
i++;
document.clockForm.sec.value = i;
timer = setTimeout("dClock()",1000);
}
</script>
<body>
<form name="clockForm">
經過 <input type="text" name="sec" size="2">秒
</form>
</body>
每過一秒，i++並且再執行自己一次。
clearTimeout方法
- 中途停止計時器
對於上一個“計算經過多少秒”的程式，只需加幾行程式碼，即可設計一個停止按鈕。
function stopClock(){
clearTimeout(timer);
}
<input type="button" name="stop" onclick="stopClock();">
簡單搖號機
- 不斷給出隨機數，然後結合暫停即可。
<script>
var timer;
var i = 0;
window.onload = dClock;
function dClock(){
i = Math.floor(Math.random()*100); //給i賦值一個隨機數
document.clockForm.sec.value = i; //讓name為sec的text部品的值為i。
timer = setTimeout("dClock()",10); //每10毫秒遞迴一次。
}
function stopClock(){
clearTimeout(timer);//給按鈕用的，就是暫停上個函式的setTimeout。
}
</script>
<body>
<form name="clockForm">
<input type="text" name="sec" size="2">
<input type="button" name="stop" value="暫停" onclick="stopClock();">
</form>
</body>
Image 影象
- 在html學習的基礎上加一些小程式，但是我們先複習一下< img>吧
<img src="1.jpg" alt="jaha" name="cat" height="300" onclick="changeImg()">
src:儲存圖片路徑
name：此圖片的name屬性
height：高度
alt：在圖片丟失時以文字替代。
onclick：事件，即點選此圖片後可以執行一個程式。
點選切換圖片
- 這裡給出兩個圖片，分別為1.jpg 2.jpg。 那麼我們就可以用加號來連結檔名（注意註釋部分），以達到指定不同圖片的效果
這裡只給出函式部分。
<script>
var num = 1;
function changeImg(){
document.cat.src = num + ".jpg";//此處是更改name為cat那個圖片的scr屬性。當num不同時，自然指定了不同的圖片。
num++;
if(num == 3)
num = 1;
}
</script>
DOM 動態改變HTML
如何在不重新整理網頁的情況下改變已有的html元素（文字，圖片等）？
id屬性
- 在HTML部分，需要事先指定id準備。
<p id="msg"> 小夢醬今天的槍信佛嗎 </p>
相當於給p中的資訊附上了一個id，叫做msg。
getElementById
- 是document物件，獲取指定id的屬性的方法。
var msg = document.getElementById("msg");
捕捉id為msg的html元素，並賦值給msg變數。
innerHTML
- 可以獲取和改變元素內的HTML。（用於script部分）
msg.innerHTML = "不行，小夢醬，<span style='color:red'>該圖圖辣!!!</span>";
結合一下，改變文字
結合以上三個知識，我們給出最終的程式：
<script>
function lick(){
var msg = document.getElementById("msg");
msg.innerHTML = "不行，小夢醬，<span style='color:red'>該圖圖辣!!!</span>";
}
</script>
<body>
<p id="msg">小夢醬今天的槍信佛嗎 </p>
<button onclick="lick()">不行</button>
</body>
此程式的效果為：點選一下button，上面的文字將被替換。
動態操作CSS
以下操作：
var msg = document.getElementById("msg");
msg.style.textAlign = "center";
執行完畢後，id為msg的html元素的style將會改變。
- 簡單補充一個屬性：可視（visibility）
visibility有兩個值：visible與hidden，效果是顯示與隱藏。