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>
