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;
        }