文档章节

一个解决js浮点运算精度的代码

BarZu
 BarZu
发布于 2018/02/01 11:05
字数 367
阅读 2122
收藏 43

比市面上很多解决方案都要准确的方案^_^

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  操作数1:<input id="a">
  操作数2:<input id="b">
  <button>加</button>
  <button>减</button>
  <button>乘</button>
  <button>除</button>
  结果:<span id="result"></span>
  <script>
// 补0
function padding0 (p) {
  var z = ''
  while (p--) {
    z += '0'
  }
  return z
}

/**
 * 解决小数精度问题
 * @param {*数字} a
 * @param {*数字} b
 * @param {*符号} sign
 * fixedFloat(0.3, 0.2, '-')
 */
function fixedFloat (a, b, sign) {
  function handle (x) {
    var y = String(x)
    var p = y.lastIndexOf('.')
    if (p === -1) {
      return [y, 0]
    } else {
      return [y.replace('.', ''), y.length - p - 1]
    }
  }
  // v 操作数1, w 操作数2, s 操作符, t 精度
  function operate (v, w, s, t) {
    switch (s) {
      case '+': return (v + w) / t
      case '-': return (v - w) / t
      case '*': return (v * w) / (t * t)
      case '/': return (v / w)
    }
  }

  var c = handle(a)
  var d = handle(b)
  var k = 0

  if (c[1] === 0 && d[1] === 0) {
    return operate(+c[0], +d[0], sign, 1)
  } else {
    k = Math.pow(10, Math.max(c[1], d[1]))
    if (c[1] !== d[1]) {
      if (c[1] > d[1]) {
        d[0] += padding0(c[1] - d[1])
      } else {
        c[0] += padding0(d[1] - c[1])
      }
    }
    return operate(+c[0], +d[0], sign, k)
  }
}
// 加
function plus (a, b) {
  return fixedFloat(a, b, '+')
}
// 减
function minus (a, b) {
  return fixedFloat(a, b, '-')
}
// 乘
function multiply (a, b) {
  return fixedFloat(a, b, '*')
}
// 除
function division (a, b) {
  return fixedFloat(a, b, '/')
}
  </script>

  <script>
  // 操作部分
  var a = document.getElementById('a')
  var b = document.getElementById('b')
  var result = document.getElementById('result')
  document.addEventListener('click', function (e) {
    if (e.target.nodeName === 'BUTTON') {
      var v = 0
      switch (e.target.innerText) {
        case '加': result.innerText = plus(a.value, b.value)
          break
        case '减': result.innerText = minus(a.value, b.value)
          break
        case '乘': result.innerText = multiply(a.value, b.value)
          break
        case '除': result.innerText = division(a.value, b.value)
          break
      }
    }
  })
  </script>
</body>
</html>

© 著作权归作者所有

BarZu

BarZu

粉丝 50
博文 21
码字总数 20303
作品 4
广州
高级程序员
私信 提问
加载中

评论(2)

汝莫离
汝莫离
完美解决
局长
局长
简洁~~已推荐
JavaScript 浮点数运算的精度问题

在 JavaScript 中整数和浮点数都属于 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此。 所以我们在打印 这样的浮点数的结果是 而非 。在一些特殊的数值表示中,例如金额,...

xiaogg
01/07
46
0
Javascript浮点数运算及比较代码收集整理

以下代码转自:http://segmentfault.com/a/1190000000324193 浮点数加法: /** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较...

Jacky.Wang
2015/10/29
308
0
JS四则运算与四舍五入精度问题及解决方案

一、Javascript精度问题业务背景 JS中 0.1+0.2 = 0.3000000000000004的问题,在很多业务场景里都是一个令人头痛的问题。尤其是在大型的电商企业,货币基金股票行业的网页中,JS四则运算和toF...

StevenLikeWatermelon
2018/11/06
0
0
js数值计算的处理,防止精度误差

(解决方法一:重写浮点运算的函数) //除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 //调...

纯洁徐
2015/01/30
5K
2
浮点数精度问题透析:小数计算不准确+浮点数精度丢失根源

在知乎上上看到如下问题: 浮点数精度问题的前世今生? 1.该问题出现的原因 ? 2.为何其他编程语言,比如java中可能没有js那么明显 3.大家在项目中踩过浮点数精度的坑? 4.最后采用哪些方案规...

zhoulujun
05/17
21
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
507
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
22
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
11
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
33
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
33
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部