【JavaScript】JavaScript学习篇#1——JavaScript实现计算借贷支付

最新推荐文章于 2022-04-25 10:00:39 发布

沟沟里的农民

最新推荐文章于 2022-04-25 10:00:39 发布

阅读量1.5k

点赞数

分类专栏： Web前端开发文章标签： javascript 计算机 js 脚本语言 html

本文链接：https://blog.csdn.net/WolfOfSiberian/article/details/39186493

版权

Web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、JavaScript

JavaScript，一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。然而现在JavaScript也可被用于网络服务器，如Node.js。

在1995年时，由网景公司的布兰登·艾克，在网景导航者浏览器上首次设计实作而成。因为网景公司与升阳公司合作，网景公司管理层次结构希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

2、概论

一般来说，完整的JavaScript包括以下几个部分：

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

它的基本特点如下：

是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

嵌入动态文本于HTML页面
对浏览器事件作出响应
读写HTML元素
在数据被提交到服务器之前验证数据
检测访客的浏览器信息
控制cookies，包括创建和修改等

3、简单例子

JavaScript编写的借贷支付金额计算器

HTML脚本内容：

<html>
<head>
<title>用JavaScript计算借贷支付</title>
<style type="text/css">
	/*CSS Style sheet*/
	/*对标签属性class="result"生效*/
	.result
	{
	  font-weight:bold;
	}
	/*对标签属性id=payment生效*/
	#payment
	{
	  text-decoration:underline;
	}
</style>
</head>
<body>
<form name="loandataForm">
  <table>
    <tr>
    	<td><b>输入借贷信息：</b></td>
  	</tr>
  	<tr>
  		<td>1)Amount of the loan(any currency):</td>
  		<td><input type="text" name="principal" οnchange="calculate();"/></td>
  	</tr>
  	<tr>
  		<td>2)Annual percentage rate of interest:</td>
  		<td><input type="text" name="interest" οnchange="calculate();"/></td>
  	</tr>
  	<tr>
  		<td>3)Repayment period in years:</td>
  		<td><input type="text" name="years" οnchange="calculate();"/></td>
  	</tr>
  	<tr>
  		<td></td>
  		<td><input type="button" value="Compute" οnclick="calculate();"/></td>
  	</tr>
  	<tr><td><b>付款信息：</b></td></tr>
  	<tr>
  		<td>4)Your monthly payment:</td>
  		<td>$<span class="result" id="payment"/></td>
  	</tr>
  	<tr>
  		<td>5)Your total payment:</td>
  		<td>$<span class="result" id="total"/></td>
  	</tr>
  	<tr>
  		<td>6)Your total interest payments:</td>
  		<td>$<span class="result" id="totalinterest"/></td>
  	</tr>
  </table>
</form>
<script type="text/javascript">
	function calculate(){
		/*
		*  获取form表单中控件的值
		*/
		var principal=document.loandataForm.principal.value;
		var interest=document.loandataForm.interest.value/100/12;/*百分比年利率转换为月利率值*/
		var payments=document.loandataForm.years.value * 12;/*年转换为月数*/
		
		/*
		*下面计算月支付额，使用很少的数学函数
		*/
		var x=Math.pow(1+interest,payments);
		var monthly=(principal*x*interest)/(x-1);
		
		/*
		*从form表单中获取<span>标签元素
		*/
		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>

浏览器中运行效果：