js怎么设置四舍五入保留两位小数点

2025-10-25 02:41:21

1、打开我们的网页开发编辑器新建一个HTML网页文件

js怎么设置四舍五入保留两位小数点

2、编写HTML demo(例子)代码:

<div id="demo">

产品单价:<em>1.86</em>

购买数量:<input type="number" id="text" />

<input type="button" id="btn" value="提交"/>

输出的值是:<em id="result"></em>

</div>

js怎么设置四舍五入保留两位小数点

3、编写JS代码:1.给提交按钮绑定点击事件

代码:document.getElementById("btn").onclick=function(){}

js怎么设置四舍五入保留两位小数点

4、编写JS代码:2.获取产品单价并转化成数字类型

代码:var price =  Number(document.getElementById("price").innerText);

js怎么设置四舍五入保留两位小数点

5、编写JS代码:3.获取购买数量输入框的值并转化成数字类型

代码:var num =  Number(document.getElementById("text").value);

js怎么设置四舍五入保留两位小数点

6、编写JS代码:4.计算总价

代码:var result = price * num;

js怎么设置四舍五入保留两位小数点

7、编写JS代码:5.四舍五入保留两位小数,然后将结果显示到ID#result标签上

document.getElementById("result").innerHTML=result.toFixed(2);

js怎么设置四舍五入保留两位小数点

8、用浏览器打开我们编写的页面测试结果:

完整代码:

<body>

<div id="demo">

产品单价:<em id="price">1.86</em>

购买数量:<input type="number" id="text" />

<input type="button" id="btn" value="提交"/>

输出的值是:<em id="result"></em>

</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>

js怎么设置四舍五入保留两位小数点

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢