微信小程序计算器（含源码）、含js精确运算代码

原创

已于 2023-05-01 17:08:18 修改 · 8.8k 阅读

标签

#微信小程序 #小程序 #前端

于 2023-03-03 20:10:41 首次发布

本文介绍了如何制作一个记账本小程序中的计算器功能，包括WXML结构、Less和WXSS样式文件、JSON配置以及JavaScript精确计算模块的使用，提供了完整的源码示例，并对可能出现的浮点数计算误差进行了处理。

（2）xxxx.wxss文件（不会使用 less 的可以用这个）

一、引言与效果图

最近在做一个记账本小程序，其中需要用到计算器，但是在网上找的代码，用起来不是不符合我的想法，就是看着非常难受，于是还是自己写了一个

二、源码

0.目录结构：

名字 ( test ) 是我随便取的，你们可以取别的，但是accurate.js的名字请勿改动

1.xxxx.wxml文件

对应上方目录结构的： test.wxml

<view class="counter">
  <view class="result">
    <view class="showResult">
      <view class="result-num">{
  
  {counter.posture[0]}}</view>
      <view class="result-num">{
  
  {counter.posture[1]}}</view>
      <view class="result-num">{
  
  {counter.posture[2]}}</view>
    </view>
  </view>
  <view class="btns">
    <view class="row">
      <view class="col clear" hover-class="hover-bg" bindtap="resetBtn">C</view>
      <view class="col" hover-class="hover-bg" bindtap="delBtn">DEL</view>
      <view class="col chu" hover-class="hover-bg" bindtap="opBtn" data-val="%">%</view>
      <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="÷">÷</view>
    </view>
    <view class="row">
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="7">7</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="8">8</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="9">9</view>
      <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="×">×</view>
    </view>
    <view class="row">
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="4">4</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="5">5</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="6">6</view>
      <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="-">-</view>
    </view>
    <view class="row">
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="1">1</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="2">2</view>
      <view class="col" hover-class="hover-bg" bindtap="numBtn" data-val="3">3</view>
      <view class="col" hover-class="hover-bg" bindtap="opBtn" data-val="+">+</view>
    </view>
    <view class="row">
      <view class="col zero" hover-class="hover-bg" bindtap="numBtn" data-val="0">0</view>
      <view class="col" hover-class="hover-bg"

最低0.47元/天解锁文章