明霞山资源网 Design By www.htccd.com
本文实例为大家分享了js实现车辆管理系统的具体代码，供大家参考，具体内容如下
一、循环添加车辆相关的属性
1. 添加车名
2. 添加编号
3. 添加年份
4. 添加车龄
5. 添加产地
要求：以上所有添加的信息，不能为空；如果为空，程序提示相对应的信息，程序停止，并且恢复原始状态。（意思就是重新开始，也就是从添加车名开始）
二、需求：
1. 根据刚才添加的车辆编号，进行查询，那么就存在两种业务逻辑；第一种，编号不存在，表示查询不到，提示未查询到该车辆信息。
2. 当点击查询按钮，弹窗后，直接点了取消，提示，该车辆信息不存在。
3. 当点击查询按钮，弹窗后，随便输入一个不存在的编号，这时，点了取消按钮，同样提示，该车辆信息不存在。
三、不需要重复多次添加车辆信息
四、正常查询成功，界面效果如下：
五、如果你输入的查询编号存在，但是你点了取消按钮，会提示，该车辆信息不存在。
下面直接上代码：
别问 问就是懒，用的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>
谢谢观看！！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
明霞山资源网 Design By www.htccd.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。