js實(shí)現(xiàn)車輛管理系統(tǒng)
更新時(shí)間：2020年08月26日 11:19:51 作者：小時(shí)俞
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)車輛管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)車輛管理系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下
一、循環(huán)添加車輛相關(guān)的屬性
1. 添加車名
2. 添加編號(hào)
3. 添加年份
4. 添加車齡
5. 添加產(chǎn)地
要求：以上所有添加的信息，不能為空；如果為空，程序提示相對(duì)應(yīng)的信息，程序停止，并且恢復(fù)原始狀態(tài)。（意思就是重新開始，也就是從添加車名開始）
二、需求：
1. 根據(jù)剛才添加的車輛編號(hào)，進(jìn)行查詢，那么就存在兩種業(yè)務(wù)邏輯；第一種，編號(hào)不存在，表示查詢不到，提示未查詢到該車輛信息。
2. 當(dāng)點(diǎn)擊查詢按鈕，彈窗后，直接點(diǎn)了取消，提示，該車輛信息不存在。
3. 當(dāng)點(diǎn)擊查詢按鈕，彈窗后，隨便輸入一個(gè)不存在的編號(hào)，這時(shí)，點(diǎn)了取消按鈕，同樣提示，該車輛信息不存在。
三、不需要重復(fù)多次添加車輛信息
四、正常查詢成功，界面效果如下：
五、如果你輸入的查詢編號(hào)存在，但是你點(diǎn)了取消按鈕，會(huì)提示，該車輛信息不存在。
下面直接上代碼：
別問 問就是懶，用的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)擊添加時(shí)
function add(){
//聲明一個(gè)函數(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="編號(hào)："+this.b;
cary.innerHTML="年份："+this.c;
cara.innerHTML="車齡："+this.d;
caradd.innerHTML="產(chǎn)地："+this.e;
}
//用戶輸入車輛信息
var carName=prompt("請(qǐng)輸入車名");
//當(dāng)輸入車名時(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)輸入車齡");
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)輸入的車名為空時(shí)，重頭開始輸入
else if(carName===""){
alert("車名不能為空")
add();
}
//當(dāng)點(diǎn)擊取消按鈕時(shí)，退出系統(tǒng)
else{alert("您已退出系統(tǒng)") }
}
//點(diǎn)擊查詢時(shí)
function sel(){
var id=prompt("請(qǐng)輸入要查詢的車輛編號(hào)");
//獲取添加的的車輛信息
var carn=document.getElementById("name").innerHTML
var cary=document.getElementById("year").innerHTML
var cara=document.getElementById("age").innerHTML
var caradd=document.getElementById("address").innerHTML
//獲取之前添加的車輛編號(hào)
var cari=document.getElementById("id").innerHTML;
// 截取字符串接受車輛編號(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)需要查詢的車輛與已經(jīng)添加的車輛編號(hào)相等時(shí)，把車輛信息查詢出來
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;
}
//查詢的車輛編號(hào)與存在的車輛編號(hào)不相同時(shí)
else{alert("未查詢到該車輛信息")}
}
//當(dāng)彈出框輸入沒有內(nèi)容時(shí) 點(diǎn)擊確定時(shí)觸發(fā)的事件
else if(id===""){
alert("該車輛信息不存在");
}
//當(dāng)點(diǎn)擊取消按鈕時(shí)
else{alert("該車輛信息不存在");}
}
//點(diǎn)擊修改時(shí)
function update(){
var id=prompt("請(qǐng)輸入要查詢的車輛編號(hào)");
//獲取之前添加的車輛編號(hào)
var cari=document.getElementById("id").innerHTML;
// 截取字符串接受車輛編號(hào)(去掉前面的三個(gè)字符 “編號(hào)：”)
var cid=cari.substr(3,cari.length).trim();
if(id){
// 當(dāng)輸入的車輛編號(hào)與存在的車輛編號(hào)相等時(shí)
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)輸入的車輛編號(hào)與存在的車輛編號(hào)不相等，不管用戶選擇什么都彈出輸出有誤
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)輸入的車輛編號(hào)與存在的車輛編號(hào)不相等，不管用戶選擇什么都彈出輸出有誤
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("請(qǐng)輸入車名").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("請(qǐng)輸入年份").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("請(qǐng)輸入車齡").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("請(qǐng)輸入產(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>
謝謝觀看?。?！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- VueJS實(shí)現(xiàn)用戶管理系統(tǒng)
- Node.js實(shí)現(xiàn)簡(jiǎn)單管理系統(tǒng)
- jdbc+jsp實(shí)現(xiàn)簡(jiǎn)單員工管理系統(tǒng)
- JSP實(shí)現(xiàn)簡(jiǎ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)【簡(jiǎn)易型】
- JSP學(xué)生信息管理系統(tǒng)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)密碼輸入框值的顯示隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
如何使用uniapp開發(fā)微信小程序獲取當(dāng)前位置詳解
uni-app小程序項(xiàng)目無法直接獲取到地理位置,只能通過獲取到的經(jīng)緯度,調(diào)用第三方地圖Api獲取,下面這篇文章主要給大家介紹了關(guān)于如何使用uniapp開發(fā)微信小程序獲取當(dāng)前位置的相關(guān)資料,需要的朋友可以參考下2022-10-10
Javascript中使用parseInt函數(shù)需要注意的問題
這篇文章主要介紹了Javascript中使用parseInt函數(shù)需要注意的問題,本文講解了parseInt函數(shù)在IE8下可能會(huì)返回0值的兼容問題解決方法,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了刷新父窗口兩種方法,需要的朋友可以參考下2014-05-05
js 打開新頁(yè)面在屏幕中間的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 打開新頁(yè)面在屏幕中間的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JavaScript實(shí)現(xiàn)2種常見的抽獎(jiǎng)效果實(shí)例代碼
抽獎(jiǎng)系統(tǒng)是一種常見的功能,可以用于各種活動(dòng)和網(wǎng)站,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)2種常見的抽獎(jiǎng)效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
使用Promise解決多層異步調(diào)用的簡(jiǎn)單學(xué)習(xí)心得
下面小編就為大家?guī)硪黄褂肞romise解決多層異步調(diào)用的簡(jiǎn)單學(xué)習(xí)心得。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
本文主要介紹了最常見和最有用的字符串相關(guān)的方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
利用window.name實(shí)現(xiàn)windowStorage代碼分享
本文主要介紹了利用window.name實(shí)現(xiàn)windowStorage的功能分享，大家參考使用吧2014-01-01
Underscore.js 的模板功能介紹與應(yīng)用
Underscore是一個(gè)非常實(shí)用的JavaScript庫(kù)，提供許多編程時(shí)需要的功能的支持，他在不擴(kuò)展任何JavaScript的原生對(duì)象的情況下提供很多實(shí)用的功能,需要了解的朋友可以詳細(xì)參考下2012-12-12