小案例（遍历、tab切换、Date（）、回调函数）

最新推荐文章于 2024-07-16 16:43:05 发布

码路老默007

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量67

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/2201_75705263/article/details/128981747

版权

下边是一个效果图

下边是代码块

	<style type="text/css">
			.da{
				width: 600px;
				min-height: 800px;
				margin: 0 auto;
			}
			.top{
				width: 600px;
				min-height: 250px;
				background-color: #0077AA;
			}
			.top>div{
				display: none;
				width: 600px;
				min-height: 50px;
				text-align: center;
				/* line-height: 740px; */
				color: white;
				/* font-size: 50px; */
				background-color: #0077AA;
			}
			.top .one{
				display: block;
			}
			.xia{
				width: 600px;
				height: 50px;
				/* background-color: #008000; */
			}
			.xia>div{
				width: 200px;
				height: 50px;
				/* display: inline-block; */
				background-color: #0000FF;
				float: left;
				text-align: center;
				line-height: 50px;
			}
			.xia .show{
				background-color: red;
			}
			.shu{
				width: 100px;
				outline: 0;
			}
		</style>
	</head>
	<body>
		<div class="da">
			<div style="text-align: center;line-height: 50px;height: 50px;background-color: #40aa2e;">
				姓名：<input type="text" id="xingMing" class="shu"/>
				年龄：<input type="text" id="nianLing" class="shu"/>
				成绩：<input type="text" id="chengJi" class="shu"/>
				<button type="button" onclick="tianJia()" style="margin-left: 30px;background-color: #f2f519;outline: 0;border: 0;">添加</button>
			</div>
			<div class="top">
				<div id="" class="one">
					<table width="600px" border="2" cellspacing="0">
						<thead>
							<tr>
								<td>序列</td><td>姓名</td><td>年龄</td><td>成绩</td><td>操作</td><td>日期</td>
							</tr>
						</thead>
						<tbody class="obd">
							
						</tbody>
					</table>
				</div>
				<div>我是第二页</div>
				<div>我是第三页</div>
			</div>
			<div class="xia">
				<div class="show">我是第一页</div>
				<div>我是第二页</div>
				<div>我是第三页</div>
			</div>
		</div>
		<script type="text/javascript">
			//下边是tab切换部分
			  //第一步  获取div标签内容
			var xiaDoms=document.querySelectorAll(".xia>div")
			var topDoms=document.querySelectorAll(".top>div")
			// console.log(xiaDoms)
			// console.log(topDoms)  尝试看看是否获取到div标签内容
			//第二步  通过遍历函数我们找到下标
			for (var m=0;m<xiaDoms.length;m++) {
				//第三步  把m值给xiaDoms的temp属性
				xiaDoms[m].temp=m
				//第四步 给xiaDoms一个移除添加事件
				xiaDoms[m].onclick=function(){
					//第五步  回调一下移除事件
					yichu()
					//第六步 给xiaDoms增加show的class名字，并且响应属性
					this.classList.add("show")
					//第七步 给topDoms增加show的class名字，并且响应属性
					topDoms[this.temp].classList.add("one")
				}
			}
			function yichu(){
				for (var i=0;i<xiaDoms.length;i++) {
					xiaDoms[i].classList.remove("show")
					topDoms[i].classList.remove("one")
				}
			}
			//接下来我们给top上边加入删除，添加功能
				//通过声明变量我们取得相应input里边的内容
			var xingMingDoms=document.getElementById("xingMing")
			var nianLingDoms=document.getElementById("nianLing")
			var chengJiDoms=document.getElementById("chengJi")
				//声明一个数组 用来获取input的value值
			var arr=[]
			function tianJia(){
				//声明一个对象专们储存各个input内容的值
				var obj={
					name:xingMingDoms.value,
					age:nianLingDoms.value,
					num:chengJiDoms.value,
					shi:+new Date(),
				}
				//在arr里边通过push添加相应的内容
				arr.push(obj)
				//回调一下zhanshi函数
				zhanShi(arr)
			}
			//声明一个变量获取tbd里边的内容内容
			var obdDoms=document.querySelector(".obd")
			// console.log(obdDoms)
			//声明一个回调函数 通过形参的length长度来获得下标值
			function zhanShi(shuJu){
				var str="" //声明一个字符串变量
				for (var i=0;i<shuJu.length;i++) {
					//累计相加
					str+=`
							<tr align:center;>
								<td>${i+1}</td>
								<td>${shuJu[i].name}</td>
								<td>${shuJu[i].age}</td>
								<td>${shuJu[i].num}</td>
								<td><button οnclick="shanchu(${i})">删除</button></td>
								<td>${shijian(shuJu[i].shi)}</td>
							</tr>
						`
				}
				obdDoms.innerHTML=str
			}
			function shanchu(m){
				var b=confirm("确定要删除吗")
				if (b) {
					arr.splice(m,1)
					zhanShi(arr)
				} else{
					alert("再考虑一下把")
				}
			}
			function shijian(j){
				var shiJ=new Date(j)
				var y=shiJ.getFullYear()
				var mon=shiJ.getMonth()+1
				var ri=shiJ.getDate()
				var h=shiJ.getHours()
				var fen=shiJ.getMinutes()
				var s=shiJ.getSeconds()
				return y+"-"+fu0(mon)+"-"+fu0(ri)+" "+fu0(h)+"-"+fu0(fen)+"-"+fu0(s)
			}
			function fu0(n){
				if (n<10) {
					return "0"+n
				} else{
					return n
				}
			}
		</script>