JavaScript权威指南 Loan Calculator示例说明

来源：互联网发布：贝叶斯网络维基百科编辑：程序博客网时间：2024/05/22 23:13

今天开始学习JavaScript权威指南的第一章节，首先学会里JavaScript的代码如何嵌套在HTML代码中，哈哈哈哈。。白痴都知道。。我是新手哈。。然后手打了一次Table of Factorials（阶乘表）的示例。学习到了一个document.write()方法。是作为输出HTML文字到HTML文本的函数。第一章有点多内容的是最好一个习题，Loan Calculator。它确实让我接触了很多新的知识。

我一开始在vs2008直接建立了个webform，然后就开始按照书中的代码一个个打，首先说下代码包含的知识点，给HTML中的ID和NAME赋予上字符，然后添加了几个input框，type为"text",需要输入内容时调用所写的javascript函数calculate()，onchange = "calculate();"该程序需要计算几种类型的贷款支付，而且是点击"compute"按钮后得出这几个结果。当然calculate()函数中有大家熟悉的document.gerElementById(),我在没学习javascript之前就多次见到了，有些别的如innerHTML,去查了一下，用法是　tablerowObject.innerHTML=HTML，该用法返回的值是包括了从对象的起始位置到结束位置的全部内容，包括HTML标签，还有一个陌生的是toFixed(num)函数，toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.还有当你为Form中的name属性赋值后，可以用document.Formname.name.value的方式输出form中的变量的值。

好都了解完这些陌生的知识点后，我很快就把代码给敲完了。。结果无法输出数字。这让我很郁闷，我应该是完完全全按照书上的打下来的啊，结果在对比了3次后发现原来在<form>中我的代码是有runat = "server"而书上的没有，这究竟是为什么呢？查了一下，网上大概说的是在服务器上运行，而且不对应HTML，所以应该是用了runat = "Server"则无法获得FORM中的input控件中的name值，所以最后得不到所需要的结果。大家也可以给点自己的意见，一起学习JavaScript!

源代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CH1Ex1-3.aspx.cs" Inherits="JavaScriptGuide.CH1Ex1_3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>JavaScript Loan Calculator</title>
    <style>
    .result {font-weight:bold}
    #payment{text-decoration:underline;}
    </style>
</head>
<body>
    <form name="loandata">
    <table>
    <tr>
    <td><b>Enter Loan Information:</b></td>
    </tr>
    <tr>
    <td>1) Amount of loan(any currency):</td>
    <td><input type = "text" name = "principal" onchange = "calculate();"/></td>
    </tr>
    <tr>
    <td>2) Annual percentage rate of interest:</td>
    <td><input type = "text" name = "interest" onchange = "calculate();"/></td>
    </tr>
    <tr>
    <td>3) Repayment period in years:</td>
    <td><input type = "text" name = "years" onchange = "calculate();"/></td>
    </tr>
    <tr>
    <td></td>
    <td><input type = "button" value = "Compute" onclick = "calculate();"/></td>
    </tr>
    <tr><td><b>Payment Information:</b></td></tr>
    <tr>
    <td>4) Your monthly payment:</td>
    <td>$<span class = "result" id = "payment"></span></td>
    </tr>
    <tr>
    <td>5) Your total payment:</td>
    <td>$<span class = "result" id = "total"></span></td>
    </tr>
    <tr>
    <td>6) Your total interest payment:</td>
    <td>$<span class = "result" id = "totalinterest"></span></td>
    </tr>
    </table>
    </form>

    <script language = "Javascript">
        function calculate() {

            var principal = document.loandata.principal.value;
            var interest = document.loandata.interest.value / 100 / 12;
            var payments = document.loandata.years.value * 12;

var x = Math.pow(1 + interest, payments);
var monthly = (principal * x * interest) / (x - 1);

            var payment = document.getElementById("payment");
            var total = document.getElementById("total");
            var totalinterest = document.getElementById("totalinterest");

if (isFinite(monthly)) {

                payment.innerHTML = monthly.toFixed(2);
                total.innerHTML = (monthly * payments).toFixed(2);
                totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2);

}

            else {
                payment.innerHTML = "";
                total.innerHTML = "";
                totalinterest.innerHTML = "";

            }
        }
    </script>
</body>
</html>