信息录入系统（案例）

<style>
			div#box{
				min-width: 800px;
				margin: 20px;
			}
			div#entry div{
				width: 250px;
				text-align: center;
			}
			div#entry div button.add{
				width: 100px;
				background-color: green;
				margin: 10px;
				border: 0px;
				padding: 10px;
				color: #fff;
				cursor: pointer;
			}
			div#entry label{
				width: 250px;
				display: inline-block;
				text-align: right;
			}
			div#entry label input{
				height: 25px;
			}
			div#show table{
				width: 800px;
				border-collapse: collapse;
			}
			
			div#show table th,
			div#show table td{
				border: 1px solid red;
			}
			
			
			div#paging>button{
				cursor: pointer;
				border: 0px;
				padding: 5px;
				width: 80px;
			}
			div#paging>button:hover{
				background-color: #f90;
				color: #fff;
			}
			
			.page{
				margin: 10px;
			}
			a.del{
				cursor: pointer;
			}
		</style>

<div id="box">
			<div>
				<h2>信息录入系统（案例）</h2>
			</div>
			<div id="entry">
				<div>
					<label>
						姓名:<input type="text" id="user" />
					</label>
				</div>
				<div>
					<label>
						薪资:<input type="number" id="salary" />
					</label>
				</div>
				<div>
					<label>
						公司名称:<input type="text" id="company" />
					</label>
				</div>
				<div>
					<button type="button" id="add" class="add">添加</button>
				</div>
			</div>
			<div id="show">
				<table>
					<thead>
						<tr>
							
							<th>姓名</th>
							<th>薪资</th>
							<th>公司名称</th>
							<th>录入时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<!-- <tr>
							<td>kky</td>
							<td>16000</td>
							<td>积云教育</td>
							<td>
								<a>删除</a>
							</td>
						</tr> -->
					</tbody>
				</table>
				<div class="page">
					每页最多显示3条==>共 <span id="maxPage"></span> 页==>当前是第 <span id="page">1</span> 页
				</div>
				<div id="paging">
					<button type="button" id="first">首页</button>
					<button type="button" id="pre">上一页</button>
					<button type="button" id="next">下一页</button>
					<button type="button" id="last">末页</button>
				</div>
			</div>
		</div>

<script>
			;(function(){
				var user=document.getElementById("user");
				var salary=document.getElementById("salary");
				var company=document.getElementById("company");
				
				var add=document.getElementById("add");
				
				
				var first=document.getElementById("first");
				var pre=document.getElementById("pre");
				var next=document.getElementById("next");
				var last=document.getElementById("last");
				var page=document.getElementById("page");
				
				var maxPage=document.getElementById("maxPage");
				
				var arr;
				var str=localStorage.arr20201229;
				
				if(str){
					arr=JSON.parse(localStorage.arr20201229);
				}else{
					arr=[];
					localStorage.arr20201229=JSON.stringify(arr);
				}
				
				
				//默认显示前3条
				var arr3=arr.slice(0,3);
				page.innerHTML=1;
				maxPage.innerHTML=Math.ceil(arr.length/3);
				show(arr3);
				
				
				
				add.onclick=function(){
					var userV=user.value;
					var salaryV=salary.value;
					var companyV=company.value;
					
					if(userV&&salaryV&&companyV){
						var obj={
							user:userV,
							salary:salaryV,
							company:companyV,
							id:+new Date(),
						}
						
						arr.push(obj);
						
						localStorage.arr20201229=JSON.stringify(arr);
						
						user.value=salary.value=company.value="";
						
						
						var arr3=arr.slice(0,3);
						page.innerHTML=1;
						maxPage.innerHTML=Math.ceil(arr.length/3);
						show(arr3);
												
					}else{
						alert("姓名/薪资/公司名称 不能为空");
					}
				}
				
				first.onclick=function(){
					var arr=JSON.parse(localStorage.arr20201229);
					//显示前3条
					var arr3=arr.slice(0,3);
					page.innerHTML=1;
					show(arr3);
				}
				
				last.onclick=function(){
					var arr=JSON.parse(localStorage.arr20201229);
					var len=arr.length;
					//显示前3条
					if(len>3){
						var n=Math.ceil(len/3);
						console.log("n:",n);
						page.innerHTML=n;
						var arr3=arr.slice((n-1)*3);
						show(arr3);
					}else{
						show(arr);
					}
				}
				
				pre.onclick=function(){
					var arr=JSON.parse(localStorage.arr20201229);
					var len=arr.length;
					console.log("1len:",len);
					if(len>3){
						var n=page.innerHTML/1;
						if(n!==1){
							page.innerHTML=n-1;
							var arr3=arr.slice((n-2)*3,(n-1)*3);
							show(arr3);
						}else{
							alert("已经是第一页");
						}
						
					}else{
						alert("已经是第一页");
					}
				}
				
				next.onclick=function(){
					var arr=JSON.parse(localStorage.arr20201229);
					var len=arr.length;
					console.log("2len:",len);
					var max=Math.ceil(len/3);
					if(len>3){
						var n=page.innerHTML/1;
						if(n!=max){
							// console.log("n:",n);
							page.innerHTML=n+1;
							var arr3=arr.slice(n*3,(n+1)*3);
							show(arr3);
						}else{
							alert("已经是最后一页");
						}
					}else{
						alert("已经是最后一页");
					}
				}
				
				
				
				
			}());
			
			
			function show(arr){
				
				// console.log("1arr:",arr);
				var tbody=document.getElementById("tbody");
				var trs="";
				
				for(var i=0;i<arr.length;i++){
					trs+=`
						<tr>
							<td>${arr[i].user}</td>
							<td>${arr[i].salary}</td>
							<td>${arr[i].company}</td>
							<td>${formatTime(arr[i].id)}</td>
							<td>
								<a οnclick=del(${arr[i].id}) class=del>删除</a>
							</td>
						</tr>
					`;
				}
				
				tbody.innerHTML=trs;
			}
			
			function del(id){
				var f=confirm("真的要删除吗?");
				if(f){
					var arr=JSON.parse(localStorage.arr20201229);
					for(var i=0;i<arr.length;i++){
						if(arr[i].id===id){
							arr.splice(i,1);
							break;
						}
					}
					
					localStorage.arr20201229=JSON.stringify(arr);
					
					var arr3=arr.slice(0,3);
					page.innerHTML=1;
					maxPage.innerHTML=Math.ceil(arr.length/3);
					show(arr3);
				}
			}
			
			//格式化时间
			function formatTime(id){
				var d=new Date(id/1);
				var year=d.getFullYear();
				var month=d.getMonth()+1;
				var date=d.getDate();
				var hours=d.getHours();
				var minutes=d.getMinutes();
				var seconds=d.getSeconds();
				
				return year+"年"+isCheck(month)+"月"+isCheck(date)+"日 "+isCheck(hours)+":"+isCheck(minutes)+":"+isCheck(seconds);
				
			}
			
			//是否需要补0
			function isCheck(n){
				return n>=10?n:('0'+n);
			}
		</script>