1、案例一:在末尾添加节点(*****) 2、案例二:动态显示时间 3、案例三:全选练习 4、案例四:下拉列表左右选择 5、案例五:省市联动 6、案例六:动态生成表格 ============================================ 1、案例一:在末尾添加节点(*****) ** 创建标签 createElement方法 ** 创建文本 createTextNode方法 ** 把文本添加到标签下面 appendChild方法(剪切粘贴效果) 2、案例二:动态显示时间 * 得到当前的时间 var date = new Date(); //得到不是常规的格式 var d1 = date.toLocaleString(); //格式化 * 需要让页面每一秒获取时间 setInterval方法 定时器 * 显示到页面上 每一秒向div里面写一次时间 * 使用innerHTML属性 * 代码 function getD1() { //当前时间 var date = new Date(); //格式化 var d1 = date.toLocaleString(); //获取div var div1 = document.getElementById("times"); div1.innerHTML = d1; } //使用定时器实现每一秒写一次时间 setInterval("getD1();",1000); 3、案例三:全选练习 ** 使用复选框上面一个属性判断是否选中 - checked属性 - checked=true:选中 - checked=false:不选中 * 创建一个页面 ** 复选框和按钮 - 四个复选框表示爱好 - 还有一个复选框操作 全选和选不选,也有一个事件 ** 三个按钮,分别有事件 - 全选 - 全不选 - 反选 * 全选操作 步骤: /* 1、获取要操作的复选框 - 使用getElementsByName() 2、返回是数组, - 属性 checked判断复选框是否选中 checked = true; //表示选中 checked = false;//表示不选中 - 遍历数组,得到的是每一个checkbox * 把每一个checkbox属性checked=true */ * 全不选操作 步骤 /* 1、获取到要操作的复选框 2、返回的是数组,遍历数组 3、得到每一个复选框 4、设置复选框的属性 checked=false */ * 反选操作 步骤 /* 1、获取到要操作的复选框 2、返回数组,遍历数组 3、得到每一个复选框 4、判断当前的复选框是选中还是不选中 - if(love1.checked == true) {} 5、如果选中,属性checked设置成false,否则,设置成true */ * 使用复选框实现全选和全不选 步骤 /* 1、得到上面那个复选框 - 通过id获取到 2、判断这个复选框是否是选中 - if条件,checked==true 3、如果是选中,下面是全选 4、如果不是选中,下面是全不选 */ 4、案例四:下拉列表左右选择 * 下拉选择框 <select> <option>111</option> <option>111</option> </select> * 创建一个页面 ** 两个下拉选择框 - 设置属性 multiple属性,multiple="multiple" 表示展示全部下拉框内容 ** 四个按钮,有事件 * 选中添加到右边 步骤 /* 1、获取select1里面的option - getElementsByTagName()返回是数组 - 遍历数组,得到每一个option 2、判断option是否被选中 - 属性 selected,判断是否被选中 ** selected= true: 选中 ** selected= false:没有选择 3、如果是选中,把选择的添加到右边去 4、得到select2 5、添加选择的部分 - appendChild方法 (注意在添加的过程中appendChild方法是剪切效果,选中的数组长度会发生变化,解决办法:每次只取第一个数据即可) */ * 全部添加到右边 步骤 /* 1、获取第一个select下面的option对象 2、返回数组,遍历数组 3、得到每一个option对象 4、得到select2 5、添加到select2下面 - appendChild方法 */ * 选中添加到左边 步骤 /* 1、获取select2里面的option对象 2、返回是数组,遍历数组 3、得到每一个option对象 4、判断option是否被选中 - if条件 属性 selected == true:选择 5、获取select1 6、添加到select1里面 - 使用appendChild方法 */ * 全部添加到左边 步骤 /* 1、获取select2里面的option对象 2、返回是数组,遍历数组 3、得到每一个option对象 4、获取到select1 5、添加到select1里面 - 使用appendChild方法 */ 5、案例五:省市联动 * 创建一个页面,有两个下拉选择框 * 在第一个下拉框里面有一个事件 :改变事件 onchange事件 - 方法add1(this.value);表示当前改变的option里面的value值 * 创建一个二维数组,存储数据 * 每个数组中第一个元素是国家名称,后面的元素是国家里面的城市 /* 1、遍历二维数组 2、得到也是一个数组(国家对应关系) 3、拿到数组中的第一个值和传递过来的值做比较 4、如果相同,获取到第一个值后面的元素 5、得到city的select 6、添加过去(使用)appendChild方法 - 创建option(三步) */ 注意: 由于每次都要向city里面添加option 第二次添加,会追加。 * 每次添加之前,先清空一下city下的所有option节点! 6、案例六:动态生成表格 *创建一个页面:两个输入框和一个按钮 *代码和步骤 /* 1、得到输入的行和列的值 2、生成表格 ** 循环行 ** 在行里面循环单元格 3、显示到页面上 - 把表格的代码设置到div里面 - 使用innerHTML属性 */ //获取输入的行和列 var h = document.getElementById("h").value; var l = document.getElementById("l").value; //把表格代码放到一个变量里面 var tab = "<table border='1' bordercolor='blue'>"; //循环行 for(var i=1;i<=h;i++) { tab += "<tr>"; //循环列 for(var j=1;j<=l;j++) { tab += "<td>aaaaaaa</td>" } tab += "</tr>"; } tab += "</table>"; //alert(tab); //得到div标签 var divv = document.getElementById("divv"); //把table的代码设置到div里面去 divv.innerHTML = tab; 或者 <script type="text/javascript"> var table = document.createElement("table"); table.border='1' ; table.style.borderColor='blue'; for(var i=1;i<=5;i++) { var tr = document.createElement("tr"); for(var j=1;j<=5;j++) { var td = document.createElement("td"); var text = document.createTextNode("aaaaaaa"); td.setAttribute("name","hello"); td.setAttribute("id","id"+i+j); td.setAttribute("onclick","fun(this);"); td.appendChild(text); tr.appendChild(td); } table.appendChild(tr); } var mytable2 = document.getElementById("mytable2"); mytable2.appendChild(table); function fun(e){ alert(e.innerHTML); } </script>
JavaScript案例
最新推荐文章于 2022-01-16 11:39:22 发布