js实现车辆管理系统


Posted in Javascript onAugust 26, 2020

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

谢谢观看!!!

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

Javascript 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
js实现飞机大战小游戏
Aug 26 #Javascript
JS面向对象实现飞机大战
Aug 26 #Javascript
JavaScript Image对象实现原理实例解析
Aug 26 #Javascript
js实现飞机大战游戏
Aug 26 #Javascript
JS+Canvas实现五子棋游戏
Aug 26 #Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 #Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
header跳转和include包含问题详解
2012/09/08 PHP
10 个经典PHP函数
2013/10/17 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
js动态切换图片的方法
2015/01/20 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
Python list操作用法总结
2015/11/10 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
英国女士家居服网站:hush
2017/08/09 全球购物
安全演讲稿大全
2014/05/09 职场文书
派出所所长先进事迹
2014/05/19 职场文书
三八节标语
2014/06/27 职场文书
公司离职证明范本
2014/10/17 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
节水倡议书
2015/01/19 职场文书