原生JS的增删小案例上移下移功能

原生JS的增删小案例上移下移功能

效果图
代码展示
HTML部分

	<!-- 模态框提示信息 -->
	<div class ="boxone">
	 不能为空，请输入信息
	</div>
	<!-- 简单布局 -->
	<div class="box">
		<span>姓名：</span>
		<input type="text" id="userName"/><br/>
		<span>手机号：</span>
		<input type="text" id="phone"/><br/>
		<span>评价：</span>
		<input type="number" id="grade"/>(0-5分)<br/>
		<input type="button" value="添加" id="add"/>
	
		<div class="main">
		渲染区域
		</div>
	</div>

css部分

    .box{
			background: skyblue;
			width: 800px;
			margin: 0 auto;
			padding: 20px;
		}
		.main img{
			width:10px;
			height: 10px;
		}
		ul li{
			list-style: none;
		}
		.boxone{
			display: none;
			width: 300px;
			height: 100px;
			position: absolute;
			top: 0;
			line-height: 100px;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			margin: auto auto;
		  background: gray;
		}

JS部分

<script>
		//页面加载执行函数
		window.onload = function(){
			if(localStorage.arrList){
				arr = JSON.parse(localStorage.arrList);
				show(arr);
			}else{
				arr = [];
			}
		}
		//添加部分
		var arr = [];//接受存储数据
		var add = document.getElementById("add");
		var userName = document.getElementById("userName");
		var phone = document.getElementById("phone");
		var grade = document.getElementById("grade");
		add.onclick = function(){
			//判断非空提示
			if(userName.value == '' || phone.value == ''){
				var boxone = document.querySelector(".boxone");
				boxone.style.display = "block";
				//设置定时器清除提示信息
				setTimeout(function(){
					boxone.style.display = "none"
				},3000)
			}else{
				var obj = {
					id:+new Date(),
					userName:userName.value,
					phone:phone.value,
					grade:grade.value,
					time:+new Date(),
					timer:times()
				}
				arr.push(obj);
				//存储到本地localStorage
				localStorage.arrList = JSON.stringify(arr);
				//调用渲染函数
				show(arr);
				//清空输入框
				userName.value = '';
				phone.value = '';
				grade.value = '';
			}
		}
		//渲染页面数据
		function show(arr){
			var main = document.querySelector(".main");
			//main.innerHTML = '';
			var str = '';
			for(i = 0;i<arr.length;i++){
				str +=`
						<ul>
					<li class="namess">
						${i+1}.姓名：${arr[i].userName}
					</li>
					<li>
						手机号：${arr[i].phone}
					</li>
					
					<li class = "imgs">
						评价：
						<img src ="img/${arr[i].grade>0?1:0}.png"/>
						<img src ="img/${arr[i].grade>1?1:0}.png"/>
						<img src ="img/${arr[i].grade>2?1:0}.png"/>
						<img src ="img/${arr[i].grade>3?1:0}.png"/>
						<img src ="img/${arr[i].grade>4?1:0}.png"/>
					</li>
					<li>
					 ${arr[i].timer}
					</li>
					<li>
						<button type="button"  onclick="move(${i},'up')" ${i==0?"disabled":""}>上移</button>
						<button type="button" onclick="del(${arr[i].id})">删除</button>
						<button type="button"  onclick="move(${i},'down')" ${i==arr.length-1?"disabled":""}>下移</button>
					</li>
				</ul>
				`
			}
			   main.innerHTML = str;
		}
     //删除函数方法
     function del(id){
     	var result = confirm("是否删除数据");
     	if(result){
     	for(i=0;i<arr.length;i++){
     		if(id == arr[i].id){
     			arr.splice(i,1);
     			localStorage.arrList = JSON.stringify(arr);
     		}
     	}
     	show(arr);
     	}else{
     		show(arr);
     	}
     }
     //上下移动函数
    function move(i,type){
			if(type == 'up'){
				for(j=0;j<arr.length;j++){
					if(i==j){
						arr.splice(j-1,0,arr[j]);
						arr.splice(j+1,1);
					}
				}
				show(arr);
			}if(type=='down'){
				for(j=0;j<arr.length;j++){
					if(i==j){
						arr.splice(j+2,0,arr[j]);
						arr.splice(j,1);
					}
				}
				show(arr);
			}
			localStorage.arr = JSON.stringify(arr);
		}
		//封装时间函数获取规定格式
     function times(){
					var time = new Date();
		        	var year = time.getFullYear();
		        	var month = time.getMonth()+1;
		        	var day = time.getDate();
		        	var hours = time.getHours();
		        	var min = time.getMinutes();
		        	var second = time.getSeconds();
		        	var result = year + "-" + month + "-" + day + "-" +hours + ":"+min+":"+second;
		        	return result;
				}
	</script>