总结第八篇

全选按钮

水果选材

	<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() {
				var ischecked = this.checked
				
				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>

地区选择

function changeOpt(){
				var cityList=new Array();
				cityList['请选择省份']=['--请选择城市'];
				cityList['河南省']=['郑州','开封','洛阳','商丘','焦作'];
				cityList['四川省']=['成都','绵阳','泸州','自贡'];
			var province=	document.getElementById("province").value
			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)
			}
			//提交
			documen.getElementById("btn").onclick=function(){
				if(checkUname()&&checkPwd(1)&&checkEquals()){
					alert("注册成功")
				}else{
					alert("注册失败")
				}
			}
			}

图片转换

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div0{
				width: 880px;
				height: 400px;
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="list">
			<img src="./img/1.jpg" alt="" width="200">
			<img src="./img/2.jpg" alt="" width="200">
			<img src="./img/3.jpg" alt="" width="200">
			<img src="./img/4.jpg" alt="" width="200">
			<!-- <img src="img/5.jpg" alt="" width="200"> -->
		</div>
		<div id="div0" type="background-image:url(./img/1.jpg);">
			
		
			
		</div>
		<script type="text/javascript">
			var imgs =document.querySelectorAll(".list img")
			// 给每个img标签绑定一个onmouseover事件
		for(var i=0;i<imgs.length;i++){
			imgs[i].onmouseover=function(){
				document.getElementById("div0").style.backgroundImage="ur1("+this.src+")"
			}
		}
		</script>
	</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值