js提升的6個小案例

標籤：class   onchange   效果   nload   play   ++   ntb   返回   var   

1.js完成圖片輪播效果

　　步驟分析:

1. 建立html檔案
2. 在頁面載入時添加onload事件
3. 編寫onload事件觸發的函數
4. 擷取圖片的控制權
5. 修改圖片的src屬性

<script>    //綁定頁面載入時的觸發事件和函數    window.onload = function(){        //設定每隔5秒執行change函數        window.setInterval("change()",5000);    }    //編寫函數    //設定輪換圖片的變數i    var i = 1;    function change(){        i++;        if(i > 3) {            i =1;        }        //得到圖片對象        var img = document.getElementById("img1");        img.src = "./img/"+i+".jpg";    }    </script>

2.使用js定時彈出廣告定時隱藏

　　步驟分析

1. 建立html文檔
2. 綁定頁面載入的事件和執行的函數
3. 編寫觸發的函數

<script>    //綁定頁面載入的觸發事件        window.onload = function(){            //設定觸發函數的時間            window.setTimeout("show",1000);        }        //編寫顯示的函數        function show() {            //得到廣告顯示處的div對象            var adDiv = document.getElementById("adDiv");            //設定div顯示            adDiv.style.display = "block";            //調用隱藏            window.setTimeout("hide()",1000);        }        //編寫隱藏函數        function hide(){            //得到廣告顯示處的div對象            var adDiv = document.getElementById("adDiv");            //設定div為隱藏            adDiv.style.display = "none";            //調用顯示的函數            window.setTimeout("show()",1000);        }    </script>

3.使用js完成註冊頁面的表單校正

　　步驟分析

1. 建立html文檔
2. 在校正的文字框上添加事件
3. 觸發事件綁定的函數

    <script>        //在表單後面綁定提交的check函數        //使用者名稱驗證        function check(){            //擷取到username表單對象            var username = document.getElementById("username").value;            //判斷使用者名稱是否為空白            if(username == ""){                //提示                alert("使用者名稱不可為空");                //返回false不讓表單提交                return false;            }            //擷取到password表單對象            var password = document.getElementById("pasword").value;            //擷取重複密碼對象            var repassword = document.getElementById("repassword").value;            //判斷            if(password != repassword) {                //提示                alert("前後密碼不一致");                //返回false給submit事件                return false;            }        }            </script>

4.使用js完成隔行換色

　　步驟分析

1. 建立html文檔
2. 確定onload事件
3. 在觸發的函數中獲得操作的表格
4. 獲得表格的所有行數
5. 遍曆表格
6. 判斷偶數和奇數

<script>        //在body中添加onload事件並綁定changeColor函數        //第一行不想換色就把第一個tr嵌入<thead>標籤,後面的<tr>嵌入<tbody>標籤        //編寫函數        function changeColor(){            //得到table對象            var tab = document.getElementById("tab");            //得到第一個tbodys標籤下的tr的length            var len = tab.tBodies[0].rows.length;            //遍曆            for (var i=0;i<len;i++) {                //判斷奇數偶數                if(i % 2 == 0){                    //為偶數tr設定背景顏色                    tab.tBodies[0].rows[i].style.backgroundColor="green";                }else {                    //為奇數tr設定背景顏色                    tab.tBodies[0].rows[i].style.backgroundColor="red";                }            }        }    </script>

5.完成複選框的全選和全不選效果

　　步驟分析:

1. 建立html文檔
2. 確定複選框的單擊事件
3. 觸發一個函數
4. 在函數中確定全選按鈕有沒有被選中,
5. 如果選中,下面得都選中,
6. 沒有,下面的也都不選中

    <script>        function changeColor() {            var tab1 = document.getElementById("tab1");            var len = tab1.tBodies[0].rows.length;            for(var i=0;i<len;i++) {                i % 2==0?tab1.tBodies[0].rows[i].style.backgroundColor="green" : tab1.tBodies[0].rows[i].style.backgroundColor="red";            }            reverseCheck();        }        function checkAll() {            //擷取到複選框的根標籤            var selectAll = document.getElementById("selectAll");            //得到複選框下面的            var ids = document.getElementsByName("ids");            for(var i=0;i<ids.length;i++) {                //讓上下一致                ids[i].checked = selectAll.checked;            }        }        var count = 0;        //不選其中一個就全校全選        function reverseCheck() {            var ids = document.getElementsByName("ids");            var selectAll = document.getElementById("selectAll");            for(var i=0;i<ids.length;i++) {                ids[i].onclick = function() {                    if(this.checked) {                        count++;                    }else {                        count--;                    }                    selectAll.checked = count == ids.length;                }            }        }        //反選        function invert() {            var selectAll = document.getElementById("selectAll");            var ids = document.getElementsByName("ids");            for(var i =0;i<ids.length;i++){                ids[i].checked =! ids[i].checked;                if(this.checked) {                    count++;                }else {                    count--;                }                selectAll.checked = count == ids.length;            }        }    </script>

 

6.二級下拉式功能表的聯動

　　步驟分析:

1. 建立html文檔
2. 確定onchange事件
3. 獲得到所選擇的省份的資訊
4. 根據資訊擷取對應的數組中的資訊
5. 遍曆數組中的資訊
6. 建立元素,建立文本,將元素添加到第二個列表中

<script>            //建立二維數組,並未裡面的元素賦值        var arrs = new Array(2);        arrs[0] = new Array("渝中區","渝北區");        arrs[1] = new Array("成都","眉山");        //得到option中的value(選擇菜單)        var val = document.getElementById("province").value;        //清空第二個列表中的內容        document.getElementById("city").options.length=0;        //遍曆集合        for(var i=0;i<arrs.length;i++) {            if(i == val) {                //擷取對應val的資訊                for (var j=0;j<arrs[i];j++) {                    //建立option標籤                    var opEl = document.createElement("option");                    //建立內容標籤                    var text = document.createTextNode(arrs[i][j]);                    //將內容添加到option標籤                    opel.appendChild(text);                    //將option標籤添加到二級下拉式功能表的根標籤                    document.getElementById("city").appendChild(opEl);                }            }        }    </script>

 

js提升的6個小案例