网络编程 
首页 > 网络编程 > 浏览文章

js实现车辆管理系统

(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )

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

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

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

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

js实现车辆管理系统

二、需求:

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

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

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

js实现车辆管理系统

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

下面直接上代码:

别问 问就是懒,用的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>

谢谢观看!!!

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

上一篇:Javascript var变量删除原理及实现
下一篇:js实现飞机大战小游戏
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap