- 实现案例级联操作
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<td>
<select name="province" id="province" onchange="changeOpt()">
<option value="请选择省份">--请选择省份--</option>
<option value="河南省">--河南省--</option>
<option value="四川省">--四川省--</option>
<select>
<select name="cities" id="cities">
<option value="请选择城市">--请选择城市--</option>
<select>
</td>
<td>
</td>
</tr>
</table>
<div id="result">
</div>
<script type="text/javascript">
//下拉列表
function changeOpt(){
var cityList = new Array();
cityList['请选择省份'] = ['--请选择城市--'];
cityList['河南省'] = ['郑州','开封','洛阳','商丘','灵宝'];
cityList['四川省'] = ['成都','锦阳','德阳','自贡','泸州'];
//获取选中的下拉列表选项（省份）
var province=document.getElementById("province").value
console.log(province)
//将下拉列表清空
document.getElementById("cities").options.length=0
for (var i = 0; i < cityList[province].length; i++) {
var opt=new Option(cityList[province][i],cityList[province][i])
document.getElementById("cities").options.add(opt)
}
}
</script>
</body>
</html>
2.将下列案例实现全选/全不选
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{list-style: none;}
</style>
</head>
<body>
<p>
<input type="checkbox" id="selectAll" />全选/全不选
</p>
<hr >
<ul class="shop">
<li><input type="checkbox">🍎</li>
<li><input type="checkbox">梨</li>
<li><input type="checkbox">🍇</li>
<li><input type="checkbox">🍌</li>
<li><input type="checkbox">榴莲</li>
</ul>
<script type="text/javascript">
var cbs=document.querySelectorAll(".shop input")
document.getElementById("selectAll").onclick=function(){
//this:指的就是当前对象（触发该事件的标签）
//console.log(this)
//获取到当前复选框的选中状态
var isChecked=this.checked
//console.log(isChecked)
//获取水果列表
//var cbs=document.querySelectorAll(".shop input")
for(var i=0;i<cbs.length;i++){
cbs[i].checked=isChecked
}
}
//给水果列表中每一个复选框绑定一个单击事件
for(var i=0;i<cbs.length;i++){
//绑定单击事件
cbs[i].onclick=function(){
var count=0//用来储存被选中的水果的个数
for(var j=0;j<cbs.length;j++){
if(cbs[j].checked){
count++
}
}
if(count==cbs.length){
document.getElementById("selectAll").checked=true
}else{
document.getElementById("selectAll").checked=false
}
}
}
</script>
</body>
</html>
3.将课堂案例图片的切换效果实现
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="list">
<img src="img/1.jpg" alt="" width="200px" >
<img src="img/2.jpg" alt="" width="200px" >
<img src="img/3.jpg" alt="" width="200px" >
<img src="img/4.jpg" alt="" width="200px" >
</div>
<div id="div" style="background-image: url(img/1.jpg);width: 800px
;height: 400px;background-repeat: no-repeat;">
</div>
<script type="text/javascript">
var imgs=document.querySelectorAll("img")
for(var i=0;i<imgs.length;i++){
imgs[i].onmouseover=function(){
document.getElementById("div").style.backgroundImage="url("+this.src+")"
}
}
</script>
</body>
</html>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
