JS编程小题目详解

阳光穿透心脏的1/2处 2022-05-03 06:58 333阅读 0赞

## **一、题目：** ##

编写一个网页文件，使用一个表单让用户填写购货订单。填写的信息包括姓名、电话、商品名称、单价、数量和金额。当提交表单时，要求：

(1)商品名称和单价只能让用户选择；

(2)数量为0时不予提交；

(3)金额在提交时自动计算，并与所填的"金额"比较；

(4)如(2)、(3)有错误时，则返回已填购货单，并提示错误位置和原因；如果没有错误，则返回已成功提交的页面。

### **二、结果截图（先给出截图看看网页结构是怎么样的，更有利于理解代码）** ###

### **1、填写页面** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70][]

### **2、当填写数量为空时（分为两种情况，一种是用户填了0，一种是用户根本就没有在这一行填信息，这种情况会先后提示两种错误，在下面截图提示数量不为空点击确定后还会提示金额不符）** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 2][]

### **3、金额不相符时** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 3][]

### **4、信息成功页面** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 5][]

## **三、代码详解** ##

### **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哦  
if(count.value==0||count.value=="")\{alert("填写数量行出错，数量不能为空");b=false;\}//注意比较的是value，不要直接用count进行比较，而且value后面不要加括号，这里我是判断了两种情况，上面截图时已经作出了说明  
var total=document.getElementById("total");//代表填的总金额  
var price=document.getElementsByName("spot");//这里用的方法是getElementsByName，因为我们想实现的是单选框，所以每个单选框选项要设置相同的name值，在下面遇到的时候我还会提醒一下  
for(var i=0;i<price.length;i++)//得到所有name为spot的元素的一个数组  
\{  
    if(price\[i\].checked==true)//判断选了哪一个  
    \{  
    var dan=5-i; //代表单价  
    \}      
\}  
if((total.value)==(count.value)\*dan)\{b=true;\}  
else\{alert("数量和单价乘积不等于所填金额，请重新填"); b=false;\}  
if(b==true)  
\{  
    window.location.href="new.html";//跳转到成功界面  
\}  
\}  
</script>  
</head>  
<body>  
<font size=8 color=blue>  
<h1 align=center size=7>购货订单</h1>  
</font>  
<font size=5 color=red>  
<form  name="biaodan" >  
请输入姓名:  
<input type="text" name="yourname" id="name">  
<br/><br/>  
请填写电话号：  
<input type="text" name="yourphone" id="phone">  
<br/><br/>  
请填写数量：  
<input type="text" name="yourhowmany" id="count">  
<br/><br/>  
请填写金额：  
<input type="text" name="yourmoney" id="total">  
<br/><br/>  
请填写商品名称：  
<font size=5 color=red>  
<select name="selects" size=4>//size代表你可以看见四个选项  
<option value="apple">苹果</option>  
<option value="pear">梨</option>  
<option value="banada">香蕉</option>  
<option value="xigua">西瓜</option>  
<option value="mangguo">芒果</option>  
</select>  
</font>  
<br/><br/>  
请填写单价：  
<input type="radio" name="spot" value="sing">5元/斤//要实现单选框，所以每个name值要一样，小伙伴可以试着把他们的name值改成不一样的就会发现可以实现多选  
<input type="radio" name="spot" value="sport">4元/斤  
<input type="radio" name="spot" value="travel">3元/斤  
<br/><br/><br/>  
<input type="button" value="提交" οnclick="result()">  
</form>  
</font>  
</body>  
</html>

## **4、总结** ##

**很多标签和函数看着很简单，但是自己上手就会想不起来，出现各种各样的小问题，所以大家还是要自己试一试，我写的只是实现了题目的要求，小伙伴也可以自己加一些别的条件，比如名字不能为空，手机号码必须11位等约束来进一步改进代码。**

**这一题的分享就到这儿了，欢迎交流反馈哦^^**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70]: /images/20220503/84c83be4fa4349a8be36ac9baeeda75a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 1]: /images/20220503/d12d3a81df3540b4baef3a32e52b73e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 2]: /images/20220503/700954f3574346c5b0b5fd5e984e2f2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 3]: /images/20220503/5040e49042c24b58b082bdc1ce99fbac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 4]: /images/20220503/4f39931ef83d4dbb8d9123aed251ce4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk2MDQx_size_27_color_FFFFFF_t_70 5]: /images/20220503/0f84262f588a46c7b9ea4668b57ca6de.png