DOM事件练习

#倒序循环与放大

		<style type="text/css">
			li{
				list-style: none;
			}
			.scal{
				font-size: 70px;
			}
			p{
				font-size: 12px;
				transition: 1s;
			}
		</style>

		<ul class="test">
			<li>第1段话</li>
			<li>第2段话</li>
			<li>第3段话</li>
			<li>第4段话</li>
			<li>第5段话</li>
		</ul>
		<p>JavaScript</p>
		<script type="text/javascript">
			var ul=document.querySelector(".test");
			setInterval(function(){
				var ali=document.querySelectorAll(".test li");
				var firstli=ali[0];
				ul.appendChild(firstli);
			},1000);
			
			var pele=document.querySelector("p");
			setInterval(function(){
				pele.classList.toggle("scal");
			},1000)
		</script>

#图片收起与回到顶部

		<style type="text/css">
			.img{
				width: 140px;
				height: 200px;
				overflow: hidden;
				transition: 1s;
			}
			.img img{
				width: 100%;
			}
			.slide{
				height: 0px;
			}
			
			.bcaktop {
				width: 30px;
				text-align: center;
				font-size: 14px;
				position: fixed;
				right: 10px;
				bottom: 30px;
				background: skyblue;
				color: #fff;
				cursor: pointer;
			}
		</style>

		<div class="img"><img src="img/dongtai-4.png" /></div>
		<div class="btn">
			<button>收起</button>
			<button>展开</button>
			<button>切换</button>
			<button>切换图片</button>
		</div>
		<div style="height: 1000px;"></div>
		<button class="bcaktop">回到顶部</button>

		<script type="text/javascript">
						//收起按钮
						btn[0].addEventListener("click",function(){
							img.classList.add("slide");
						})
						//展开按钮
						btn[1].addEventListener("click",function(){
							//移除类名
							img.classList.remove("slide");
						})
						//切换按钮
						btn[2].addEventListener("click",function(){
							//移除类名
							img.classList.toggle("slide");
						})
						//切换图片
						//获取img标签
						//元素也具有querySelector()这个方法
						var imgele = img.querySelector("img");
						var arr= ["img/youxi-10.png","img/youxi-12.png","img/youxi-13.png","img/youxi-14.png","img/youxi-15.png",]
						btn[3].addEventListener("click",function(){
						
							var i=Math.floor( Math.random()*arr.length);
							
								imgele.setAttribute("src",arr[i]);
							
						})
			//window.onload整个页面(包括图片，css，外部js等)加载完之后再执行里面的js代码
			window.onload = function() {
				var btn = document.querySelectorAll(".btn button");
				var img = document.querySelector(".img");
				var imgele = img.querySelector("img");
				var imgelew = imgele.offsetWidth;
					imgeleh = imgele.offsetHeight;
				img.style.width = imgelew + "px";
				img.style.height = imgeleh + "px";
				img.style.overflow = "hidden";
				var num = imgeleh;
				//收起
				btn[0].addEventListener("click", function() {
					var timer = setInterval(function() {
						num -= 2;
						img.style.height = num + "px";
						img.style.transition="1s";
						if(num <= 0) {
							//清除定时器
							clearInterval(timer);
						};

					});
				});

				//展开
				btn[1].addEventListener("click", function() {
					var str= true;
					var timer = setInterval(function() {
						num += 2;
						img.style.height = num + "px";
						img.style.transition="1s";
						if(num >= imgeleh) {
							//清除定时器
							clearInterval(timer);
							
						};
						if(str){
							num=imgeleh;
						};
					});
				});
			}

			//回到顶部
			var backtop = document.querySelector(".bcaktop");
			/**
			 * 1、获取滚动条的位置
			 * window.pageYoffset
			 * 2。设置滚动条位置的方法
			 * window.moveTo(x,y)
			 * */
			backtop.addEventListener("click", function() {
				var scrolly = window.pageYOffset;
				var timer = setInterval(function() {
					scrolly -= 10;
					window.scrollTo(0, scrolly);
					if(scrolly <= 0) {
						clearInterval(timer);
					}
				}, 10);
			})
			
			//选项卡
			
		</script>

#选项卡

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.web{
				width: 300px;
				height: 300px;
				border: 2px solid #000000;
			}
			ul{overflow: hidden;}
			li{
				float: left;
				width: 100px;
				box-sizing: border-box;
				border: 1px solid #000000;
				cursor: pointer;
				text-align: center;
			}
			li:active{
				background: gainsboro;
			}
			
			.content{
				width: 100%;
				height: 100%;
				position: relative;
			}
			.content div{
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			.content div:nth-child(1){
				display: block;
			
			}
			.nav {
				width: 500px;
				height: 200px;
				border: 1px solid #00008B;
				margin-top: 100px;
			}
			
			.xuan {
				text-align: center;
			}
			
			.xuan li {
				width: 100px;
				height: 60px;
				text-align: center;
				font-size: 20px;
				line-height: 60px;
				border: 1px solid #00008B;
				margin-left: 20px;
			}
			
			.test {
				text-align: center;
				position: relative;
			}
			
			.test div {
				position: absolute;
				top: 0;
				display: none;
			}
			
			.test div:nth-child(1) {
				display: block;
			}
		</style>

		<div class="web">
			<ul>
				<li>html</li>
				<li>css</li>
				<li>js</li>
			</ul>
			<div class="content">
				<div>html是超文本</div>
				<div>css是</div>
				<div>js是</div>
			</div>
		</div>
		<div class="nav">
			<ul class="xuan">
				<li>点击</li>
				<li>事件</li>
				<li>过后</li>
			</ul>
			<div class="test">
				<div>点击</div>
				<div>事件</div>
				<div>过后</div>
			</div>
		</div>

		<script type="text/javascript">
			var ali = document.querySelectorAll("li");
			var caont = document.querySelectorAll(".content div");
			//方法一
			/*
			ali[0].addEventListener("click",function(){
				caont[0].style.display="block";
				caont[1].style.display="none";
				caont[2].style.display="none";
			})
			ali[1].addEventListener("click",function(){
				caont[0].style.display="none";
				caont[1].style.display="block";
				caont[2].style.display="none";
			})
			ali[2].addEventListener("click",function(){
				caont[0].style.display="none";
				caont[1].style.display="none";
				caont[2].style.display="block";
			})*/
			
			//方法二
			for (var i=0;i<ali.length;i++) {
				ali[i].index=i;
				ali[i].addEventListener("click",function(){
					//console.log(i);//3
					//console.log(this.index);
					for (var j=0;j<caont.length;j++) {
						caont[j].style.display="none";
					}
					caont[this.index].style.display="block";
				})
			}
			//方法三
			var ali = document.querySelectorAll(".xuan li");
			var test = document.querySelectorAll(".test div")
			for(var i = 0; i < ali.length; i++) {
				(function(k) {
					ali[i].addEventListener("click", function() {
						for(var j = 0; j < ali.length; j++) {
							test[j].style.display = "none";
						}
						test[k].style.display = "block";
					})
				})(i);
			}
		</script>

#表格增删改查

		<input type="number" class="userinfo"  placeholder="请输入学号" />
		<input type="text"  class="userinfo"  placeholder="请输入姓名" />
		<input type="text" class="userinfo"   placeholder="请输入性别" />
		<input type="number"  class="userinfo"  placeholder="请输入班级" />
		<input type="button" class="add" value="添加" />
		<input type="text" class="search" placeholder="请输入搜索内容" />
		<input type="button" class="searchBtn" value="搜索" />
		<!--根据学号排序-->
		<input type="button" class="sortbtn" value="排序" />
		<table border="" width="600">
			<tr><th>学号</th><th>姓名</th><th>性别</th><th>班级</th><th>操作</th></tr>
		</table>

		<script type="text/javascript">
			//添加条目
			function getInfo(){
				var inps = document.querySelectorAll(".userinfo"),
					num = inps[0].value,
					name = inps[1].value,
					sex = inps[2].value,
					clas = inps[3].value;
					if(num=="" || name=="" || sex=="" || clas==""){
						alert("请输入完整信息");
						return "";
					}
				//es5字符串拼接方法
				//var tr = "<tr><td>"+num+"</td><td>"+name+"</td><td>"+sex+"</td><td>"+clas+"</td></tr>";
				//es6字符串拼接方法
				var tr = `
						<tr>
							<td>${num}</td>
							<td>${name}</td>
							<td>${sex}</td>
							<td>${clas}</td>
							<td align="center"><button class="del">删除</button><button class="change">修改</button></button><button class="conf">确认修改</button></td>
						</tr>
						`
				return tr;
			}
			var add = document.querySelector(".add");
			var tab = document.querySelector("table");
			//添加条目
			add.addEventListener("click",function(){
				tab.innerHTML += getInfo();
				del();
				change();
				
			})
			//删除
			function del(){
				var del = document.querySelectorAll(".del");
				for (var i=0;i<del.length;i++) {
					del[i].addEventListener("click",function(){
						//获取元素父节点
						this.parentNode.parentNode.remove();
					});	
				};
			}
			//修改
			function change(){
				var change = document.querySelectorAll(".change");
				var confChange = document.querySelectorAll(".conf");
				//可以先把change的长度存起来，以便循环的时候使用，提高代码性能
				var leng= change.length;
				var conleng = confChange.length;
				//修改
				for (var i=0;i<leng;i++) {
					change[i].addEventListener("click",function(){
						//console.log(this.parentNode.parentNode.children);
						var atd = this.parentNode.parentNode.children;
						var leng =atd.length-1;
						for (var j=0;j<leng;j++) {
							atd[j].contentEditable=true;
						};
						//获取焦点
						atd[0].focus();
					});
					
				};
				//确定修改
				for (var k=0;k<conleng;k++) {
					confChange[k].addEventListener("click",function(){
						var atd = this.parentNode.parentNode.children;
						var leng = atd.length-1;
						for (var j=0;j<leng;j++) {
							atd[j].contentEditable=false;
						};
					});
				};
			}
			//搜索(根据姓名搜索)
			function search(){
				var seabtn = document.querySelector(".searchBtn");
				seabtn.addEventListener("click",function(){
					var searvalue = document.querySelector(".search").value;
					//trim()去除字符串前后空格
					searvalue = searvalue.trim();
					var tr = document.querySelectorAll("table tr");
					console.log(tr);
					var leng = tr.length;
					var check = false;
					for (var i=1;i<leng;i++) {
						if(searvalue == tr[i].children[1].innerText){
							tr[i].style.background="skyblue";
							check=true;
						}else{
							tr[i].style.background="#fff";
							console.log(i,leng);
						}
					}
					if(check == false){
						alert("没有你想要的数据");
								
					}
				})
			}search();
			//排序(根据学号进行排名)
			function sortNum(){
				var tab = document.querySelector("table");
				var sortbtn = document.querySelector(".sortbtn");
				sortbtn.addEventListener("click",function(){
					var arr = [];
					var tr = document.querySelectorAll("table tr");
				//	console.log(tr);
					var trleng=tr.length;
					for (var i=1;i<trleng;i++){
						arr.push(tr[i]);
					}
					//冒泡排序
					for (var j=0;j<trleng-1;j++){
						for (var k=0;k<trleng-1;k++){
							var num1 = parseInt(arr[j].children[0].innerText);
							var num2 = parseInt(arr[k].children[0].innerText);
							if(num1<num2){
								var tem = arr[k];
								arr[k] = arr[j];
								arr[j] = tem;
							}
						}
					}
					//console.log(arr);
					//将排序好的tr数组，重新渲染到页面·
					for (var k=0;k<trleng-1;k++) {
						tab.appendChild( arr[k]);
					}
				})
			}sortNum();
		</script>

#手风琴

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.web ul{
				overflow: hidden;
			}
			.web li{
				width: 100px;
				height: 500px;
				float: left;
				cursor: pointer;
				transition: 500ms;
			}
			.title{
				width: 20px;
				margin: 230px auto;
			}
			.web li:nth-child(1){
				background: skyblue;
			}
			.web li:nth-child(2){
				background: pink;
			}
			.web li:nth-child(3){
				background: gray;
			}
			.web li:nth-child(4){
				background: gold;
			}
			
			.content{
				display: none;
			}
			li:nth-child(1) .title{
				display: none;
			}
			li:nth-child(1) .content{
				display: block;
			}
			.web li:nth-child(1){
				width: 300px;
			}
		</style>

		<div class="web">
			<ul>
				<li>
					<div class="title">标题1</div>
					<div class="content">内容1</div>
				</li>
				<li>
					<div class="title">标题2</div>
					<div class="content">内容2</div>
				</li>
				<li>
					<div class="title">标题3</div>
					<div class="content">内容3</div>
				</li>
				<li>
					<div class="title">标题4</div>
					<div class="content">内容4</div>
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			var ali = document.querySelectorAll("li");
			for (var i=0;i<ali.length;i++) {
				ali[i].index=i;
				ali[i].addEventListener("click",function(){
				//	console.log(this.index);4
					//title.style.display="block";
					for (var j=0;j<ali.length;j++){
						ali[j].children[0].style="display:block";
						ali[j].children[1].style="display:none";
						ali[j].style.width="100px";
					}
					this.children[0].style="display:none";
					this.children[1].style="display:block";
					this.style.width="300px";
				})
				
			}
			
			for (let i=0;i<ali.length;i++){
				ali[i].addEventListener("click",function(){
					console.log(i);
				})
			}
			//闭包方法
			/*for (var j=0;j<ali.length;j++){
				(function(k){
					ali[k].addEventListener("click",function(){
						for (var i=0;i<ali.length;i++) {
							ali[i].children[0].style.display="block";
							ali[i].children[1].style.display="none";
							ali[i].style.width="100px";
						}
						ali[k].children[0].style.display="none";
						ali[k].children[1].style.display="block";
						ali[k].style.width="300px";
					})
				})(j)
			}*/
			
		</script>

#淘宝购物筛选效果

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.web{
				width: 500px;
				margin: 20px auto;
			}
			.option{
				font-size: 16px;
				border-bottom: 1px solid #bbb;
			}
			.option li{
				margin-bottom: 20px;
			}
			.option span{
				display: inline-block;
				color: #666;
				padding: 5px 10px;
				border: 2px solid #999;
			}
			.option li>span{
				cursor: pointer;
			}
			.option p{
				/*font-weight: bold;*/
				display: inline-block;
				width: 50px;
				text-align: center;
				color: #000;
				border: 1px solid transparent;
			}
			.option .active{
				border: 2px solid #f60;
			}
			.price{
				margin-top: 20px;
			}
			.price em{
				font-style: normal;
				font-size: 22px;
				color: #f60;
			}
			input{
				width: 380px;
				height: 45px;
				line-height: 45px;
				background: #f60;
				border: none;
				outline: none;
				color: #fff;
				font-size: 23px;
				margin-top: 20px;
			}
		</style>

		<div class="web">
			<ul class="option">
				<li class="type model">
					<p>型号</p>
					<span class="active">4.7英寸</span>
					<span>5.5英寸</span>
				</li>
				<li class="type color">
					<p>颜色</p>
					<span class="active">银色</span>
					<span>金色</span>
					<span>深空灰色</span>
				</li>
				<li class="type Memory">
					<p>内存</p>
					<span class="active">16GB</span>
					<span>64GB</span>
					<span>128GB</span>
				</li>
				<li class="type edition">
					<p>版本</p>
					<span class="active">公开版</span>
					<span>移动赠费版</span>
					<span>联通合约版</span>
				</li>
			</ul>
			<div class="price">价格：<em>￥5288.00</em></div>
			<input type="button" onclick="alert('2345')" value="立即购买" />
		</div>

		<script type="text/javascript">
			var modspan = document.querySelectorAll(".model span");
			var menspan = document.querySelectorAll(".Memory span");
			var aspan = document.querySelectorAll("span");
			var totaprice = document.querySelector(".price em");
			//console.log(aspan);
			for (var i=0;i<aspan.length;i++){
				aspan[i].addEventListener("click",function(){
					//获取到父级元素同一级的子元素
					var allChild = this.parentNode.children;
					//console.log(allChild);
					for (var j=1;j<allChild.length;j++) {
						allChild[j].classList.remove("active");
					}
					this.classList.add("active");
					Price();
				});
			}
			
			function Price(){
				var p1 = 0;//表示型号的加格
				var p2 = 0;//内存的价格
				//modspan
				//classList.contains(classname)
				//用来检测ele这个元素里面是否有classname这个类名，如果有返回true，否则返回false
				for (var i=0;i<modspan.length;i++){
					if(modspan[i].classList.contains("active")){
						p1 = i==0?5288.00:6088.00;
					}
				}
				for (var j=0;j<menspan.length;j++) {
					if(menspan[j].classList.contains("active")){
					//	p2 = j==0?0:j==1?800:1600;
					//上面三元运算符相当于下面的if语句
						if(j==0){
							p2=0;
						}else if(j==1){
							p2=800;
						}else{
							p2=1600;
						}
					}
				}
				console.log(p1+p2);
				totaprice.innerText="￥"+(p1+p2).toFixed(2);
			}
			
		</script>

#评论字数监听

		<style type="text/css">
			.txt textarea{
				width: 300px;
				height: 150px;
				border: none;
				outline: none;
			}
			.txt{
				display: inline-block;
				position: relative;
				border: 1px solid #000;
			}
			.txt span{
				position: absolute;
				right: 5px;
				bottom: 5px;
			}
		</style>

		<div class="txt">
			<textarea ></textarea>
			<span>120</span>
		</div>

		<script type="text/javascript">
			var texta = document.querySelector(".txt textarea");
			var sp = document.querySelector(".txt span");
			var maxnum=sp.innerText;
			console.log(maxnum);
			texta.addEventListener("input",function(){
				//方法一
				//texta.setAttribute("maxlength","20");
				//方法二
				if(texta.value.length>=20){
					var atxt = texta.value;
					atxt = atxt.slice(0,20);
					texta.value = atxt;
				}
				var curspnum=texta.value.length;
				sp.innerText=maxnum-curspnum;
			})
		</script>