网站开辟经常会有这么一个需求:将计较成果四舍五入保留两位小数点!接下来您将和小编一路进修若何完当作这一需求(注:例子只是为了便利演示!可以按照本身的需求来点窜)
打开我们的网页开辟编纂器新建一个HTML网页文件
编写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>
编写JS代码:1.给提交按钮绑心猿意马点击事务
代码:document.getElementById("btn").onclick=function(){}
编写JS代码:2.获取产物单价并转化当作数字类型
代码:var price = Number(document.getElementById("price").innerText);
编写JS代码:3.获取采办数目输入框的值并转化当作数字类型
代码:var num = Number(document.getElementById("text").value);
编写JS代码:4.计较总价
代码:var result = price * num;
编写JS代码:5.四舍五入保留两位小数,然后将成果显示到ID#result标签上
document.getElementById("result").innerHTML=result.toFixed(2);
用浏览器打开我们编写的页面测试成果:
完整代码:
<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>
0 篇文章
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!