js實(shí)現(xiàn)車輛管理系統(tǒng)
本文實(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"> <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">查詢結(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í)有所幫助,也希望大家多多支持腳本之家。
- VueJS實(shí)現(xiàn)用戶管理系統(tǒng)
- Node.js實(shí)現(xiàn)簡單管理系統(tǒng)
- jdbc+jsp實(shí)現(xiàn)簡單員工管理系統(tǒng)
- JSP實(shí)現(xiàn)簡單人事管理系統(tǒng)
- JSP實(shí)現(xiàn)客戶信息管理系統(tǒng)
- JSP學(xué)生信息管理系統(tǒng)設(shè)計(jì)
- 詳解nodejs中express搭建權(quán)限管理系統(tǒng)
- 基于jsp實(shí)現(xiàn)新聞管理系統(tǒng) 附完整源碼
- 如何使用AngularJs打造權(quán)限管理系統(tǒng)【簡易型】
- JSP學(xué)生信息管理系統(tǒng)
相關(guān)文章
如何使用uniapp開發(fā)微信小程序獲取當(dāng)前位置詳解
uni-app小程序項(xiàng)目無法直接獲取到地理位置,只能通過獲取到的經(jīng)緯度,調(diào)用第三方地圖Api獲取,下面這篇文章主要給大家介紹了關(guān)于如何使用uniapp開發(fā)微信小程序獲取當(dāng)前位置的相關(guān)資料,需要的朋友可以參考下2022-10-10Javascript中使用parseInt函數(shù)需要注意的問題
這篇文章主要介紹了Javascript中使用parseInt函數(shù)需要注意的問題,本文講解了parseInt函數(shù)在IE8下可能會返回0值的兼容問題解決方法,需要的朋友可以參考下2015-04-04JavaScript實(shí)現(xiàn)2種常見的抽獎效果實(shí)例代碼
抽獎系統(tǒng)是一種常見的功能,可以用于各種活動和網(wǎng)站,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)2種常見的抽獎效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01使用Promise解決多層異步調(diào)用的簡單學(xué)習(xí)心得
下面小編就為大家?guī)硪黄褂肞romise解決多層異步調(diào)用的簡單學(xué)習(xí)心得。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05利用window.name實(shí)現(xiàn)windowStorage代碼分享
本文主要介紹了利用window.name實(shí)現(xiàn)windowStorage的功能分享,大家參考使用吧2014-01-01Underscore.js 的模板功能介紹與應(yīng)用
Underscore是一個非常實(shí)用的JavaScript庫,提供許多編程時需要的功能的支持,他在不擴(kuò)展任何JavaScript的原生對象的情況下提供很多實(shí)用的功能,需要了解的朋友可以詳細(xì)參考下2012-12-12