JS程式設計小題目詳解(接上一篇)
阿新 • • 發佈:2018-12-17
一、題目:
編寫一個網頁檔案,使用一個表單讓使用者填寫購貨訂單。填寫的資訊包括姓名、電話、商品名稱、單價、數量和金額。當提交表單時,要求:
(1)商品名稱和單價只能讓使用者選擇;
(2)數量為0時不予提交;
(3)金額在提交時自動計算,並與所填的"金額"比較;
(4)如(2)、(3)有錯誤時,則返回已填購貨單,並提示錯誤位置和原因;如果沒有錯誤,則返回已成功提交的頁面。
二、結果截圖(先給出截圖看看網頁結構是怎麼樣的,更有利於理解程式碼)
1、填寫頁面
2、當填寫數量為空時(分為兩種情況,一種是使用者填了0,一種是使用者根本就沒有在這一行填資訊,這種情況會先後提示兩種錯誤,在下面截圖提示數量不為空點選確定後還會提示金額不符)
3、金額不相符時
4、資訊成功頁面
三、程式碼詳解
1、資訊提交成功頁面(這個沒什麼好說的,記住名字是new.html就夠了,後面跳轉用的上,當然你也可以起別的名字,只要跳轉的時候正確填寫就行了)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>資訊提交成功!</h1> </body> </html>
2、資訊填寫介面(註釋我就直接在要註釋的行後面用//表示了,想要貼上僅僅是程式碼的小夥伴可以去上一篇部落格貼上)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>購貨訂單</title> <script language="javascript"> function result(){ var count=document.getElementById("count"); var b;//這裡b是一個布林型別的變數,用於之後的比較,但是JS中變數的宣告用var就行,不用boolean哦
4、總結
很多標籤和函式看著很簡單,但是自己上手就會想不起來,出現各種各樣的小問題,所以大家還是要自己試一試,我寫的只是實現了題目的要求,小夥伴也可以自己加一些別的條件,比如名字不能為空,手機號碼必須11位等約束來進一步改進程式碼。
這一題的分享就到這兒了,歡迎交流反饋哦^^