js實(shí)現(xiàn)車(chē)輛管理系統(tǒng)

更新時(shí)間：2020年08月26日 11:19:51 作者：小時(shí)俞

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)車(chē)輛管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)車(chē)輛管理系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下

一、循環(huán)添加車(chē)輛相關(guān)的屬性

1. 添加車(chē)名
2. 添加編號(hào)
3. 添加年份
4. 添加車(chē)齡
5. 添加產(chǎn)地

要求：以上所有添加的信息，不能為空；如果為空，程序提示相對(duì)應(yīng)的信息，程序停止，并且恢復(fù)原始狀態(tài)。（意思就是重新開(kāi)始，也就是從添加車(chē)名開(kāi)始）

二、需求：

1. 根據(jù)剛才添加的車(chē)輛編號(hào)，進(jìn)行查詢，那么就存在兩種業(yè)務(wù)邏輯；第一種，編號(hào)不存在，表示查詢不到，提示未查詢到該車(chē)輛信息。
2. 當(dāng)點(diǎn)擊查詢按鈕，彈窗后，直接點(diǎn)了取消，提示，該車(chē)輛信息不存在。
3. 當(dāng)點(diǎn)擊查詢按鈕，彈窗后，隨便輸入一個(gè)不存在的編號(hào)，這時(shí)，點(diǎn)了取消按鈕，同樣提示，該車(chē)輛信息不存在。

三、不需要重復(fù)多次添加車(chē)輛信息

四、正常查詢成功，界面效果如下：

五、如果你輸入的查詢編號(hào)存在，但是你點(diǎn)了取消按鈕，會(huì)提示，該車(chē)輛信息不存在。

下面直接上代碼：

別問(wèn) 問(wèn)就是懶，用的table布局寫(xiě)的，不提倡大家用table布局

<form action="">
 <table border="1" cellspacing=0 id="tab">
 <tr id="tab_tr_one">
  <td colspan="5" >歡迎使用車(chē)輛管理系統(tǒng)</td>
 </tr>
 <tr style="text-align: center;">
  <td><input type="button" value="1、添加車(chē)輛" onclick="add()"></td>
  <td><input type="button" value="2、查詢車(chē)輛" onclick="sel()"></td>
  <td><input type="button" value="3、修改車(chē)輛" onclick="update()"></td>
  <td><input type="button" value="4、刪除車(chē)輛"></td>
  <td><input type="button" value="5、退出系統(tǒng)"></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">查詢結(jié)果</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> 
 // 點(diǎn)擊添加時(shí)
 function add(){
 //聲明一個(gè)函數(shù)，用來(lái)表示用戶輸入值
 function car(a,b,c,d,e){
  this.a=a;
  this.b=b;
  this.c=c;
  this.d=d;
  this.e=e;
 }

 //將輸入的值賦給span標(biāo)簽
 car.prototype.show=function(){
  //獲取span的值，將輸入的值付給span標(biāo)簽
  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="車(chē)名："+this.a;
  cari.innerHTML="編號(hào)："+this.b;
  cary.innerHTML="年份："+this.c;
  cara.innerHTML="車(chē)齡："+this.d;
  caradd.innerHTML="產(chǎn)地："+this.e;
 }
 
 //用戶輸入車(chē)輛信息
 var carName=prompt("請(qǐng)輸入車(chē)名");
 //當(dāng)輸入車(chē)名時(shí)，點(diǎn)擊確定
 if(carName)
 {
  var carId=prompt("請(qǐng)輸入編號(hào)");
  if(carId)
  {
  var carYear=prompt("請(qǐng)輸入年份");
  if(carYear)
  {
   var carAge=prompt("請(qǐng)輸入車(chē)齡");
   if(carAge)
   {
   var carAddress=prompt("請(qǐng)輸入產(chǎn)地");
   if(carAddress)
   {
    var sum=new car(carName,carId,carYear,carAge,carAddress);
    sum.show();
   }
   else if(carAddress==="")
   {
    alert("年份不能為空")
    add();
   }
   else{alert("您已退出系統(tǒng)")}
   }
   else if(carAge==="")
   {
   alert("年份不能為空")
   add();
   }
   else{alert("您已退出系統(tǒng)")}
  }
  else if(carYear==="")
  {
   alert("年份不能為空")
   add();
  }
  else{alert("您已退出系統(tǒng)")}
  }
  else if(carId==="")
  {
  alert("編號(hào)不能為空")
  add();
  }
  else{alert("您已退出系統(tǒng)")}
 }
 // 當(dāng)輸入的車(chē)名為空時(shí)，重頭開(kāi)始輸入
 else if(carName===""){
  alert("車(chē)名不能為空")
  add();
 }
 //當(dāng)點(diǎn)擊取消按鈕時(shí)，退出系統(tǒng)
 else{alert("您已退出系統(tǒng)") }
 }
 
 //點(diǎn)擊查詢時(shí)
 function sel(){
 var id=prompt("請(qǐng)輸入要查詢的車(chē)輛編號(hào)");
 
 //獲取添加的的車(chē)輛信息
 var carn=document.getElementById("name").innerHTML
 var cary=document.getElementById("year").innerHTML
 var cara=document.getElementById("age").innerHTML
 var caradd=document.getElementById("address").innerHTML

 //獲取之前添加的車(chē)輛編號(hào)
 var cari=document.getElementById("id").innerHTML;
 // 截取字符串接受車(chē)輛編號(hào)(去掉前面的三個(gè)字符 “編號(hào)：”)
 var cid=cari.substr(3,cari.length).trim();

 //當(dāng)彈出框輸入有內(nèi)容時(shí) 點(diǎn)擊確定時(shí)觸發(fā)的事件
 if(id)
 {
  // 判斷當(dāng)需要查詢的車(chē)輛與已經(jīng)添加的車(chē)輛編號(hào)相等時(shí)，把車(chē)輛信息查詢出來(lái)
  if(id.trim()==cid){
  // 把查詢到的值付給查詢結(jié)果欄
  document.getElementById("cid").innerHTML="編號(hào)："+cid;
  document.getElementById("cname").innerHTML=carn;
  document.getElementById("cyear").innerHTML=cary;
  document.getElementById("cage").innerHTML=cara;
  document.getElementById("cadderss").innerHTML=caradd;
  }
  //查詢的車(chē)輛編號(hào)與存在的車(chē)輛編號(hào)不相同時(shí)
  else{alert("未查詢到該車(chē)輛信息")}
 }
 //當(dāng)彈出框輸入沒(méi)有內(nèi)容時(shí) 點(diǎn)擊確定時(shí)觸發(fā)的事件
 else if(id===""){
  alert("該車(chē)輛信息不存在");
 }
 //當(dāng)點(diǎn)擊取消按鈕時(shí) 
 else{alert("該車(chē)輛信息不存在");}


 }
 
 //點(diǎn)擊修改時(shí)
 function update(){
 var id=prompt("請(qǐng)輸入要查詢的車(chē)輛編號(hào)");
 //獲取之前添加的車(chē)輛編號(hào)
 var cari=document.getElementById("id").innerHTML;
 // 截取字符串接受車(chē)輛編號(hào)(去掉前面的三個(gè)字符 “編號(hào)：”)
 var cid=cari.substr(3,cari.length).trim();
 if(id){
  // 當(dāng)輸入的車(chē)輛編號(hào)與存在的車(chē)輛編號(hào)相等時(shí)
  if(id==cid){
  var sum=prompt("1、車(chē)名 2、年份 3、車(chē)齡 4、產(chǎn)地 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("輸入選項(xiàng)不存在");break;
  }
  }
  // 當(dāng)輸入的車(chē)輛編號(hào)與存在的車(chē)輛編號(hào)不相等，不管用戶選擇什么都彈出輸出有誤
  else{
  var sum=prompt("1、車(chē)名 2、年份 3、車(chē)齡 4、產(chǎn)地 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("輸入選項(xiàng)不存在");break;
  }
  }
 }
 // 當(dāng)輸入的車(chē)輛編號(hào)與存在的車(chē)輛編號(hào)不相等，不管用戶選擇什么都彈出輸出有誤
 else if(id===""){
  var sum=prompt("1、車(chē)名 2、年份 3、車(chē)齡 4、產(chǎn)地 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("輸入選項(xiàng)不存在");break;
  }
 }
 else{
  alert("未查詢到該車(chē)信息")
 }
 }
 // 是否退出
 function tui(){
 var result=confirm("確定退出嗎");
 if(result==true){
  alert("已退出");
 }
 else{  }
 }
 // 當(dāng)輸入正確 修改車(chē)名
 function one(){
 // 獲取用戶輸入的車(chē)名
 var cone=prompt("請(qǐng)輸入車(chē)名").trim();
 // 將用戶輸入的車(chē)名賦給span標(biāo)簽
 document.getElementById("name").innerHTML="車(chē)名："+cone;
 var cone1=document.getElementById("cname");
 if(cone1.innerHTML!=""){
  cone1.innerHTML="車(chē)名："+cone;
 }
 else{
  cone1="";
 }
 }
 // 當(dāng)輸入正確 修改年份
 function three(){
 // 獲取用戶輸入的車(chē)名
 var cthree=prompt("請(qǐng)輸入年份").trim();
 // 將用戶輸入的車(chē)名賦給span標(biāo)簽
 document.getElementById("year").innerHTML="年份："+cthree;
 var cthree1=document.getElementById("cyear");
 if(cthree1.innerHTML!=""){
  cthree1.innerHTML="年份："+cthree;
 }
 else{
  cthree1="";
 }
 }
 // 當(dāng)輸入正確 修改車(chē)齡
 function four(){
 // 獲取用戶輸入的車(chē)名
 var cfour=prompt("請(qǐng)輸入車(chē)齡").trim();
 // 將用戶輸入的車(chē)名賦給span標(biāo)簽
 document.getElementById("age").innerHTML="車(chē)齡："+cfour;
 var cfour1=document.getElementById("cage");
 if(cfour1.innerHTML!=""){
  cfour1.innerHTML="車(chē)齡："+cfour;
 }
 else{
  cfour1="";
 }
 }
 // 當(dāng)輸入正確 修改產(chǎn)地
 function five(){
 // 獲取用戶輸入的車(chē)名
 var cfive=prompt("請(qǐng)輸入產(chǎn)地").trim();
 // 將用戶輸入的車(chē)名賦給span標(biāo)簽
 document.getElementById("address").innerHTML="產(chǎn)地："+cfive;
 var cfive1=document.getElementById("caddress");
 if(cfive1.innerHTML!=""){
  cfive1.innerHTML="產(chǎn)地："+cfive;
 }
 else{
  cfive1="";
 }
 }
</script>

謝謝觀看?。?！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: