首页 > 软件开发 > HTML >

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

来源:互联网 2023-03-16 19:16:14 版权归原作者所有,如有侵权,请联系我们

网站开发经常会有这么一个需求:将计算结果四舍五入保留两位小数点!接下来您将和小编一起学习如何完成这一需求(注:例子只是为了方便演示!可以根据自己的需求来修改)sQh办公区 - 实用经验教程分享!

js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

工具/原料

  • 电脑
  • web开发编辑器

方法/步骤

  • 1

    打开我们的网页开发编辑器新建一个HTML网页文件sQh办公区 - 实用经验教程分享!

    js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

  • 2

    编写HTML demo(例子)代码:sQh办公区 - 实用经验教程分享!

    div id="demo">sQh办公区 - 实用经验教程分享!

    产品单价:em>1.86/em>/sQh办公区 - 实用经验教程分享!

    购买数量:input type="number" id="text" />/sQh办公区 - 实用经验教程分享!

    input type="button" id="btn" value="提交"/>/sQh办公区 - 实用经验教程分享!

    输出的值是:em id="result">/em>/sQh办公区 - 实用经验教程分享!

    /div>sQh办公区 - 实用经验教程分享!

    js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

  • 3

    编写JS代码:1.给提交按钮绑定点击事件sQh办公区 - 实用经验教程分享!

    代码:document.getElementById("btn").onclick=function(){}sQh办公区 - 实用经验教程分享!

    js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

  • 4

    编写JS代码:2.获取产品单价并转化成数字类型sQh办公区 - 实用经验教程分享!

    代码:var price = Number(document.getElementById("price").innerText);sQh办公区 - 实用经验教程分享!

    js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

  • 4该信息未经许可获取自百度经验
  • 5

    编写JS代码:3.获取购买数量输入框的值并转化成数字类型sQh办公区 - 实用经验教程分享!

    代码:var num = Number(document.getElementById("text").value);sQh办公区 - 实用经验教程分享!

    js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

  • 6

    编写JS代码:4.计算总价sQh办公区 - 实用经验教程分享!

    代码:var result = price * num;sQh办公区 - 实用经验教程分享!

    js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

  • 7

    编写JS代码:5.四舍五入保留两位小数,然后将结果显示到ID#result标签上sQh办公区 - 实用经验教程分享!

    document.getElementById("result").innerHTML=result.toFixed(2);sQh办公区 - 实用经验教程分享!

    js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

  • 8

    用浏览器打开我们编写的页面测试结果:sQh办公区 - 实用经验教程分享!

    完整代码:sQh办公区 - 实用经验教程分享!

    body>sQh办公区 - 实用经验教程分享!

    div id="demo">sQh办公区 - 实用经验教程分享!

    产品单价:em id="price">1.86/em>/sQh办公区 - 实用经验教程分享!

    购买数量:input type="number" id="text" />/sQh办公区 - 实用经验教程分享!

    input type="button" id="btn" value="提交"/>/sQh办公区 - 实用经验教程分享!

    输出的值是:em id="result">/em>/sQh办公区 - 实用经验教程分享!

    /div>sQh办公区 - 实用经验教程分享!

    /body>sQh办公区 - 实用经验教程分享!

    script type="text/javascript">sQh办公区 - 实用经验教程分享!

    // 为提交按钮添加点击事件sQh办公区 - 实用经验教程分享!

    document.getElementById("btn").onclick=function(){sQh办公区 - 实用经验教程分享!

    // 获取产品单价并转化成数字类型sQh办公区 - 实用经验教程分享!

    var price = Number(document.getElementById("price").innerText);sQh办公区 - 实用经验教程分享!

    // 获取购买数量输入框的值并转化成数字类型sQh办公区 - 实用经验教程分享!

    var num = Number(document.getElementById("text").value);sQh办公区 - 实用经验教程分享!

    // 计算总价sQh办公区 - 实用经验教程分享!

    var result = price * num;sQh办公区 - 实用经验教程分享!

    //四舍五入保留两位小数,然后将结果显示到ID#result标签上sQh办公区 - 实用经验教程分享!

    document.getElementById("result").innerHTML=result.toFixed(2);sQh办公区 - 实用经验教程分享!

    }sQh办公区 - 实用经验教程分享!

    /script>sQh办公区 - 实用经验教程分享!

    js怎么设置四舍五入保留两位小数点sQh办公区 - 实用经验教程分享!

  • 注意事项

    • 开发工具根据自己的喜欢,没有限制!
    • 实例只是为了演示!实际开发需要根据自己的需求进行修改

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!sQh办公区 - 实用经验教程分享!


    标签: HTML网站

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号