购物贷款计算器

一个群里看到有人问了这个例子，自己鼓捣写了一下，主要就是一点计算，部分细节还是需要注意的

思路：先获取输入文本框的值，进行一些运算，再把相应的值赋给表格里的input，在点击运行按钮的同时把原先隐藏的一行tr显示出来

重点：

value属性 http://www.w3school.com.cn/jsref/prop_password_value.asp

border-collapse属性 http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp

readonly 属性 http://www.w3school.com.cn/tags/att_input_readonly.asp

 

用jq实现

 1 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 2 <script>
 3 $("#add").click(function(){
 4         $("#second_tr").show();
 5         var oname=$("#name").val();
 6         var opirce=$("#pirce").val();
 7         var opay_first=$("#pay_first").val();
 8         var opay_time=$("#pay_time").val();
 9         var loan=opirce-opay_first;
10 
11         var rate=opay_time/100;
12         var pay_mon=(loan*(1+rate))/opay_time;
13         var pay_all=loan*(1+rate);
14 
15         $("#td1").attr("value",oname);
16         $("#td2").attr("value",loan);
17         $("#td3").attr("value",rate);
18         $("#td4").attr("value",pay_mon);
19         $("#td5").attr("value",pay_all);
20     });
21 </script>

 重点：

val()方法 http://www.w3school.com.cn/jquery/attributes_val.asp

attr()方法 http://www.w3school.com.cn/jquery/attributes_attr.asp

posted @ 2018-01-13 17:44  冷色调~  阅读(210)  评论(0)  编辑  收藏  举报