网站开辟经常会有这么一个需求：将计较成果四舍五入保留两位小数点！接下来您将和小编一路进修如何完当作这一需求（注：例子只是为了便利演示！可以按照本身的需求来点窜）
工具/原料
- 电脑
- web开辟编纂器
方式/步骤
- 1
打开我们的网页开辟编纂器新建一个HTML网页文件
- 2
编写HTML demo(例子)代码：
<div id="demo">
<p>产物单价：<em>1.86</em></p>
<p>采办数目：<input type="number" id="text" /></p>
<p><input type="button" id="btn" value="提交"/></p>
<p>输出的值是：<em id="result"></em></p>
</div>
- 3
编写JS代码：1.给提交按钮绑定点击事务
代码：document.getElementById("btn").onclick=function(){}
- 4
编写JS代码：2.获取产物单价并转化当作数字类型
代码：var price = Number(document.getElementById("price").innerText);
- 5
编写JS代码：3.获取采办数目输入框的值并转化当作数字类型
代码：var num = Number(document.getElementById("text").value);
- 6
编写JS代码：4.计较总价
代码：var result = price * num;
- 7
编写JS代码：5.四舍五入保留两位小数,然后将成果显示到ID#result标签上
document.getElementById("result").innerHTML=result.toFixed(2);
- 8
用浏览器打开我们编写的页面测试成果：
完整代码：
<body>
<div id="demo">
<p>产物单价：<em id="price">1.86</em></p>
<p>采办数目：<input type="number" id="text" /></p>
<p><input type="button" id="btn" value="提交"/></p>
<p>输出的值是：<em id="result"></em></p>
</div>
</body>
<script type="text/javascript">
// 为提交按钮添加点击事务
document.getElementById("btn").onclick=function(){
// 获取产物单价并转化当作数字类型
var price = Number(document.getElementById("price").innerText);
// 获取采办数目输入框的值并转化当作数字类型
var num = Number(document.getElementById("text").value);
// 计较总价
var result = price * num;
//四舍五入保留两位小数,然后将成果显示到ID#result标签上
document.getElementById("result").innerHTML=result.toFixed(2);
}
</script>
