欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2020年08月26日 11:19:51   作者:小時俞  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)車輛管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

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

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

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

二、需求:

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

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

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

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

下面直接上代碼:

別問 問就是懶,用的table布局寫的,不提倡大家用table布局

<form action="">
 <table border="1" cellspacing=0 id="tab">
 <tr id="tab_tr_one">
  <td colspan="5" >歡迎使用車輛管理系統(tǒng)</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、退出系統(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)擊添加時
 function add(){
 //聲明一個函數(shù),用來表示用戶輸入值
 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="車名:"+this.a;
  cari.innerHTML="編號:"+this.b;
  cary.innerHTML="年份:"+this.c;
  cara.innerHTML="車齡:"+this.d;
  caradd.innerHTML="產(chǎn)地:"+this.e;
 }
 
 //用戶輸入車輛信息
 var carName=prompt("請輸入車名");
 //當(dāng)輸入車名時,點(diǎn)擊確定
 if(carName)
 {
  var carId=prompt("請輸入編號");
  if(carId)
  {
  var carYear=prompt("請輸入年份");
  if(carYear)
  {
   var carAge=prompt("請輸入車齡");
   if(carAge)
   {
   var carAddress=prompt("請輸入產(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("編號不能為空")
  add();
  }
  else{alert("您已退出系統(tǒng)")}
 }
 // 當(dāng)輸入的車名為空時,重頭開始輸入
 else if(carName===""){
  alert("車名不能為空")
  add();
 }
 //當(dāng)點(diǎn)擊取消按鈕時,退出系統(tǒng)
 else{alert("您已退出系統(tǒng)") }
 }
 
 //點(diǎn)擊查詢時
 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();

 //當(dāng)彈出框輸入有內(nèi)容時 點(diǎn)擊確定時觸發(fā)的事件
 if(id)
 {
  // 判斷當(dāng)需要查詢的車輛與已經(jīng)添加的車輛編號相等時,把車輛信息查詢出來
  if(id.trim()==cid){
  // 把查詢到的值付給查詢結(jié)果欄
  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("未查詢到該車輛信息")}
 }
 //當(dāng)彈出框輸入沒有內(nèi)容時 點(diǎn)擊確定時觸發(fā)的事件
 else if(id===""){
  alert("該車輛信息不存在");
 }
 //當(dāng)點(diǎn)擊取消按鈕時 
 else{alert("該車輛信息不存在");}


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

謝謝觀看?。?!

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

相關(guān)文章

最新評論