购物贷款计算器

最新推荐文章于 2024-10-10 10:50:43 发布

aogn3394

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moying328/p/8279975.html

版权

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

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <style type="text/css"> table{border-collapse: collapse;} #second_tr input{border: none;width: 100px;text-align: center;} td{width: 100px;text-align: center;} </style> </head> <body> <div> <h3>购物贷款计算器</h3> <h3>输入数据</h3> <span>利率规则：一个月利率0.01二个月0.02逐月递增12个月0.12</span> <ul> <li>商品名称：<input type="text" name="name" id="name"></li> <li>商品价格：<input type="text" name="pirce" id="pirce">元</li> <li>首付金额：<input type="text" name="pay_first" id="pay_first">元</li> <li>还款期限：<input type="text" name="pay_time" id="pay_time">月</li> <li><input type="button" name="add" value="计算" id="add"></li> </ul> <h3>输出结果</h3> <table border="1"> <tbody> <tr> <td>商品名称</td> <td>贷款金额</td> <td>贷款利率</td> <td>每月还款</td> <td>总共还款</td> </tr> <tr id="second_tr" style="display: none;"> <td><input type="text" name="td1" value="" id="td1" readonly="true" ></td> <td><input type="text" name="td2" value="" id="td2" readonly="true"></td> <td><input type="text" name="td3" value="" id="td3" readonly="true"></td> <td><input type="text" name="td4" value="" id="td4" readonly="true"></td> <td><input type="text" name="td5" value="" id="td5" readonly="true"></td> </tr> </tbody> </table> </div> </body> <script type="text/javascript"> var oadd=document.getElementById("add"); oadd.οnclick=function(){ var osecond_tr=document.getElementById("second_tr"); osecond_tr.style.display=""; var oname=document.getElementById("name").value; var opirce=document.getElementById("pirce").value; var opay_first=document.getElementById("pay_first").value; var opay_time=document.getElementById("pay_time").value; var loan=opirce-opay_first; var rate=opay_time/100; var pay_mon=(loan*(1+rate))/opay_time; var pay_all=loan*(1+rate); document.getElementById("td1").value=oname; document.getElementById("td2").value=loan; document.getElementById("td3").value=rate; document.getElementById("td4").value=pay_mon; document.getElementById("td5").value=pay_all; } </script> </html>

思路：先获取输入文本框的值，进行一些运算，再把相应的值赋给表格里的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>