1. Toy模板网首页
  2. > Toy博客

微信小程序如何写一个计算器

9月前 作者：骑鱼的猫会飞 分类：Toy博客 阅读(56) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序如何写一个计算器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

构思：1.画一个计算界面

           2.找一个计算器实现库

           3.调用实现库进行计算

实现：1.画出计算器图标、界面

微信小程序如何写一个计算器微信小程序如何写一个计算器

 页面代码实现

<!--pages/calculator/calculator.wxml   搜索 “一点通小管家” 进行预览-->
<view class="container">
    <view class="panel-display">
        <view>
        </view>
        <view id="display-num">{{calc.displayNum}}</view>
        <view id="display-op">{{calc.displayOp}}</view>
    </view>
    <view class="panel-btns">
        <view class="btns-rows">
            <view id="btn-c" class="btn {{tapped['c']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="c">AC
            </view>
            <view class="btn {{tapped['d']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="d">DEL
            </view>
            <view class="btn {{tapped['/']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="/" style="font-size: 24px;">÷
            </view>
            <view class="btn {{tapped['x']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="x">×
            </view>
        </view>
        <view class="btns-rows">
            <view class="btn {{tapped['7']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="7">7
            </view>
            <view class="btn {{tapped['8']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="8">8
            </view>
            <view class="btn {{tapped['9']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="9">9
            </view>
            <view class="btn {{tapped['-']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="-">-
            </view>
        </view>
        <view class="btns-rows">
            <view class="btn {{tapped['4']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="4">4
            </view>
            <view class="btn {{tapped['5']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="5">5
            </view>
            <view class="btn {{tapped['6']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="6">6
            </view>
            <view class="btn {{tapped['+']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="+">+
            </view>
        </view>
        <view id="btns2" class="btns-rows">
            <view id="btns2-left">
                <view class="btns2-left-part">
                    <view class="btn {{tapped['1']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                          bindtouchend="btnTouchEnd" data-op="1">1
                    </view>
                    <view class="btn {{tapped['2']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                          bindtouchend="btnTouchEnd" data-op="2">2
                    </view>
                    <view class="btn {{tapped['3']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                          bindtouchend="btnTouchEnd" data-op="3">3
                    </view>
                </view>
                <view class="btns2-left-part">
                    <view class="btn {{tapped['%']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                          bindtouchend="btnTouchEnd" data-op="%">%
                    </view>
                    <view class="btn {{tapped['0']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                          bindtouchend="btnTouchEnd" data-op="0">0
                    </view>
                    <view class="btn {{tapped['.']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                          bindtouchend="btnTouchEnd" data-op=".">.
                    </view>
                </view>
            </view>
            <view id="btns2-right" class="btn {{tapped['=']}}" bindtap="btnClicked" bindtouchstart="btnTouchStart"
                  bindtouchend="btnTouchEnd" data-op="=">=
            </view>
        </view>
    </view>
   
</view>
<view class="guanggao" >
        <ad unit-id="adunit-2e137ac6e760dc39" ad-type="video" ad-theme="white"></ad>
    </view>

样式代码

/* pages/calculator/calculator.wxss */
.container {
    display: flex;
    flex-direction: column;
    height: 55vh;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f3f3;
    padding:0% !important;
}

.panel-display {
    width: 100%;
    flex: 1;
}

.panel-btns {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.btns-rows {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    background-color: #f7f8f9;
}

.btn {
    text-align: center;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #c3c6c7;
}

.btn.active {
    background-color: #e3e4e5;
}

.btn:not(:last-child) {
    border-right: 1px solid #c3c6c7;
}

#btns2-right {
    border-left: 1px solid #c3c6c7;
    border-bottom: 1px solid #c3c6c7;
}

#display-num {
    display: inline-block;
    font-size: 36px;
    position: absolute;
    /* bottom: 5vh; */
    right: 3vw;
    padding-bottom: 36rpx;
    height: 100rpx;
}

#display-op {
    display: inline-block;
    font-size: 36px;
    /* position: absolute; */
    /* bottom: 1vh; */
    right: 3vw;
    padding-bottom: 36rpx;
    height: 100rpx;
}

#btns2 {
    flex: 2;
    display: flex;
    flex-direction: row;
}

#btns2-left {
    flex: 3;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #c3c6c7;
}

.btns2-left-part {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

#btn-c {
    color: #f00;
}

#icon-about {
    position: absolute;
    right: 3vw;
    top: 3vw;
}

.guanggao {
    margin-top: 10%;
    margin-left: 3%;
    width: 94%;
}

实现代码

// pages/calculator/calculator.js
//获取应用实例
const app = getApp();
const calc = require("../../utils/calc");
Page({
    data: {
        calc: {},
        tapped: {}
    },
    showAbout: function (e) {
        wx.showModal({
            title: '关于',
            content: '一个简单的计算器 @V1.0',
            showCancel: false
        })
    },
    btnClicked: function (e) {
        const code = e.target.dataset.op;
        calc.addOp(code)
        console.log(calc.getVars())
        this.setData({calc: calc.getVars()})
    },
    btnTouchStart: function (e) {
        const code = e.target.dataset.op;
        const tapped = {[code]: 'active'};
        this.setData({tapped: tapped})
    },
    btnTouchEnd: function (e) {
        const code = e.target.dataset.op;
        const tapped = {};
        this.setData({tapped: tapped})
    },
    onLoad: function () {
        console.log('onLoad')
        calc.reset()
        const that = this;
    }
})

库代码

'use strict'

const STATE = {
    INIT: 0,  //初始状态
    RESULT: 1,  //结果状态
    FIRST_UNDOT: 2,  //记录第一个操作数，且该操作数没有小数点
    FIRST_DOT: 3,   //记录第一个操作数，且该操作数有小数点
    SECOND_UNDOT: 4, //记录第二个操作数，且该操作数没有小数点
    SECOND_DOT: 5 //记录第二个操作数，且该操作数有小数点
}

let curState = STATE.INIT  //状态机所在状态
let curResult = 0   //计算结果
let opNum1 = '0'   //操作数1
let opNum2 = ''  //操作数2
let op = ''   //操作符

let displayNum = opNum1 //界面上应当显示的数值
let displayOp = ""  //界面上应当显示的操作符

/**
 * 重置程序状态
 */
function reset() {
    curState = STATE.INIT
    curResult = 0
    opNum1 = '0'
    opNum2 = ''
    op = ''
}

/**
 * 是否为零
 */
function isZero(code) {
    return code == '0'
}

/**
 * 是否数字
 */
function isNumber(code) {
    return code >= '0' && code <= '9'
}

/**
 * 是否操作符
 */
function isOperator(code) {
    return code == '+' || code == '-'
        || code == 'x' || code == '/' || code == '%'
}

/**
 * 是否小数点
 */
function isDot(code) {
    return code == '.'
}

/**
 * 是否是等号
 */
function isEquel(code) {
    return code == '='
}

/**
 * 是否清楚
 */
function isClear(code) {
    return code == 'c'
}

/**
 * 是否删除
 */
function isDelete(code) {
    return code == 'd'
}

/**
 * 转换为可现实的操作符
 */
function op2Show(code) {
    return code == '/' ? '÷' : (code == 'x' ? '×' : code)
}

/**
 *
 */
function tryAppend(num, code) {
    if (num.length < 15) {
        num += code
    }
    return num
}

function tryTrunc(num) {
    let str = '' + num
    if (str.length > 15) {
        str = str.substr(0, 15)
    }
    return str
}

/**
 *
 */
function tryDelete() {
    if (curState == STATE.SECOND_DOT
        || curState == STATE.SECOND_UNDOT) {
        if (opNum2.length > 0) {
            opNum2 = opNum2.substr(0, opNum2.length - 1)
        }
        if (opNum2 == '') {
            opNum2 = '0'
        }
        return
    } else {
        if (opNum1.length > 0 && opNum1 != '0') {
            opNum1 = opNum1.substr(0, opNum1.length - 1)
        }
        if (opNum1 == '') {
            opNum1 = '0'
        }
        return
    }
}

function tryCalc() {
    let n1 = parseFloat(opNum1)
    let n2 = parseFloat(opNum2)
    switch (op) {
        case '+':
            curResult = n1 + n2
            break
        case '-':
            curResult = n1 - n2
            break
        case 'x':
            curResult = n1 * n2
            break
        case '/':
            if (n2 == 0) {
                reset()
                curResult = 'NaN'
                displayOp = ''
            } else {
                curResult = n1 / n2
            }
            break
        case '%':
            if (n2 == 0) {
                reset()
                curResult = 'NaN'
                displayOp = ''
            } else {
                curResult = n1 % n2
            }
            break
    }
    curResult = tryTrunc(curResult)
}

function addOp(code) {
    switch (curState) {
        case STATE.RESULT:
        case STATE.INIT:
            if (isNumber(code) && !isZero(code)) {
                curState = STATE.FIRST_UNDOT
                opNum1 = code
            } else if (isDot(code)) {
                curState = STATE.FIRST_DOT
                opNum1 = '0.'
            } else if (isOperator(code)) {
                curState = STATE.SECOND_UNDOT
                opNum1 = '0'
                opNum2 = ''
                op = code
            }
            displayNum = opNum1
            displayOp = ''
            break
        case STATE.FIRST_UNDOT:
            displayOp = ''
            if (isNumber(code)) {
                if (!isZero(opNum1)) {
                    opNum1 = tryAppend(opNum1, code)
                } else {
                    opNum1 = code
                }
            } else if (isDot(code)) {
                curState = STATE.FIRST_DOT
                opNum1 = opNum1 == '' ? '0' : tryAppend(opNum1, '.')
            } else if (isDelete(code)) {
                tryDelete()
            } else if (isOperator(code)) {
                curState = STATE.SECOND_UNDOT
                op = code
                opNum2 = ''
                displayOp = op
            }
            displayNum = opNum1
            break
        case STATE.FIRST_DOT:
            displayOp = ''
            if (isNumber(code)) {
                opNum1 = tryAppend(opNum1, code)
            } else if (isDelete(code)) {
                tryDelete()
                if (opNum1.indexOf('.') < 0)
                    curState = STATE.FIRST_UNDOT
            } else if (isOperator(code)) {
                curState = STATE.SECOND_UNDOT
                op = code
                opNum2 = ''
                displayOp = op
            }
            displayNum = opNum1
            break
        case STATE.SECOND_UNDOT:
            if (isNumber(code)) {
                if (!isZero(opNum2)) {
                    opNum2 = tryAppend(opNum2, code)
                } else {
                    opNum2 = code
                }
                displayNum = opNum2
            } else if (isDot(code)) {
                curState = STATE.SECOND_DOT
                opNum2 = opNum2 == '' ? '0' : tryAppend(opNum2, '.')
                displayNum = opNum2
            } else if (isDelete(code)) {
                tryDelete()
                displayNum = opNum2
            } else if (isOperator(code)) {
                if (opNum2 != '') {
                    //直接计算
                    tryCalc()
                    curState = STATE.SECOND_UNDOT
                    opNum1 = curResult
                    opNum2 = ''
                    displayNum = curResult
                }
                op = code
                displayOp = op
            } else if (isEquel(code)) {
                if (opNum2 != '') {
                    tryCalc()
                    curState = STATE.RESULT
                    opNum1 = '0'
                    opNum2 = ''
                    displayNum = curResult
                }
                op = code
                displayOp = op
            }
            break
        case STATE.SECOND_DOT:
            if (isNumber(code)) {
                opNum2 = tryAppend(opNum2, code)
                displayNum = opNum2
            } else if (isDelete(code)) {
                tryDelete()
                if (opNum2.indexOf('.') < 0)
                    curState = STATE.SECOND_UNDOT
                displayNum = opNum2
            } else if (isOperator(code)) {
                if (opNum2 != '') {
                    //直接计算
                    tryCalc()
                    curState = STATE.SECOND_UNDOT
                    opNum1 = curResult
                    opNum2 = ''
                    displayNum = curResult
                }
                op = code
                displayOp = op
            } else if (isEquel(code)) {
                if (opNum2 != '') {
                    tryCalc()
                    curState = STATE.RESULT
                    opNum1 = '0'
                    opNum2 = ''
                    displayNum = curResult
                }
                op = code
                displayOp = op
            }
            break
    }
    if (isClear(code)) {
        reset()
        displayNum = opNum1
        displayOp = ''
    }
    displayOp = op2Show(displayOp)
}

reset()

module.exports = {
    reset, addOp, getVars() {
        return {curState, curResult, opNum1, opNum2, op, displayNum, displayOp}
    }
}

 文章来源地址https://www.toymoban.com/news/detail-507995.html

到了这里，关于微信小程序如何写一个计算器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序-简易计算器

    微信小程序-简易计算器

    微信小程序-简易计算器,满足日常所用的的加减乘除计算 一、前期准备工作 软件环境：微信开发者工具 官方下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档 1、基本需求。 简易计算器 满足日常所用的的加减乘除计算 带历史记录,查看过往计算 2、案例目录结构

    2024年02月04日
    浏览(54)
  • 微信小程序案例——计算器

    微信小程序案例——计算器

    1、创建项目 按照惯例，做一些初始化工作 2、设置导航栏 在 app.json 文件设置 window 配置项 pages/index/index.wxml 文件 1、编写页面整体结构 2、编写结果区域结构 两行内容：第一行是当前的计算式，第二行是当前计算结果 3、编写按钮区域第一行按钮的结构 第一行包含四个按钮：

    2024年04月11日
    浏览(41)
  • 【微信小程序】计算器案例

    【微信小程序】计算器案例

    🏆今日学习目标：第二十一期——计算器案例 ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：30分钟 🎉专栏系列：我的第一个微信小程序 嗨嗨嗨，好久没更新小程序专栏了，本期浅浅用小程序写一个计算器。 最终代码会上传至资源噢~ 新建一个项目，在app.json中配置文件导

    2024年01月17日
    浏览(56)
  • 微信小程序————简易计算器

    微信小程序————简易计算器

        点击页面数字按键可以计算简单的加减乘除数据运算。 页面显示   大概逻辑是当点第一次击数字键的时候要有个变量来存储这个点击的数，然后再来个记录点击运算符的变量，等要算的数全输入后，最后“=”后把前面输入的数字和运算符以字符串的形式显示在上屏幕上

    2024年02月17日
    浏览(184)
  • 微信小程序3-2 计算器

    微信小程序3-2 计算器

    1、创建项目 创建项目微信小程序项目 - 计算器 单击【确定】按钮 按照惯例做一些初始化工作 2、设置导航栏 在 app.json 文件设置 window 配置项 pages/index/index.wxml 文件 1、编写页面的整体结构 2、编写结果区域的结构 两行内容：第一行是当前的计算式，第二行是当前计算结果

    2024年04月26日
    浏览(42)
  • 微信小程序：计算器(附源码)

    微信小程序：计算器(附源码)

    index.js页面：( 需要引入一个精确计算 ) 精确计算的JS：accurate.js index.wxml页面： index.wxss页面： index.json： 百度网盘链接：https://pan.baidu.com/s/1PTXK0t44kRJ5onVk9leROw 提取码：4d2k

    2024年02月11日
    浏览(42)
  • 微信小程序案例3-2：计算器

    微信小程序案例3-2：计算器

    录屏演示多次计算 1、创建项目 创建微信小程序项目 - 计算器 单击【确定】按钮 按照惯例，做一些初始化工作 2、设置导航栏 在 app.json 设置 window 配置项 pages/index/index.wxml 文件 1、编写页面整体结构 2、编写结果区域结构 两行内容：第一行是当前的计算式，第二行是当前计算

    2024年04月12日
    浏览(98)
  • 房贷计算器微信小程序原生语言

    房贷计算器微信小程序原生语言

    效果： 输入 300万 结果 还款明细 一共有3个页面 1、输入页面 2、结果页面 3、详情页面 index.wxml文件

    2024年04月28日
    浏览(64)
  • 微信小程序计算器（含源码）、含js精确运算代码

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

    目录 一、引言与效果图  二、源码 0.目录结构： 1.xxxx.wxml文件  2.样式文件 （1）xxxx.less文件 （2）xxxx.wxss文件 （不会使用 less 的可以用这个） 3.xxxx.json文件 4.accurate.js 5.xxxx.js文件 三、结语        最近在做一个记账本小程序，其中需要用到计算器，但是在网上找的代码，用

    2024年02月01日
    浏览(61)
  • Java——一个简单的计算器程序

    Java——一个简单的计算器程序

      该代码是一个简单的计算器程序，使用了Java的图形化界面库Swing。具体分析如下： 导入必要的类和包： 代码中导入了用于创建图形界面的类和接口，以及其他必要的类。 定义Calculator类： 代码中定义了一个名为Calculator的类，继承了JFrame类，并实现了ActionListener接口。Calc

    2024年02月04日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包