js实现车辆管理系统

 更新时间:2020年08月26日 11:19:51   作者:小时俞  
这篇文章主要为大家详细介绍了js实现车辆管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

谢谢观看!!!

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

相关文章

  • 自己封装的一个原生JS拖动方法(推荐)

    自己封装的一个原生JS拖动方法(推荐)

    下面小编就为大家带来一篇自己封装的一个原生JS拖动方法(推荐)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-11-11
  • JavaScript 逻辑且(&&)和逻辑或(||)的运用小结

    JavaScript 逻辑且(&&)和逻辑或(||)的运用小结

    这篇文章主要介绍了JavaScript 逻辑且(&&)和逻辑或(||)的妙用 ,通过实例代码介绍了逻辑且(&&)和逻辑或(||)的详细用法,需要的朋友可以参考下
    2022-09-09
  • 基于ES6 Array.of的用法(实例讲解)

    基于ES6 Array.of的用法(实例讲解)

    下面小编就为大家带来一篇基于ES6 Array.of的用法(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js 实现在2d平面上画8的方法

    js 实现在2d平面上画8的方法

    今天小编就为大家分享一篇js 实现在2d平面上画8的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 解析John Resig Simple JavaScript Inheritance代码

    解析John Resig Simple JavaScript Inheritance代码

    上网也查了一下对些的理解说的都不是很清楚. 在翻阅的同时找到了一篇 分析这篇文章的文章 哈哈 分析的很详细. (Join Resig 大师的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有时间, 并对此感兴趣不访好好看看. 我相信多少会有所收益的.
    2012-12-12
  • 基于JS2Image实现圣诞树代码

    基于JS2Image实现圣诞树代码

    马上圣诞节了,作为一名程序猿,如何体现自己独特的过节风格,如何在朋友圈发一张专属自己的祝福照片我觉得很有必要,你们说是不是
    2015-12-12
  • js获取URL的参数的方法(getQueryString)示例

    js获取URL的参数的方法(getQueryString)示例

    getQueryString方法默认返回的是 string如果是int类型,则JS使用的时候,要进行转换一下,下面有个不错的示例,大家可以参考下
    2013-09-09
  • JavaScript实现长图滚动效果

    JavaScript实现长图滚动效果

    这篇文章主要为大家详细介绍了JavaScript实现长图滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JS当前属性查询实现代码

    JS当前属性查询实现代码

    JS中的for in 可遍历变量的所有属性!利用此特性制作了一个JS当前属性查询!
    2010-12-12
  • javaScript+turn.js实现图书翻页效果实例代码

    javaScript+turn.js实现图书翻页效果实例代码

    这篇文章主要介绍了javaScript+turn.js实现图书翻页效果实例代码,重点讲解turn.js 如何使用的。需要的朋友可以参考下
    2017-02-02

最新评论