js实现车辆管理系统
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了js实现车辆管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现车辆管理系统的具体代码,供大家参考,具体内容如下
一、循环添加车辆相关的属性
1. 添加车名
2. 添加编号
3. 添加年份
4. 添加车龄
5. 添加产地
要求:以上所有添加的信息,不能为空;如果为空,程序提示相对应的信息,程序停止,并且恢复原始状态。(意思就是重新开始,也就是从添加车名开始)
二、需求:
1. 根据刚才添加的车辆编号,进行查询,那么就存在两种业务逻辑;第一种,编号不存在,表示查询不到,提示未查询到该车辆信息。
2. 当点击查询按钮,弹窗后,直接点了取消,提示,该车辆信息不存在。
3. 当点击查询按钮,弹窗后,随便输入一个不存在的编号,这时,点了取消按钮,同样提示,该车辆信息不存在。
三、不需要重复多次添加车辆信息
四、正常查询成功,界面效果如下:
五、如果你输入的查询编号存在,但是你点了取消按钮,会提示,该车辆信息不存在。
狼蚁网站SEO优化直接上代码:
别问 问就是懒,用的table布局写的,不提倡大家用table布局
<form action=""> <table border="1" cellspacing=0 id="tab"> <tr id="tab_tr_one"> <td colspan="5" >欢迎使用车辆管理系统</td> </tr> <tr style="text-align: center;"> <td><input type="button" value="1、添加车辆" onclick="add()"></td> <td><input type="button" value="2、查询车辆" onclick="sel()"></td> <td><input type="button" value="3、修改车辆" onclick="update()"></td> <td><input type="button" value="4、删除车辆"></td> <td><input type="button" value="5、退出系统"></td> </tr> <tr><td colspan="5"> <span id="name"></span></td></tr> <tr><td colspan="5"> <span id="id"></span></td></tr> <tr><td colspan="5"> <span id="year"></span></td></tr> <tr><td colspan="5"> <span id="age"></span></td></tr> <tr><td colspan="5"> <span id="address"></span></td></tr> <tr id="tab_tr_enight"><td colspan="5">查询结果</td></tr> <tr style="text-align: center;"> <td><span id="cname"></span></td> <td><span id="cid"></span></td> <td><span id="cyear"></span></td> <td><span id="cage"></span></td> <td><span id="cadderss"></span></td> </tr> </table> </form>
JavaScript部分代码
<script> // 点击添加时 function add(){ //声明一个函数,用来表示用户输入值 function car(a,b,c,d,e){ this.a=a; this.b=b; this.c=c; this.d=d; this.e=e; } //将输入的值赋给span标签 car.prototype.show=function(){ //获取span的值,将输入的值付给span标签 var carn=document.getElementById("name"); var cari=document.getElementById("id"); var cary=document.getElementById("year"); var cara=document.getElementById("age"); var caradd=document.getElementById("address"); carn.innerText="车名:"+this.a; cari.innerHTML="编号:"+this.b; cary.innerHTML="年份:"+this.c; cara.innerHTML="车龄:"+this.d; caradd.innerHTML="产地:"+this.e; } //用户输入车辆信息 var carName=prompt("请输入车名"); //当输入车名时,点击确定 if(carName) { var carId=prompt("请输入编号"); if(carId) { var carYear=prompt("请输入年份"); if(carYear) { var carAge=prompt("请输入车龄"); if(carAge) { var carAddress=prompt("请输入产地"); if(carAddress) { var sum=new car(carName,carId,carYear,carAge,carAddress); sum.show(); } else if(carAddress==="") { alert("年份不能为空") add(); } else{alert("您已退出系统")} } else if(carAge==="") { alert("年份不能为空") add(); } else{alert("您已退出系统")} } else if(carYear==="") { alert("年份不能为空") add(); } else{alert("您已退出系统")} } else if(carId==="") { alert("编号不能为空") add(); } else{alert("您已退出系统")} } // 当输入的车名为空时,重头开始输入 else if(carName===""){ alert("车名不能为空") add(); } //当点击取消按钮时,退出系统 else{alert("您已退出系统") } } //点击查询时 function sel(){ var id=prompt("请输入要查询的车辆编号"); //获取添加的的车辆信息 var carn=document.getElementById("name").innerHTML var cary=document.getElementById("year").innerHTML var cara=document.getElementById("age").innerHTML var caradd=document.getElementById("address").innerHTML //获取之前添加的车辆编号 var cari=document.getElementById("id").innerHTML; // 截取字符串接受车辆编号(去掉前面的三个字符 “编号:”) var cid=cari.substr(3,cari.length).trim(); //当弹出框输入有内容时 点击确定时触发的事件 if(id) { // 判断当需要查询的车辆与已经添加的车辆编号相等时,把车辆信息查询出来 if(id.trim()==cid){ // 把查询到的值付给查询结果栏 document.getElementById("cid").innerHTML="编号:"+cid; document.getElementById("cname").innerHTML=carn; document.getElementById("cyear").innerHTML=cary; document.getElementById("cage").innerHTML=cara; document.getElementById("cadderss").innerHTML=caradd; } //查询的车辆编号与存在的车辆编号不相同时 else{alert("未查询到该车辆信息")} } //当弹出框输入没有内容时 点击确定时触发的事件 else if(id===""){ alert("该车辆信息不存在"); } //当点击取消按钮时 else{alert("该车辆信息不存在");} } //点击修改时 function update(){ var id=prompt("请输入要查询的车辆编号"); //获取之前添加的车辆编号 var cari=document.getElementById("id").innerHTML; // 截取字符串接受车辆编号(去掉前面的三个字符 “编号:”) var cid=cari.substr(3,cari.length).trim(); if(id){ // 当输入的车辆编号与存在的车辆编号相等时 if(id==cid){ var sum=prompt("1、车名 2、年份 3、车龄 4、产地 5、退出"); switch(sum){ case '1':one();break; case '2':three();break; case '3':four();break; case '4':five();break; case '5':tui();break; default:alert("输入选项不存在");break; } } // 当输入的车辆编号与存在的车辆编号不相等,不管用户选择什么都弹出输出有误 else{ var sum=prompt("1、车名 2、年份 3、车龄 4、产地 5、退出"); switch(sum){ case '1':alert("输入有误");break; case '2':alert("输入有误");break; case '3':alert("输入有误");break; case '4':alert("输入有误");break; case '5':tui();break; default:alert("输入选项不存在");break; } } } // 当输入的车辆编号与存在的车辆编号不相等,不管用户选择什么都弹出输出有误 else if(id===""){ var sum=prompt("1、车名 2、年份 3、车龄 4、产地 5、退出"); switch(sum){ case '1':alert("输入有误");break; case '2':alert("输入有误");break; case '3':alert("输入有误");break; case '4':alert("输入有误");break; case '5':tui();break; default:alert("输入选项不存在");break; } } else{ alert("未查询到该车信息") } } // 是否退出 function tui(){ var result=confirm("确定退出吗"); if(result==true){ alert("已退出"); } else{ } } // 当输入正确 修改车名 function one(){ // 获取用户输入的车名 var cone=prompt("请输入车名").trim(); // 将用户输入的车名赋给span标签 document.getElementById("name").innerHTML="车名:"+cone; var cone1=document.getElementById("cname"); if(cone1.innerHTML!=""){ cone1.innerHTML="车名:"+cone; } else{ cone1=""; } } // 当输入正确 修改年份 function three(){ // 获取用户输入的车名 var cthree=prompt("请输入年份").trim(); // 将用户输入的车名赋给span标签 document.getElementById("year").innerHTML="年份:"+cthree; var cthree1=document.getElementById("cyear"); if(cthree1.innerHTML!=""){ cthree1.innerHTML="年份:"+cthree; } else{ cthree1=""; } } // 当输入正确 修改车龄 function four(){ // 获取用户输入的车名 var cfour=prompt("请输入车龄").trim(); // 将用户输入的车名赋给span标签 document.getElementById("age").innerHTML="车龄:"+cfour; var cfour1=document.getElementById("cage"); if(cfour1.innerHTML!=""){ cfour1.innerHTML="车龄:"+cfour; } else{ cfour1=""; } } // 当输入正确 修改产地 function five(){ // 获取用户输入的车名 var cfive=prompt("请输入产地").trim(); // 将用户输入的车名赋给span标签 document.getElementById("address").innerHTML="产地:"+cfive; var cfive1=document.getElementById("caddress"); if(cfive1.innerHTML!=""){ cfive1.innerHTML="产地:"+cfive; } else{ cfive1=""; } } </script>
谢谢观看!!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:Javascript var变量删除原理及实现
下一篇:js实现飞机大战小游戏