JAVAWEB第四天案例代码

来源：互联网发布：北京java工资编辑：程序博客网时间：2024/06/07 07:17

案例一、在末尾添加节点

<body>        <ul id="ulid">            <li>刘亦菲</li>            <li>林俊杰</li>            <li>杨颖</li>        </ul>        <input type="button" value="添加" onclick="add();"/>        <script>            function add(){                //获取ul节点                var ul1=document.getElementById("ulid");                //创建li标签                var li1=document.createElement("li");                //创建文本                var text1=document.createTextNode("章子怡");                //把文本加入到li下面                li1.appendChild(text1);                //把li标签加入到ul下面                ul1.appendChild(li1);            }        </script>    </body>

案例二、动态显示时间
1.得到当前时间

var date=new Date();var d1=date.toLocaleString();

2.让页面每一秒获取时间

setInterval方法，定时器

3.显示到页面上，每一秒向页面写入一次时间

innerHTML属性

具体代码如下：

<div id="times"> </div>        <script>            function gettime(){                var date=new Date();                //格式化                var d1=date.toLocaleString();                var div=document.getElementById("times");                div.innerHTML=d1;            }            //使用定时器每秒获取时间            setInterval("gettime();",1000);        </script>

案例三、全选练习
使用复选框的一个属性判断是否选中即checked
如果checked=true,表示选中。checked=false，表示不选中。
事件方法操作步骤：
1.获取要操作的复选框，使用getElementByName();
2.返回是一个数组，使用checked属性来确认选中不选中，遍历每一个数组，然后把checked属性设为true，这样为全选，设为false则为全不选。针对于反选，首先判断其checked的属性，如果为true，则改为false。如果为false，则改为true。
3.针对于（全选/全不选）事件，只需判断这个复选框中的checked值，如果为true，则调用全选的方法，如果为false，则调用全不选方法。

<body>        <input type="checkbox" id="cb1" onclick="selallno();"/>全选/全不选<br/>        <input type="checkbox" name="love"/>刘亦菲<br/>        <input type="checkbox" name="love"/>赵灵儿<br/>        <input type="checkbox" name="love"/>白浅<br/>        <input type="checkbox" name="love"/>王语嫣<br/>        <input type="button" value="全选" onclick="selall();"></button>        <input type="button" value="全不选" onclick="selno();"></button>        <input type="button" value="反选" onclick="selother();"></button></body>    <script>        function selallno(){            var loves=document.getElementById("cb1");            if(loves.checked==true){                selall();            }else{                selno();            }        }        function selall(){            var loves=document.getElementsByName("love");            for(var i=0;i<loves.length;i++){                var love=loves[i];                love.checked=true;            }        }        function selno(){            var loves=document.getElementsByName("love");            for(var i=0;i<loves.length;i++){                var love=loves[i];                love.checked=false;            }        }        function selother(){            var loves=document.getElementsByName("love");            for(var i=0;i<loves.length;i++){                var love=loves[i];                if(love.checked==true){                    love.checked=false;                }else{                love.checked=true;                }            }        }    </script>

案例四、下拉列表左右选择
下拉选择框中有一个属性是multiple,multiple=”multiple”表示下拉列表全部显示，不出现滚动条，可以设置<select>的width和height。
对于选中添加到右边的方法步骤：
1.获取select1中的所有子标签，唯一有效的是通过getElementsByTagName()标签，遍历数组，得到每一个option.
2.判断是否被选中，使用selected属性，如果selected=true；则表示被选中。false为未选中
3.如果选中添加到右边去
4.获取右边的select2
5.添加选择的部分，appendChild()方法
特别注意：添加进行一次后，要使i–,因为获得的数组是动态的，当列表中第一个元素被添加到右边后，第二个元素的下标变为0；比如当连续选择前两个时，第一个被添加后，第二个的下标变为了0，而for循环中的i遍历到了1，而此时第二个因为下标为0，就不会被添加到右边。

<body>        <div style="float:left">            <div>                <select id="select1" multiple="multiple" style="width:200px; height:300px;">                    <option>你就不要想起我</option>                    <option>慢慢</option>                    <option>阿里山的姑娘</option>                    <option>祝你幸福</option>                    <option>亲爱的你</option>                    <option>易燃易爆炸</option>                    <option>恋无可恋</option>                    <option>爱的太迟</option>                </select>            </div>            <div>                <input type="button" value="选中的添加到右边" onclick="selToright();"/><br />                <input type="button" value="全部添加到右边" onclick="allToright();"/>            </div>        </div>        <div style="float:left">            <div>                <select id="select2" multiple="multiple" style="width: 200px; height:300px;">                    <option>heartbeat</option>                    <option>one call way</option>                    <option>Girls</option>                    <option>Let me love you</option>                                    </select>            </div>            <div>                <input type="button" value="选中的添加到右边" onclick="selToleft();"/><br />                <input type="button" value="全部添加到右边" onclick="allToleft();"/>            </div>        </div></body>    <script>        function selToright(){            var select2=document.getElementById("select2");            var select1=document.getElementById("select1");             var options=document.getElementsByTagName("option");            for(var i=0;i<select1.length;i++){                options1=options[i];                if(options1.selected==true){                                        select2.appendChild(options1);                    i--;                }            }        }        function allToright(){            var select2=document.getElementById("select2");            var select1=document.getElementById("select1");             var options=document.getElementsByTagName("option");            for(var i=0;i<select1.length;i++){                options1=options[i];                select2.appendChild(options1);                i--;            }        }    </script>

五、省市联动onchange();事件
重点步骤：1.使用二维数组存储数据，遍历二维数组，得到的还是一个一维数组
2.得到一维数组中的第一个值和传进来的值进行比较，
3.如果相同，就传到city的select里面去
4.使用appendChild方法加入到city中

<body>        <select id="province" onchange="add1(this.value);">            <option value="0">--请选择--</option>            <option value="北京市">北京市</option>            <option value="河南省">河南省</option>            <option value="安徽省">安徽省</option>            <option value="山东省">山东省</option>                    </select>        <select id="city">        </select></body>    <script>                    //创建一个数组，用来存储数据            //使用一个二维数组            var arr =new Array(4);            arr[0]=["北京市","大兴区","朝阳区","丰台区","海淀区","东城区"];            arr[1]=["河南省","郑州市","新乡市","商丘市","周口市","信阳市"];            arr[2]=["安徽省","合肥市","芜湖市","马鞍山市","滁州市","宿州市"];            arr[3]=["山东省","济南市","青岛市","泰安市","威海市"];            function add1(value1){                var city2=document.getElementById("city");                var city3=city2.getElementsByTagName("option");                for(var m=0;m<city3.length;m++){                    var city4=city3[m];                    city2.removeChild(city4);                    m--;                }                for(var i=0;i<arr.length;i++){                    var arr1=arr[i];                    var arr11=arr1[0];                    if(arr11==value1){                        for(var j=1;j<arr1.length;j++){                            var citys=arr1[j];                            var option1=document.createElement("option");                            var text1=document.createTextNode(citys);                            option1.appendChild(text1);                            city2.appendChild(option1);                        }                    }                }            }    </script>

案例六、动态生成表格
1.得到输入的行和列的值，
2.生成表格，循环行，再在行里循环单元格
3.显示到页面上，把表格的代码写入到一个div里面

<body>        <p>请输入要创建的表格的行和列</p>        行：<input type="text" id="input1" />        列：<input type="text" id="input2" /><br /><br />        <input type="button" onclick="creat1();" value="创建" />        <div id="div1">        </div>    </body>    <script type="text/javascript">        function creat1(){            var input1=document.getElementById("input1").value;            var input2=document.getElementById("input2").value;            var table="<table border=1 bordercolor='blue'>";            for(var i=0;i<input1;i++){                table+="<tr>";                for(var j=0;j<input2;j++){                    table+="<td>love</td>"                }                table+="</tr>";            }            table+="</table>";            var div1=document.getElementById("div1");            div1.innerHTML=table;        }    </script>

阅读全文

0 0