js实现车辆管理系统

Z时代
2024-01-10
分类：IT

本文实例为大家分享了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>