標籤：append 定時 開發 onclick 擷取 屬性 clear http city
實現輪播圖
擷取元素 document.getElementById("id名稱")
事件（onlond） onlond = "changeImg()" 在<script>中function changeImg(){ document.getElementById("img").src = "圖片地址"}
定時操作：setInterval(code,millisec[,"lang"]) code 必需。要調用的函數或要執行的代碼串；millisec必需，周期性執行或調用code之間的時間間隔以毫秒計算。 setInterval("changeImg()",3000)
總代碼：
<body onload="init()">
function init(){//書寫輪圖片顯示的定時操作setInterval("changeImg()",3000);}
//書寫函數var i=0function changeImg(){i++;//擷取圖片位置並設定src屬性值document.getElementById("img1").src="../img/"+i+".jpg";if(i==3){i=0;}}
彈出廣告圖
擷取圖片位置document.getElementById("id名稱")
隱藏圖片：display：none
定時操作：setInterval("顯示圖片的函數",3000);
步驟分析：
一：在頁面指定位置隱藏一個廣告圖片（使用display屬性的none值）<img>標籤中設定<img src="#" width="100%" style="display: none" id="img2"/>
二：確定事件（onload）並為其綁定一個函數 function init(){time=setInterval("showad()",3000);}
三：書寫這個函數（設定一個現實圖片的定時操作）function showad(){var adEle = document.getElementById("img2");adEle.style.display="block";clearInterval(time);time = setInterval("hiddenAd()",3000);}
四：書寫定時器中的函數（擷取廣告圖片的位置並設定屬性stule的display值block）adEle.style.display="block";
五：清除顯示圖片的定時操作clearInterval(time);
六：書寫隱藏圖片的定時操作;time = setInterval("hiddenAd()",3000);
七：書寫定時器中的函數（擷取廣告圖片的位置並設定屬性style的display值none）function hiddenAd(){document.getElementById("img2").style.display="none";clearInterval(time);}
八：清除隱藏圖片的定時操作clearInterval(time);
BOM對象
window對象：
widnow對象表示在瀏覽器中開啟的視窗
常用方法：在前面的案例中有應用。
alert（）：顯示帶有一段訊息和一個確認按鈕的警告框
clearInterval():取消由setInterval()設定的timeout 該方法只能清除由 setInterval 設定的定時操作 clearInterval(time);
clearTimeout():取消由setTimeout()方法設定的timeout 該方法只能清除由 setTimeout 設定的定時操作
confirm（）：顯示帶有一段訊息及確認按鈕和取消按鈕的對話方塊 confirm("您確認刪除嗎？");
prompt()顯示可提示使用者輸入的對話方塊
setInterval():按照指定的周期（以毫秒計）來調用函數或計算運算式 它有一個傳回值，主要是提供給 clearInterval 使用。 time = setInterval("hiddenAd()",3000);
setTimeout():在指定的毫秒後調用函數或計算運算式 有一個傳回值，主要是提供給 clearTimeout 使用。
location對象
對象包含有關當前URL的資訊
常用對象屬性：
href:設定或返回完整的URL 在<script>標籤中 Window.location.href="http://itcast.cn";
history對象方法
back（）：載入history列表中的前一個URL<input type="button" value="返回上一個頁面" onclick="javascript:history.back()"/>
forward（）：載入history列表中的下一個url
go():載入history列表中的某個具體頁面 參數-1返回上一個曆史頁面；-2返回上上一個曆史頁面記錄，1進入下一個曆史頁面記錄，0讓按鈕點擊失效 onlick="javascript:volid(0)"
navigator對象
navigator對象包含瀏覽起的資訊。（該對象開發中不怎麼用）
screen對象
screen對象包含有關用戶端顯示螢幕的資訊（開發中不常用）
實現表格隔行換顏色效果
新內容：
在<table>標籤框中：<thead> <tr> <th></th></tr></thead> <tbody><tr> <td></td></tr></tbody> <thead>標籤定義的是表格的頭部<tbody>標籤定義的是表格的身體部分，在這兩個標籤使用的時候，注意其中的<tr><th><td>的使用方式
確定事件：（頁面載入事件onload）
擷取元素：擷取表格(document.getElementById()),最終是為了擷取表格中tbody裡面的行數(長度)。
Tbody裡面的行數(rows.length)
設定背景顏色(.style.backgroundColor)
步驟分析
第一步：確定事件(onload)並為其綁定一個函數window.onload = function(){var tblEle = document.getElementById("tbl"); var len=tblEle.tBodies[0].rows.length;//alert(len);for(var i=0;i<len;i++){if(i%2==0){tblEle.tBodies[0].rows[i].style.backgroundColor="pink";}else{tblEle.tBodies[0].rows[i].style.backgroundColor="gold";}}} id地址書寫在<table>標籤中
第二步：書寫函數(擷取表格)var tblEle = document.getElementById("tbl");
第三步：擷取tbody裡面的行數var len=tblEle.tBodies[0].rows.length; 在js中沒有集合，只有數組
第四步：對tbody裡面的行進行遍曆
第五步：擷取奇數行和偶數行(角標對2取餘)
第六步：分別對奇數行和偶數行設定背景顏色tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
表格高亮顯示：
事件：onmouseover滑鼠移動到某元素上 和onmouseout滑鼠從某元素移開
步驟：
第一步：確定事件(onmouseover和onmouseout)並分別為其綁定一個函數<tr onmouseover="changeColor(‘tr1‘,‘over‘)" id="tr1" onmouseout="changeColor(‘tr1‘,‘out‘)">
第二步：擷取滑鼠移上去的那行，對其設定背景顏色function changeColor(id,flag){if(flag=="over"){document.getElementById(id).style.backgroundColor="red";}else if(flag=="out"){document.getElementById(id).style.backgroundColor="white";}}
全選和全不選
事件：(按一下滑鼠事件onclick)
步驟：
第一步：確定事件(onclick)並為其綁定一個函數th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
第二步：書寫函數(擷取編號前面的複選框，擷取其狀態)function checkAll(){var checkAllEle = document.getElementById("checkAll");
if(checkAllEle.checked==true){var checkones = document.getElementsByName("checkone");for(var i=0;i<checkones.length;i++){checkones[i].checked=true;}}else{var checkones = document.getElementsByName("checkone");for(var i=1;i<checkones.length;i++){checkones[i].checked=false;}}
第三步：判斷編號前面複選框的狀態(如果為選中，擷取下面所有的複選框，並將其狀態置為選中)if(checkAllEle.checked==true){var checkones = document.getElementsByName("checkone");for(var i=0;i<checkones.length;i++){checkones[i].checked=true;}
第四步：判斷編號前面複選框的狀態(如果為未選中，擷取下面所有的複選框，並將其狀態置為未選中)var checkones = document.getElementsByName("checkone");for(var i=1;i<checkones.length;i++){checkones[i].checked=false;}
二級聯動
事件(onchange)
使用方法：
將某元素添加 appendChild()
以下兩個方法很重要，但是在手冊中查不到！
建立文本節點：document.createTextNode()
建立元素節點：document.createElement()
步驟：
第一步：確定事件(onchange)並為其綁定一個函數
第二步：建立一個二維數組用於儲存省份和城市
第三步：擷取使用者選擇的省份
第四步：遍曆二維數組中的省份
第五步：將遍曆的省份與使用者選擇的省份比較
第六步：如果相同，遍曆該省份下所有的城市
第七步：建立城市文本節點
第八步：建立option元素節點
第九步：將城市文本節點添加到option元素節點中去
第十步：擷取第二個下拉式清單，並將option元素節點添加進去
第十一步：每次操作前清空第二個下拉式清單的option內容。
代碼：
<script> //1.建立一個二維數組用於儲存省份和城市var cities = new Array(3); cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");cities[1] = new Array("長沙市","郴州市","株洲市","嶽陽市"); cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市"); cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");function changeCity(val){ //7.擷取第二個下拉式清單 var cityEle = document.getElementById("city"); //9.清空第二個下拉式清單的option內容 cityEle.options.length=0; //2.遍曆二維數組中的省份 for(var i=0;i<cities.length;i++){ //注意，比較的是角標 if(val==i){ //3.遍曆使用者選擇的省份下的城市 for(var j=0;j<cities[i].length;j++){ //alert(cities[i][j]); //4.建立城市的文本節點 var textNode = document.createTextNode(cities[i][j]); //5.建立option元素節點var opEle = document.createElement("option"); //6.將城市的文本節點添加到option元素節點 opEle.appendChild(textNode); //8.將option元素節點添加到第二個下拉式清單中去 cityEle.appendChild(opEle); } }} }</script>
Html代碼：
<select onchange="changeCity(this.value)"><option>--請選擇--</option> <option value="0">湖北</option><option value="1">湖南</option> <option value="2">河北</option><option value="3">河南</option></select><select id="city"></select>
java scrapt （二）
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
