首頁 > 開發者 > JavaScript
下面我們接著旅程2繼續我們的Dom征程。在這片博文中我完成了document屬性的所有介紹，並在最後用幾個小案例充分的講解了這些知識點。這些裡面有些特效很常見，在我們網站註冊的時候我們會限制單擊控制項的時間，讓使用者有足夠的時間讀完協議控制項才能可用，實現註冊。
(1) document是window對象的一個屬性，因為使用window對象成員的時候可以省略window,所以一直寫document。
(2) document的方法
1) write：向文檔寫入內容，writeln和write差不多，只不過最後添加一個斷行符號。
<script type="text/javascript">
document.write("<a href='http://www.baidu/com'>百度</a>");
</script>
<input type="button" value="點擊" onclick="document.write('您好')" />
注釋：在onclick等事件中寫的代碼會衝掉頁面的內容，只有在頁面載入過程中write才會與原有內容結合在一起。
2) write經常在廣告代碼，整合資原始碼中被廣泛的使用。
(3) getElementById方法(非常有用)，根據元素的Id獲得對象，網頁中Id不能重複，也可以直接通過元素的Id來引用元素，但是有有效範圍之類的問題，因此不建議通過Id操作對象，而是通過getElementById。
<script type="text/javascript">
function btnClick() {
var txt = document.getElementById("textBox1");
//alert(txt.value);
alert(textBox1.value);
}
function btnClick2() {
var txt = document.getElementById("textBox2");
//alert(txt.value);
//alert(textBox2.value) //這句話是錯誤的
alert(form1.textBox2.value);
}
</script>
<input type="text" id="textBox1" />
<input type="button" value="點一下" onclick="btnClick()" />
<form action="f1f2.htm" id="form1">
<input type="text" id="textBox2" />
<input type="button" value="點擊" onclick="btnClick2()" />
</form>
注釋：建議使用getElementById擷取對象
(4) getElementByName，根據元素的name擷取對象，由於頁面中元素的name可以重複，比如：多個RadioButton的name一樣，因此getElementByName傳回值是對象數組
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
/*在JS中下面的代碼不像C#中的foreach，並不是遍曆每一個元素，而是遍曆Key
for (var r in radios) {
alert(r.value);
}*/
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
</script>
<input type="radio" name="gender" value="男" />男<br />
<input type="radio" name="gender" value="女" />女<br />
<input type="radio" name="gender" value="保密" />保密<br />
<input type="button" value="click" onclick="btnClick()" />
(5) getElementsByTagName，獲得指定標籤過程的元素數組，比如：getElementByTagName(“P”)可以獲得所有的<p>標籤。
function btnClick1() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "韓迎龍";
}
}
<input type="button" value="click" onclick="btnClick()" />
<input type="button" value="click" />
<input type="button" value="click" />
<input type="button" value="click" onclick="btnClick1()" />
案例1：當單擊某個控制項的時候某個控制項的屬性變化案例，也就是我們的控制項上面顯示的是”哈哈”，但是當我們單擊的時候就會變成”Hello”，當我們單擊其他的時候前面的控制項恢複原始狀態。
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnClick; //單擊控制項的onclick事件
}
}
function btnClick() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//window.event.srcElement——>取得引發事件的控制項
if (input == window.event.srcElement) {
input.value = "Hello";
}
else {
input.value = "哈哈";
}
}
}
</script>
<body onload="initEvent()">
<input type="button" value="哈哈" />
<input type="button" value="哈哈" />
<input type="button" value="哈哈" />
</body>
案例2：十秒鐘後協議文字框的註冊按鈕才能夠點擊，時鐘倒數(btn.disabled=true)。
思路 1.註冊按鈕初始化狀態不可用，disabled
2.啟動定時器，setInterval,設定一個初始值為10的全域變數，1秒鐘運行一次CountDown方法，在CountDown方法中對全域變數倒數，然後將到數值寫在註冊按鈕上面(請仔細閱讀協議(還剩8秒))
3.直到全域變數值<=0,就讓註冊按鈕可用，將按鈕的文本設定為”同意”。
<script type="text/javascript">
var leftSeconds = 10;
var intervalId;
function CountDown() {
var btnReg = document.getElementById("btnReg");
if (btnReg) { //如果網頁速度非常慢的話，可能定時器啟動並執行時候控制項還沒有載入
if (leftSeconds <= 0) {
btnReg.value = "同意";
btnReg.disabled = "";
clearInterval(intervalId); //停止定時器
}
else {
btnReg.value = "請仔細閱讀協議(還剩" + leftSeconds + "秒)";
leftSeconds--;
} } }
intervalId = setInterval("CountDown()", 1000);
</script>
<body>
<textarea></textarea><br /><br />
<input type="button" value="同意" disabled="disabled" id="btnReg" />
</body>
案例3：加法計算機，兩個文字框中輸入資料，點擊[=]按鈕將相加的結果放在第三個文字框中。
<script type="text/javascript">
function CalClick() {
var value1 = document.getElementById("txt1").value;
var value2 = document.getElementById("txt2").value;
value1 = parseInt(value1, 10);
value2 = parseInt(value2, 10);
document.getElementById("txtResult").value = value1 + value2;
}
</script>
<body>
<input type="text" id="txt1" />+<input type="text" id="txt2" />
<input type="button" onclick="CalClick()" value="=" />
<input type="text" id="txtResult" readonly="readonly" />
</body>
案例3：美女時鐘，每一秒迴圈顯示一個美女，考慮(當最後一秒的時候變成個位元)。
<script type="text/javascript">
//var now = new Date(); 不要寫在這裡，否則取得的時間不變
function FillTwoLen(i) {
if (i < 10) {
return "0" + i;
}
else {
return i;
}
}
function Refersh() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return;
}
var now = new Date();
var fileName = FillTwoLen(now.getHours()) + "-" + FillTwoLen(now.getSeconds()) + ".jpg";
imgMM.src = "images/" + fileName;
}
setInterval("Refersh()", 1000);
</script>
<body onload="Refersh()">
<img id="imgMM" src="" />
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
