本文实例为大家分享了js实现车辆管理系统的具体代码，供大家参考，具体内容如下

一、循环添加车辆相关的属性

1. 添加车名
2. 添加编号
3. 添加年份
4. 添加车龄
5. 添加产地

要求：以上所有添加的信息，不能为空；如果为空，程序提示相对应的信息，程序停止，并且恢复原始状态。（意思就是重新开始，也就是从添加车名开始）

二、需求：

1. 根据刚才添加的车辆编号，进行查询，那么就存在两种业务逻辑；第一种，编号不存在，表示查询不到，提示未查询到该车辆信息。
2. 当点击查询按钮，弹窗后，直接点了取消，提示，该车辆信息不存在。
3. 当点击查询按钮，弹窗后，随便输入一个不存在的编号，这时，点了取消按钮，同样提示，该车辆信息不存在。

三、不需要重复多次添加车辆信息

四、正常查询成功，界面效果如下：

五、如果你输入的查询编号存在，但是你点了取消按钮，会提示，该车辆信息不存在。

下面直接上代码：

别问 问就是懒，用的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">&emsp;<span id="name"></span></td></tr> <tr><td colspan="5">&emsp;<span id="id"></span></td></tr> <tr><td colspan="5">&emsp;<span id="year"></span></td></tr> <tr><td colspan="5">&emsp;<span id="age"></span></td></tr> <tr><td colspan="5">&emsp;<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>

谢谢观看！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。