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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
ES6的新特性概览
Mar 10 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
Vue.js对象转换实例
Jun 07 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 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
用session做客户验证时的注意事项
2006/10/09 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
js实现tab切换效果
2017/02/16 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
对Python 内建函数和保留字详解
2018/10/15 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
Python下载的11种姿势(小结)
2020/11/18 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
商务考察邀请函模板
2015/02/02 职场文书
初中物理教学反思
2016/02/19 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
oracle重置序列从0开始递增1
2022/02/28 Oracle