正文

javascript概述

 2022-04-14  782

关键词：

示例：javascript贷款计算器

　　相关技术：

　　　　1、如何在文档中查找元素；

　　　　2、如何通过表单input元素来获取用户的输入数据；

　　　　3、如何通过文档元素来设置HTML内容；

　　　　4、如何将数据存储在浏览器中；

　　　　5、如何使用脚本发起HTTP请求；

　　　　6、如何利用<canvas>元素绘图。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Javascript Loan Calculator</title>
    <style type="text/css">
        .output {
            font-weight: bold;
        }

        #payment {
            text-decoration: underline;
        }

        #graph {
            border: solid black 1px;
        }

        th, td {
            vertical-align: top;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>Enter Loan Data:</th>
        <td></td>
        <th>Loan Balance, Cumulative Equity, and Interest Payments</th>
    </tr>
    <tr>
        <td>Amount of the loan ($):</td>
        <td><input id="amount" onchange="calculate();"/></td>
        <td rowspan="8">
            <canvas id="graph" width="400" height="250"></canvas>
        </td>
    </tr>
    <tr>
        <td>Annual interest (%):</td>
        <td><input id="apr" onchange="calculate();"/></td>
    </tr>
    <tr>
        <td>Repayment period (years):</td>
        <td><input id="years" onchange="calculate();"/></td>
    </tr>
    <tr>
        <td>Zipcode (to find lenders):</td>
        <td><input id="zipcode" onchange="calculate();"/></td>
    </tr>
    <tr>
        <th>Approximate Payments:</th>
        <td>
            <button onclick="calculate();">Calculate</button>
        </td>
    </tr>
    <tr>
        <td>Monthly payment:</td>
        <td>$<span class="output" id="payment"></span></td>
    </tr>
    <tr>
        <td>Total payment:</td>
        <td>$<span class="output" id="total"></span></td>
    </tr>
    <tr>
        <td>Total interest (%):</td>
        <td>$<span class="output" id="totalinterest"></span></td>
    </tr>
    <tr>
        <th>Sponsors:</th>
        <td colspan="2">Apply for your loan with one of these fine lenders:
            <div id="lenders"></div>
        </td>
    </tr>
</table>
<script type="text/javascript">
    "use strict";//如果浏览器支持的话，开启ECMAScript 5的严格模式
    window.onload = function () {
        //如果浏览器支持本地存储，则获取上次保存数据
        if (window.localStorage && localStorage.loan_amount) {
            document.getElementById("amount").value = localStorage.loan_amount;
            document.getElementById("apr").value = localStorage.loan_apr;
            document.getElementById("years").value = localStorage.loan_years;
            document.getElementById("zipcode").value = localStorage.loan_zipcode;
        }
    };
    function calculate() {
        var amount = document.getElementById("amount");
        var apr = document.getElementById("apr");
        var years = document.getElementById("years");
        var zipcode = document.getElementById("zipcode");
        var payment = document.getElementById("payment");
        var total = document.getElementById("total");
        var totalinterest = document.getElementById("totalinterest");

        var principal = parseFloat(amount.value);
        var interest = parseFloat(apr.value) / 100 / 12;//百分比转为小数，年利率转为月利率
        var payments = parseFloat(years.value) * 12;//年度赔付转为月度赔付

        //计算月度赔付数据
        var x = Math.pow(1 + interest, payments);
        var monthly = (principal * x * interest) / (x - 1);

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

            //保存用户数据
            save(amount.value, apr.value, years.value, zipcode.value);

            //展示本地放贷人
            try {
                getLenders(amount.value, apr.value, years.value, zipcode.value);
            } catch (e) {

            }
            chart(principal, interest, monthly, payments);
        } else {
            payment.innerHTML = "";
            total.innerHTML = "";
            totalinterest.innerHTML = "";
            chart();//清空图表
        }
    }
    function save(amount, apr, years, zipcode) {
        if (window.localStorage) {
            //浏览器支持本地存储
            localStorage.loan_amount = amount;
            localStorage.loan_apr = apr;
            localStorage.loan_years = years;
            localStorage.loan_zipcode = zipcode;
        }
    }
    function getLenders(amount, apr, years, zipcode) {
        //如果浏览器不支持XMLHttpRequest对象，则退出
        if (!window.XMLHttpRequest) {
            return;
        }
        var ad = document.getElementById("lenders");
        if (!ad) {
            return;
        }

        var url = "getLenders.php" + "?amt=" + encodeURIComponent(amount) + "&apr=" + encodeURIComponent(apr) +
                "&yrs=" + encodeURIComponent(years) + "&zip=" + encodeURIComponent(zipcode);
        var req = new XMLHttpRequest();
        req.open("GET", url);
        req.send(null);
        req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {
                var response = req.responseText;
                var lenders = JSON.parse(response);
                var list = "";
                for (var i = 0; i < lenders.length; i++) {
                    list += "<li><a href=‘" + lenders[i].url + "‘>" + lenders[i].name + "</a></li>";
                }
                ad.innerHTML = "<ul>" + list + "</ul>"
            }
        };
    }
    function chart(principal, interest, monthly, payments) {
        var graph = document.getElementById("graph");
        graph.width = graph.width;//巧妙手法清除并重置画布
        if (arguments.length == 0 || !graph.getContext) {
            //不传入参数，或浏览器不支持画布，直接返回
            return;
        }

        var g = graph.getContext(‘2d‘);
        var width = graph.width;
        var height = graph.height;

        //将付款数字和美元数据转换为像素
        function paymentToX(n) {
            return n * width / payments;
        }

        function amountToY(a) {
            return height - (a * height / (monthly * payments * 1.05));
        }

        g.moveTo(paymentToX(0), amountToY(0));//从左下方开始
        g.lineTo(paymentToX(payments), amountToY(monthly * payments));//绘至右上方
        g.lineTo(paymentToX(payments), amountToY(0));//再至右下方
        g.closePath();//将结尾连接至开头
        g.fillStyle = "#f88";//亮红色
        g.fill();//填充矩形
        g.font = "bold 12px sans-serif";//定义字体
        g.fillText("Total Interest Payments", 20, 20);//将文字绘制到图中

        var equity = 0;
        g.beginPath();//开始绘制新图形
        g.moveTo(paymentToX(0), amountToY(0));//从左下方开始
        for (var p = 1; p <= payments; p++) {
            //赔付利息
            var thisMonthsInterest = (principal - equity) * interest;
            equity += (monthly - thisMonthsInterest);
            g.lineTo(paymentToX(p), amountToY(equity));
        }
        g.lineTo(paymentToX(payments), amountToY(0));
        g.closePath();
        g.fillStyle = "green";
        g.fill();
        g.fillText("Total Equity", 20, 35);

        var bal = principal;
        g.beginPath();
        g.moveTo(paymentToX(0), amountToY(bal));
        for (var p = 1; p <= payments; p++) {
            var thisMonthsInterest = bal * interest;
            bal -= (monthly - thisMonthsInterest);
            g.lineTo(paymentToX(p), amountToY(bal));
        }
        g.lineWidth = 3;
        g.stroke();
        g.fillStyle = ‘black‘;
        g.fillText("Loan Balance", 20, 50);
        //X轴
        g.textAlign = "center";
        var y = amountToY(0);
        for (var year = 1; year * 12 <= payments; year++) {
            var x = paymentToX(year * 12);
            g.fillRect(x - 0.5, y - 3, 1, 3);
            if (year == 1) {
                g.fillText("Year", x, y - 5);
            }
            if (year % 5 == 0 && year * 12 !== payments) {
                g.fillText(String(year), x, y - 5);
            }
        }
        //赔付数额标记在有边界
        g.textAlign = ‘right‘;
        g.textBaseline = ‘middle‘;
        var ticks = [monthly * payments, principal];
        var rightEdge = paymentToX(payments);
        for (var i = 0; i < ticks.length; i++) {
            var y = amountToY(ticks[i]);
            g.fillRect(rightEdge -

第九十六节，javascript概述

JavaScript概述学习要点：1.什么是JavaScript2.JavaScript特点3.JavaScript历史4.JavaScript核心5.开发工具集 JavaScript诞生于1995年。它当时的目的是为了验证表单输入的验证。因为在JavaScript问世之前，表单的验证都是通过服务器端验证... 查看详情

javascript之基础-1javascript(概述基础语法)

一、JavaScript概述JavaScript概念 -JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言 - JavaScript解释器作为JS脚本的运行环境，有如下两种呈现方式 -独立安装的JavaScript解释器; -嵌入在... 查看详情

unit04：javascript概述javascript基础语法流程控制

　　　　Unit04：JavaScript概述、JavaScript基础语法、流程控制　　　　my.jsfunctionf3(){alert("唐胜伟");}demo1.html 演示点击按钮，弹出提示框<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttit 查看详情

javascript概述

1.什么是JavaScript？JavaScript是一门脚本语言。但是我们的JavaScript既可以说他是一门脚本语言，又可以说他不是一门脚本语言。在ES5之前，JavaScript一直作为脚本语言存在的。但是到ES6，我们的JavaScript已经变成了一门通过编程语言... 查看详情

javascript运算符语法概述

前面的话　　javascript中的运算符大多由标点符号表示，少数由关键字表示，它们的语法言简意赅，它们的数量却着实不少。运算符始终都遵循着一些固定语法，只有了解并掌握这些内容，才能正确使用运算符。本文将主要介绍ja... 查看详情

javascript权威指南1.概述

JavaScript：　　1.面向对象、解释型（非编译型）的程序设计语言。一种脚本语言　　2.松散类型语言。变量不必具有一个明确的类型。对象中的属性名可以映射为任意的属性值　　3.原始数据类型：数字、字符串、布尔值；内建... 查看详情

javascript的基本概述

JavaScript概述网页中各技术的作用技术作用HTML创建网页结构css美化网页JavaScript用于网页交互，让网页变得更加生动，提高用户的体验js初次体验需求：使用js1.JavaScript的两种引入方式：1.使用<JavaScript>标签写... 查看详情

javascript概述

p.p1{margin:0.0px0.0px0.0px0.0px;text-align:justify;font:10.5px"TrebuchetMS";color:#000000}p.p2{margin:0.0px0.0px0.0px0.0px;text-align:justify;font:10.5px"TrebuchetMS";color:#000000;min-height:12.0px} 查看详情

javascript概述

示例：javascript贷款计算器　　相关技术：　　　　1、如何在文档中查找元素；　　　　2、如何通过表单input元素来获取用户的输入数据；　　　　3、如何通过文档元素来设置HTML内容；　　　　4、如何将数据存储在浏览器中；... 查看详情

前端系列之javascript基础知识概述

...，共同进步！有任何问题，请后台留言联系！1、什么是JavaScript（1）、JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。（2）、JavaScript被设计... 查看详情

javascript概述

什么是JavaScriptWeb标准分为3个部分：分为结构（HTML），样式（CSS），行为（JavaScript），在ES6之前，JS被认为是一门Web脚本语言。但是在从ES6开始，JS已经成为了一门通用的编程语言。 JS学习成本低，容易上手，不需要搭建复... 查看详情

javascript学习-javascript内置对象1-对象概述

对象（object）：　　JavaScript中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和　　　　方法。JavaScript提供多个内建对象，比如String、Date、Array等等。对象的属性：　　反映该对象某些特定的性质的... 查看详情

0001.javascript简单概述

简单说明:1. JavaScript问世之前表单数据验证都是通过服务端验证,又由于拨号上网年代服务器验证非常慢,JavaScript的横空出世完美解决了此问题,完美支持客户端表单验证2. 经过多年发展,JavaScript从一个简单的输入验证成为一... 查看详情

javascript之dom-1dhtml概述dom概述

一、DHTML概述 DHTML简介 -DHTML:DynamicHTML,动态HTML,不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能再下载后仍然能实时变换页面元素效果的网页设计概念 -DHTML的功能 &n... 查看详情

网站前端_javascript.0001.javascript简单概述

javascript概述

　　1.什么是JavaScriptWeb标准分为3个部分：分为结构（HTML），样式（CSS），行为（JavaScript），在ES6之前，JS被认为是一门Web脚本语言。但是在从ES6开始，JS已经成为了一门通用的编程语言。 JS学习成本低，容易上手，不需要搭... 查看详情

jquery概述

JQuery是什么在JavaScript基础上开发出来的，对javascript进行封装，功能更强大，操作更方便的一种JavaScript库JQuery=JavaScript+Query=通过JavaScript从文档中查询元素，并对其进行操作特点简洁的语法，跨浏览器的兼容性&n... 查看详情

javascript之ajax-5json(json概述使用json)

一、JSON概述JSON概述 -JSON:JavaScriptObjectNotation,JavaScript对象表示法，原本是JavaScript中创建对象的一种语法 -现在，JSON已经从JavaScript中独立出来，作为一种独立的字符串数据表示法，被Java、C#、C++、PHP、OC等几乎所有主流语... 查看详情