首页 > 软件开发 > HTML >

如何利用JavaScript实现数值格式化并保留小数

来源:互联网 2023-03-16 19:10:46 373

最近,在做项目的过程中,我碰到了对数值进行格式化。从数据库查询出结果是字符串类型,而图形中是要数值类型,直接填充到图形会不显示;并且图形中要求数据保留三位小数,如果操作才能保证图形正常展示。下面利用一个实例说明该如何实现,具体操作如下:63w办公区 - 实用经验教程分享!

工具/原料

  • Dreamweaver CS6
  • 浏览器
  • 截图工具
  • CSS
  • HTML

方法/步骤

  • 1

    第一步,首先,新建一个HTML静态页面,修改title标签内容,并在body标签里添加一个div,设置div的样式,63w办公区 - 实用经验教程分享!

    如下图所示:63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

  • 2

    第二步,上述步骤中,在div添加一个文本框和按钮,并在按钮中添加点击事件,63w办公区 - 实用经验教程分享!

    如下图所示:63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

  • 3

    第三步,在按钮中添加了点击事件,那需要在script>/script>中编写点击函数,如下图所示:63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

  • 4

    第四步,运行HTML静态页面,在浏览器中查看运行结果63w办公区 - 实用经验教程分享!

    在输入框中输入数值,点击按钮,弹出结果;再次在输入框中不输入任何字符,点击按钮,弹出“NAN”,这时就发现,弹出结果有问题63w办公区 - 实用经验教程分享!

    如下图所示:63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

  • 5

    第五步,由第4步可知,输入框中输入的内容未作判断。因此,在格式化数据前先判断变量,如果变量为null或空字符串,令其为063w办公区 - 实用经验教程分享!

    如下图所示:63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

  • 5此文章未经许可获取自百度经验
  • 6

    第六步,输入框中输入浮点数值,但是未按照要求保留三位小数,因此需要在格式化后调用toFixed(3)63w办公区 - 实用经验教程分享!

    如下图所示:63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

  • 7

    第七步,再次运行静态页面,分别在输入框中输入598.3659、598.3654和0,查看结果,如下图所示:63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

    如何利用JavaScript实现数值格式化并保留小数63w办公区 - 实用经验教程分享!

  • 注意事项

    • 注意parseFloat函数用法
    • 注意JS中toFixed()的用法和应用场景

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


    标签: JAVASCRIPTCSSHTML

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