js实现车辆管理系统

本文实例为大家分享了js实现车辆管理系统的具体代码，供大家参考，具体内容如下

一、循环添加车辆相关的属性

1. 添加车名
2. 添加编号
3. 添加年份
4. 添加车龄
5. 添加产地

要求：以上所有添加的信息，不能为空；如果为空，程序提示相对应的信息，程序停止，并且恢复原始状态。（意思就是重新开始，也就是从添加车名开始）

二、需求：

1. 根据刚才添加的车辆编号，进行查询，那么就存在两种业务逻辑；第一种，编号不存在，表示查询不到，提示未查询到该车辆信息。
 2. 当点击查询按钮，弹窗后，直接点了取消，提示，该车辆信息不存在。
 3. 当点击查询按钮，弹窗后，随便输入一个不存在的编号，这时，点了取消按钮，同样提示，该车辆信息不存在。

三、不需要重复多次添加车辆信息

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

五、如果你输入的查询编号存在，但是你点了取消按钮，会提示，该车辆信息不存在。

下面直接上代码：

别问 问就是懒，用的table布局写的，不提倡大家用table布局

1. <form action="">
2. <table border="1" cellspacing=0 id="tab">
3. <tr id="tab_tr_one">
4. <td colspan="5" >欢迎使用车辆管理系统</td>
5. </tr>
6. <tr style="text-align: center;">
7. <td><input type="button" value="1、添加车辆" onclick="add()"></td>
8. <td><input type="button" value="2、查询车辆" onclick="sel()"></td>
9. <td><input type="button" value="3、修改车辆" onclick="update()"></td>
10. <td><input type="button" value="4、删除车辆"></td>
11. <td><input type="button" value="5、退出系统"></td>
12. </tr>
13. <tr><td colspan="5">&emsp;<span id="name"></span></td></tr>
14. <tr><td colspan="5">&emsp;<span id="id"></span></td></tr>
15. <tr><td colspan="5">&emsp;<span id="year"></span></td></tr>
16. <tr><td colspan="5">&emsp;<span id="age"></span></td></tr>
17. <tr><td colspan="5">&emsp;<span id="address"></span></td></tr>
18. <tr id="tab_tr_enight"><td colspan="5">查询结果</td></tr>
19. <tr style="text-align: center;">
20. <td><span id="cname"></span></td>
21. <td><span id="cid"></span></td>
22. <td><span id="cyear"></span></td>
23. <td><span id="cage"></span></td>
24. <td><span id="cadderss"></span></td>
25. </tr>
26. </table>
27. </form>

JavaScript部分代码

1. <script>
2. // 点击添加时
3. function add(){
4. //声明一个函数，用来表示用户输入值
5. function car(a,b,c,d,e){
6. this.a=a;
7. this.b=b;
8. this.c=c;
9. this.d=d;
10. this.e=e;
11. }
12.  
13. //将输入的值赋给span标签
14. car.prototype.show=function(){
15. //获取span的值，将输入的值付给span标签
16. var carn=document.getElementById("name");
17. var cari=document.getElementById("id");
18. var cary=document.getElementById("year");
19. var cara=document.getElementById("age");
20. var caradd=document.getElementById("address");
21.  
22. carn.innerText="车名："+this.a;
23. cari.innerHTML="编号："+this.b;
24. cary.innerHTML="年份："+this.c;
25. cara.innerHTML="车龄："+this.d;
26. caradd.innerHTML="产地："+this.e;
27. }
28.  
29. //用户输入车辆信息
30. var carName=prompt("请输入车名");
31. //当输入车名时，点击确定
32. if(carName)
33. {
34. var carId=prompt("请输入编号");
35. if(carId)
36. {
37. var carYear=prompt("请输入年份");
38. if(carYear)
39. {
40. var carAge=prompt("请输入车龄");
41. if(carAge)
42. {
43. var carAddress=prompt("请输入产地");
44. if(carAddress)
45. {
46. var sum=new car(carName,carId,carYear,carAge,carAddress);
47. sum.show();
48. }
49. else if(carAddress==="")
50. {
51. alert("年份不能为空")
52. add();
53. }
54. else{alert("您已退出系统")}
55. }
56. else if(carAge==="")
57. {
58. alert("年份不能为空")
59. add();
60. }
61. else{alert("您已退出系统")}
62. }
63. else if(carYear==="")
64. {
65. alert("年份不能为空")
66. add();
67. }
68. else{alert("您已退出系统")}
69. }
70. else if(carId==="")
71. {
72. alert("编号不能为空")
73. add();
74. }
75. else{alert("您已退出系统")}
76. }
77. // 当输入的车名为空时，重头开始输入
78. else if(carName===""){
79. alert("车名不能为空")
80. add();
81. }
82. //当点击取消按钮时，退出系统
83. else{alert("您已退出系统") }
84. }
85.  
86. //点击查询时
87. function sel(){
88. var id=prompt("请输入要查询的车辆编号");
89.  
90. //获取添加的的车辆信息
91. var carn=document.getElementById("name").innerHTML
92. var cary=document.getElementById("year").innerHTML
93. var cara=document.getElementById("age").innerHTML
94. var caradd=document.getElementById("address").innerHTML
95.  
96. //获取之前添加的车辆编号
97. var cari=document.getElementById("id").innerHTML;
98. // 截取字符串接受车辆编号(去掉前面的三个字符 “编号：”)
99. var cid=cari.substr(3,cari.length).trim();
100.  
101. //当弹出框输入有内容时 点击确定时触发的事件
102. if(id)
103. {
104. // 判断当需要查询的车辆与已经添加的车辆编号相等时，把车辆信息查询出来
105. if(id.trim()==cid){
106. // 把查询到的值付给查询结果栏
107. document.getElementById("cid").innerHTML="编号："+cid;
108. document.getElementById("cname").innerHTML=carn;
109. document.getElementById("cyear").innerHTML=cary;
110. document.getElementById("cage").innerHTML=cara;
111. document.getElementById("cadderss").innerHTML=caradd;
112. }
113. //查询的车辆编号与存在的车辆编号不相同时
114. else{alert("未查询到该车辆信息")}
115. }
116. //当弹出框输入没有内容时 点击确定时触发的事件
117. else if(id===""){
118. alert("该车辆信息不存在");
119. }
120. //当点击取消按钮时
121. else{alert("该车辆信息不存在");}
122.  
123. }
124.  
125. //点击修改时
126. function update(){
127. var id=prompt("请输入要查询的车辆编号");
128. //获取之前添加的车辆编号
129. var cari=document.getElementById("id").innerHTML;
130. // 截取字符串接受车辆编号(去掉前面的三个字符 “编号：”)
131. var cid=cari.substr(3,cari.length).trim();
132. if(id){
133. // 当输入的车辆编号与存在的车辆编号相等时
134. if(id==cid){
135. var sum=prompt("1、车名 2、年份 3、车龄 4、产地 5、退出");
136. switch(sum){
137. case '1':one();break;
138. case '2':three();break;
139. case '3':four();break;
140. case '4':five();break;
141. case '5':tui();break;
142. default:alert("输入选项不存在");break;
143. }
144. }
145. // 当输入的车辆编号与存在的车辆编号不相等，不管用户选择什么都弹出输出有误
146. else{
147. var sum=prompt("1、车名 2、年份 3、车龄 4、产地 5、退出");
148. switch(sum){
149. case '1':alert("输入有误");break;
150. case '2':alert("输入有误");break;
151. case '3':alert("输入有误");break;
152. case '4':alert("输入有误");break;
153. case '5':tui();break;
154. default:alert("输入选项不存在");break;
155. }
156. }
157. }
158. // 当输入的车辆编号与存在的车辆编号不相等，不管用户选择什么都弹出输出有误
159. else if(id===""){
160. var sum=prompt("1、车名 2、年份 3、车龄 4、产地 5、退出");
161. switch(sum){
162. case '1':alert("输入有误");break;
163. case '2':alert("输入有误");break;
164. case '3':alert("输入有误");break;
165. case '4':alert("输入有误");break;
166. case '5':tui();break;
167. default:alert("输入选项不存在");break;
168. }
169. }
170. else{
171. alert("未查询到该车信息")
172. }
173. }
174. // 是否退出
175. function tui(){
176. var result=confirm("确定退出吗");
177. if(result==true){
178. alert("已退出");
179. }
180. else{ }
181. }
182. // 当输入正确 修改车名
183. function one(){
184. // 获取用户输入的车名
185. var cone=prompt("请输入车名").trim();
186. // 将用户输入的车名赋给span标签
187. document.getElementById("name").innerHTML="车名："+cone;
188. var cone1=document.getElementById("cname");
189. if(cone1.innerHTML!=""){
190. cone1.innerHTML="车名："+cone;
191. }
192. else{
193. cone1="";
194. }
195. }
196. // 当输入正确 修改年份
197. function three(){
198. // 获取用户输入的车名
199. var cthree=prompt("请输入年份").trim();
200. // 将用户输入的车名赋给span标签
201. document.getElementById("year").innerHTML="年份："+cthree;
202. var cthree1=document.getElementById("cyear");
203. if(cthree1.innerHTML!=""){
204. cthree1.innerHTML="年份："+cthree;
205. }
206. else{
207. cthree1="";
208. }
209. }
210. // 当输入正确 修改车龄
211. function four(){
212. // 获取用户输入的车名
213. var cfour=prompt("请输入车龄").trim();
214. // 将用户输入的车名赋给span标签
215. document.getElementById("age").innerHTML="车龄："+cfour;
216. var cfour1=document.getElementById("cage");
217. if(cfour1.innerHTML!=""){
218. cfour1.innerHTML="车龄："+cfour;
219. }
220. else{
221. cfour1="";
222. }
223. }
224. // 当输入正确 修改产地
225. function five(){
226. // 获取用户输入的车名
227. var cfive=prompt("请输入产地").trim();
228. // 将用户输入的车名赋给span标签
229. document.getElementById("address").innerHTML="产地："+cfive;
230. var cfive1=document.getElementById("caddress");
231. if(cfive1.innerHTML!=""){
232. cfive1.innerHTML="产地："+cfive;
233. }
234. else{
235. cfive1="";
236. }
237. }
238. </script>

谢谢观看！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原文链接：https://blog.csdn.net/weixin_42384718/article/details/107546885