1、案例一 ：在末尾添加节点
描述：在ul列表末尾添加一个 li 节点信息
步骤：
1）创建事件按钮
<input type=" button" value ="add" onclick="add1()"/>
2）编写事件函数
---- function add1 {}
1.获取 ul 标签
docoment.getElementById("");
2.创建li标签
document.createElement("");
3.创建文本
document.createTextNode("");
4.把文本加入到 li 中
appendChild();
5.把 li 加入到 ul 中
appendChild();
<body>
<ul id="ulid">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>
<!-- 在ul列表末尾添加一个 li 节点信息 -->
<!-- 1）创建事件按钮 -->
<input type="button" value="add" onclick="add1()"/>
<script type="text/javascript">
//编写事件函数
function add1(){
//1.获取 ul 标签
var ul1 = document.getElementById("ulid");
//2.创建li标签
var li1 = document.createElement("li");
//3.创建文本
var text1 = document.createTextNode("005");
//4.把文本加入到 li 中
li1.appendChild(text1);
//5.把 li 加入到 ul 中
ul1.appendChild(li1);
}
</script>
</body>2、案例二：动态显示时间
操作：
1）获取当前时间
var date = new Date();
var di = date.toLocaleString();
2）页面让页面每秒都获取时间
serInterval 定时器
3）显示到页面
每秒钟向div里写一次时间
innerHTML属性
计时器效果
<body>
<div id="times">
</div>
<script type="text/javascript">
function getD1(){
//当前时间
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//获取div
var div1 = document.getElementById("times");
//向div里设置时间
div1.innerHTML = d1;
}
//使用定时器实现每秒写一次时间
setInterval("getD1();",1000);
</script>
</body>3、案例三： 全选练习
创建页面
一个全选框（复选框）
事件： 全选或全不选
四个单选框
表示爱好
三个按钮
事件： 全选
全不选
复选
知识点：
checkbox标签的属性checked:
可判断是否已经选中
checked == true 表示选中
checked == false 表示没选
//全选
1）获取要操作的复选框 -- getElementsByName
--因为所有选择name属性值相同，所以此使用方法
2) 遍历（1）操作中返回的数组，得到每一个ckeckedbox
3) 把checkbox属性checked 设置为true
function selAll(){
//获取要操作的复选框 --
var loves = document.getElementsByName("love");
//遍历（1）操作中返回的数组，得到每一个ckeckedbox标签
for(var i=0 ; i< loves.length; i++){
//把checkbox属性checked 设置为true
loves[i].checked = true;
}
}
//全不选
仿照全选操作，将所有checked设置为false
//反选
判断并修改checked属性值为相反
<body>
</br>
<input type="checkbox" id="boxid" 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();"/>
<input type="button" value="全不选" onclick="selNo();"/>
<input type="button" value="反选" onclick="selOther();"/>
<script type="text/javascript">
//全选事件编辑
function selAll(){
/*
1）获取要操作的复选框 -- getElementsByName
--因为所有选择name属性值相同，所以此使用方法
2) 遍历（1）操作中返回的数组，得到每一个ckeckedbox
3) 把checkbox属性checked 设置为true
判断是否已经选中
checked == true 表示选中
checked == false 表示没选
*/
//获取要操作的复选框 --
var loves = document.getElementsByName("love");
//遍历（1）操作中返回的数组，得到每一个ckeckedbox标签
for(var i=0 ; i< loves.length; i++){
//把checkbox属性checked 设置为true
loves[i].checked = true;
}
}
//全不选 仿照全选操作，将所有checked设置为false
function selNo(){
//获取要操作的复选框 --
var loves = document.getElementsByName("love");
//遍历（1）操作中返回的数组，得到每一个checkedbox标签
for(var i=0 ; i< loves.length; i++){
//把checkbox属性checked 设置为false
loves[i].checked = false;
}
}
//反选
function selOther(){
//获取要操作的复选框 --
var loves = document.getElementsByName("love");
//遍历（1）操作中返回的数组，得到每一个checkedbox标签
for(var i=0 ; i< loves.length; i++){
//判断是否已经选中 ，修改checked的值
if(loves[i].checked == true){
loves[i].checked = false;
}else{
loves[i].checked = true;
}
}
}
function selAllNo(){
//得到复选框
//判断是否选中；若选中，调用全选方法.否则,调用全不选方法
var box = document.getElementById("boxid");
if(box.checked == true){
selAll();
}else{
selNo();
}
}
</script>
</body>4、案例四：下拉列表左右选择
创建页面
两个下拉选择框
选择框属性： multiple:multipe 将选项展开显示
四个事件按钮
选中右移
全部右移
选中左移
全部左移
//将选中添加到右边
1.获取select1里的option
先获取select1 后通过select1获取option
getElementTagName
2.遍历判断得到的每一个option是否被选中 用属性selected判断
//selected == true/false 选中/未选
选中：被选中的放进右边select2
先得到select2
将左边的剪切到右边
function selToRight(){
//获取select1里的option
var sel1 = document.getElementById("select1");
var ops = sel1.getElementsByTagName("option");
var sel2= document.getElementById("select2");
//遍历判断得到的每一个option是否被选中
for(var i=0; i<ops.length;i++){
if(ops[i].selected == true){
sel2.appendChild(ops[i]);
//问题随着剪切，i增加，length减小，使程序提前终止。
i--;
}
}
}
//全部添加到右边
仿照选中事件代码，去掉判断，直接循环添加
//左边其余同理
<body>
<!--产生下拉选择框及四个事件按钮-->
<div style="float:left">
<select id="select1" multiple = "multiple" style="width:100px;height:100px">
<option>1111</option>
<option>2222</option>
<option>3333</option>
<option>4444</option>
</select>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight();"/>
</br>
<input type="button" value="全部添加到右边" onclick="AllToRight();"/>
</div>
</div>
<div>
<select id="select2" multiple = "multiple"
style="width:100px;height:100px">
<option>5555</option>
</select>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft();"/>
</br>
<input type="button" value="全部添加到左边" onclick="AllToLeft();"/>
</div>
</div>
<script type="text/javascript">
//实现选中添加到右边
/*
1.获取select1里的option
先获取select1 后通过select1获取option
getElementTagName
2.遍历判断得到的每一个option是否被选中 用属性selected判断
选中：被选中的放进右边select2
先得到select2
将左边的剪切到右边
*/
function selToRight(){
//获取select1里的option
var sel1 = document.getElementById("select1");
var ops = sel1.getElementsByTagName("option");
var sel2= document.getElementById("select2");
//遍历判断得到的每一个option是否被选中
for(var i=0; i<ops.length;i++){
if(ops[i].selected == true){
sel2.appendChild(ops[i]);
//问题随着剪切，i增加，length减小，使程序提前终止。
i--;
}
}
}
//全部添加到右边
function AllToRight(){
//获取select1里的option
var sel1 = document.getElementById("select1");
var ops = sel1.getElementsByTagName("option");
var sel2= document.getElementById("select2");
for(var i=0; i<ops.length;i++){
sel2.appendChild(ops[i]);
i--;
}
}
function selToLeft(){
//获取select2里的option
var sel1 = document.getElementById("select1");
var sel2= document.getElementById("select2");
var ops = sel2.getElementsByTagName("option");
//遍历判断得到的每一个option是否被选中
for(var i=0; i<ops.length;i++){
if(ops[i].selected == true){
sel1.appendChild(ops[i]);
i--;
}
}
}
function AllToLeft(){
//获取select2里的option
var sel1 = document.getElementById("select1");
var sel2= document.getElementById("select2");
var ops = sel2.getElementsByTagName("option");
//遍历判断得到的每一个option是否被选中
for(var i=0; i<ops.length;i++){
sel1.appendChild(ops[i]);
i--;
}
}
</script>
</body>5、案例五：国省联动
创建页面
两个下拉选择框
第一个选择框事件
改变事件 onchanage 事件会在域的内容改变时发生
1)遍历二维数组
2)得到一维数组
3)用一维数组的第一个值和传递过来的value值对比
相同，遍历获取第一个值后面所有的元素
4)得到city的select
5)添加option标签到selected。 appendChild()
//添加之前先创建
创建option标签
创建文本
添加文本到标签
问题：城市改变时，option会追加在后面，数据混乱
解决：添加之前先判断，如果有option，则删除
*/
function add1(val){
var city1 = document.getElementById("cityid");
//假设存在option ， 直接删除，如果不存在，将不进入循环
var options1 = city1.getElementsByTagName("option");
for(var m=0 ; m<options1.length;m++){
var op = options1[m];
//删除，通过父节点删除
city1.removeChild(op);
m--; //随着m++,length-- 不能删除完全。
}
//遍历二维数组
for(var i=0; i<arr.length;i++){
//得到一维数组
var arr1 = arr[i];
//用一维数组的第一个值和传递过来的value值对比
var firstvalue = arr1[0];
if(firstvalue == val){
//遍历获取第一个值后面所有的元素
for(var j=1; j<arr1.length ; j++){
var value1 = arr1[j]; //得到城市名称
var option1 = document.createElement("option"); //创建option标签。
var text1 = document.createTextNode(value1);
//把文本添加到option中
option1.appendChild(text1);
city1.appendChild(option1);
}
}
}
}
<body>
<!-- this.value表示当前选择的value值
设置value进行传值，触发onchange事件
-->
<select id="countryid" onchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
</select>
</body>
<script type="text/javascript">
//用二维数组存数据
var arr = new Array(4);
arr[0] = ["中国","南京","陕西","兰州","新疆","甘肃"];
arr[1] = ["美国","华盛顿","纽约","休斯顿","底特律"];
arr[2] = ["德国","慕尼黑","柏林","狼堡","法兰克福"];
arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];
/*
遍历二维数组
得到一维数组
用一维数组的第一个值和传递过来的value值对比
相同，遍历获取第一个值后面所有的元素
得到city的select
添加option标签。
问题：城市改变时，option会追加在后面，数据混乱
解决：添加之前先判断，如果有option，则删除
*/
function add1(val){
var city1 = document.getElementById("cityid");
//假设存在option ， 直接删除，如果不存在，将不进入循环
var options1 = city1.getElementsByTagName("option");
for(var m=0 ; m<options1.length;m++){
var op = options1[m];
//删除，通过父节点删除
city1.removeChild(op);
m--; //随着m++,length-- 不能删除完全。
}
//遍历二维数组
for(var i=0; i<arr.length;i++){
//得到一维数组
var arr1 = arr[i];
//用一维数组的第一个值和传递过来的value值对比
var firstvalue = arr1[0];
if(firstvalue == val){
//遍历获取第一个值后面所有的元素
for(var j=1; j<arr1.length ; j++){
var value1 = arr1[j]; //得到城市名称
var option1 = document.createElement("option"); //创建option标签。
var text1 = document.createTextNode(value1);
//把文本添加到option中
option1.appendChild(text1);
city1.appendChild(option1);
}
}
}
}
</script>6、案例六：动态生成表格
创建一个页面：
两个输入框
一个按钮
1、得到输入的行和列的值
2、生成表格
循环行
在行里生成单元格
3、显示到页面上
把表格的代码设置到div里面
(因为script中无法识别表格代码，需要将表格代码放在外部的div中)
使用innerHtML
<body>
行：<input type="text" id="h" />
列：<input type="text" id="l" />
</br>
<input type="button" value="生成" onclick="add();"/>
<div id="div1">
</div>
<script type="text/javascript">
/*
1、得到输入的行和列的值
2、生成表格
循环行
在行里生成单元格
3、显示到页面上
把表格的代码设置到div里面
(因为script中无法识别表格代码，需要将表格代码放在外部的div中)
使用innerHtML
*/
function add(){
//获取行和列
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>aaaaa</td>";
}
tab +="</tr>";
}
tab += "</table>";
//得到div标签
var div1 = document.getElementById("div1");
//把table的代码设置到div中
div1.innerHTML = tab;
}
</script>
</body>
扫一扫
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
