css和javascript的一些筆記（三） 幾個簡單案例

7、案例2：動態顯示時間

* 得到當前的時間
    var date = new Date();
    var d1 = date.toLocaleString();
* 需要讓頁面每一秒獲取時間
    setInterval 方法 定時器
* 顯示到頁面上
    每一秒都向div裏面寫一次時間
    * 使用innerHTML屬性

<div id="times">
    </div>
    <script type="text/javascript">
        function getd1(){
            var date = new Date();
            var d1 = date.toLocaleString();
            var div1 = document.getElementById("times");
            div1.innerHTML = d1;
        }
        setInterval("getd1();",1000);
    </script>

8、案例三：全選練習

* 創建一個頁面
    ** 複選框和按鈕
        -- 四個複選框表示愛好
        -- 還有一個複選框操作全選和全不選 
    ** 三個按鈕
        -- 全選 全不選 反選  分別有事件

function selAll(){          
        var loves = document.getElementsByName("love");
        for(var i=0;i<loves.length;i++){
            var love1 = loves[i];
            //設置屬性是true
            love1.checked = true;
        }
    }

9、案例四：下拉列表左右選擇

* 下拉選擇框
    <select>
        <option></option>
    </select>
* 創建一個頁面
    兩個下拉選擇框
        設置屬性 multiple
    四個按鈕有事件

function selToRight(){
            var select2 = document.getElementById("select2");
            var select1 = document.getElementById("select1");
            var options1 = select1.getElementsByTagName("option");
            for(var i=0;i<options1.length;i++){

                //length是在變化的 i也是變化的
                var option1 = options1[i];
                if(option1.selected==true){
                    //添加到select2
                    select2.appendChild(option1);
                    i--;                //第一次循環 i=0;length
                                    //第二次循環 i=1;length--  所以i需要變回去
                }
            }

        }

10、省市聯動 onchange

* 創建一個頁面 ，有兩個下拉選擇框
* 在第一個下拉框裏面有事件，onchange

function add1(val){
            //alert("aaa")
            var city1 = document.getElementById("city");
            var options1 = city1.getElementsByTagName("option");
            for(var i=0;i<options1.length;i++){
                var op = options1[i];
                city1.removeChild(op);
                i--;   //這一步比較重要
            }
            for(var i=0;i<arr.length;i++){
                //得到二維數組裏沒一個數組
                var arr1 = arr[i];
                //得到數組的第一個值
                var firstvalue = arr1[0];
                if(firstvalue == val){
                    //得到第一個值後面的元素
                    for(var j=1;j<arr1.length;j++){
                        var value1 = arr1[j];
                        var option1 = document.createElement("option");
                        var text1 = document.createTextNode(value1);
                        option1.appendChild(text1);
                        city1.appendChild(option1);
                    }
                }
            }
        }

11、案例六 動態生成表格

行:<input type="text" id="h" />
    列:<input type="text" id="l" />
    <br/>
    <input type="button" value="生成" onclick="add2();"/>
    <div id="divv">
    <script type="text/javascript">
        function add2(){
            var h = document.getElementById("h").value;
            var l = document.getElementById("l").value;
            var tab = "<table border =1>";
            //循環行
            for(var i=1;i<=h;i++){
                tab+="<tr>";
                //循環單元格
                for(var j=1;j<=l;j++){
                    tab+="<td>aaaa</td>";
                }
                tab+="</tr>";
            }
            tab+="</table>";
            var divv = document.getElementById("divv");
            divv.innerHTML = tab;
        }