微信扫一扫打赏支持

js进阶 9-7 自动计算商品价值

js进阶 9-7  自动计算商品价值

一、总结

一句话总结：

1、form表单控件value属性：属性可取值可赋值

2、文本onchange事件

3、form及form中控件通过name访问元素

 

 

二、js进阶 9-7  自动计算商品价值

1、案例描述

自动计算金额

  • 案例要点1：复习上一节课的知识点，完成一个自动计算商品价格的小练习。

  • 案例要点2：input元素的type为’hidden’代表一个 HTML 表单中的某个隐藏输入域。

2、截图

 

3、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自动计算金额</title>
 6     <style>
 7         #main{
 8             border: 2px solid orange;
 9             float: left;
10             padding: 5px;
11             background: rgba(120,60,30,0.2);
12         }
13     </style>
14 </head>
15 <body>
16     <div id="main">
17         <h5>购物信息</h5>
18         <form action="" name="form1">
19             <p><input type="hidden" value="货物编码：0027"></p>
20             <p>消费金额：<input type="text" name="money"></p>
21             <p>商品单价：<input type="text" name="price" value="21" disabled="">元/件</p>
22             <p>购买数量：<input type="text" name="num" onchange="count()"></p>
23             <p><input type="button" value="确定购买" onclick=""><input type="reset" value="重置内容"></p>
24         </form>
25     </div>
26     <script>
27         function count(){
28             var Money,Price,Num;
29             Price=document.form1.price.value
30             Num=document.form1.num.value;
31             Money=Price*Num;
32             document.form1.money.value=Money
33         }
34     </script>
35 </body>
36 </html>

 

 

 

 

 

 

 

 

 

 
 
posted @ 2018-06-09 20:40  范仁义  阅读(597)  评论(0)    收藏  举报