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

最新推荐文章于 2024-06-07 10:10:47 发布
最新推荐文章于 2024-06-07 10:10:47 发布
阅读量2.2k 收藏 4
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 小程序 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuzhirui123/article/details/128498606
版权

构思：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}
    }
}

 

骑鱼的猫会飞
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序————简易计算器
zx3331681336的博客
11-16 5970
计算器小程序
如何在小程序里实现一个计算器功能？
Towify的博客
11-14 1877
本文详解了如何在小程序里实现一个计算器效果的步骤。 欢迎大家试用我们的无代码开发平台 Towify 制作自己所需的小程序。
微信小程序计算器
最新发布
2301_78374183的博客
06-07 270
【代码】微信小程序计算器。
微信小程序--简易计算器
热门推荐
Huangxianlong的博客
07-19 2万+
一、项目概述 本文主要介绍了微信小程序的一个简易计算器的实现代码实例。 实现的功能有： 实现简单的加减乘除 删除 全部清空 小程序页面目录如下： 计算器页面如下： 二、WXML文件编写 首先我们对计算器页面进行设计，这里我们主要分为两部分，上部为结果显示，下部为按键部分分为操作数和操作符。 计算器分为五行四列，采用弹性显示结构，横向显示。布局通过样式表操作， WXML代码如下：...
小程序制作（超详解！！！）第十一节 成绩计算器
2201_76115387的博客
10-31 784
buttom组件
微信小程序案例3-2 计算器
m0_67867314的博客
11-09 263
文章目录一、运行效果二、知识储备（一）data-*自定义属性（二）模块三、实现步骤（一）准备工作（二）实现页面结构（三）实现页面样式（四）实现页面逻辑（五）特殊情况处理 一、运行效果 二、知识储备 （一）data-*自定义属性 （二）模块 三、实现步骤 （一）准备工作 （二）实现页面结构 （三）实现页面样式 （四）实现页面逻辑 （五）特殊情况处理
微信小程序 简易计算器 (源码)
05-30
微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信...
微信小程序 生活服务 房贷计算器 （源代码+截图）
06-21
微信小程序 生活服务 房贷计算器 （源代码+截图）微信小程序 生活服务 房贷计算器 （源代码+截图）微信小程序 生活服务 房贷计算器 （源代码+截图）微信小程序 生活服务 房贷计算器 （源代码+截图）微信小程序 生活...
微信小程序demo：加法计算器(1)(源代码+截图)
06-19
微信小程序demo：加法计算器(1)(源代码+截图)微信小程序demo：加法计算器(1)(源代码+截图)微信小程序demo：加法计算器(1)(源代码+截图)微信小程序demo：加法计算器(1)(源代码+截图)微信小程序demo：加法计算器(1)(源...
微信小程序 iOS计算器（截图+源码）
05-11
微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）...
微信小程序 小工具类 简易计算器 （源代码+截图）
06-21
微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小...
微信小程序-一个简单的微信小程序-简易计算器
08-06
一个微信小程序--简易计算器 这是一个简单的仿小米计算器的微信小程序, 目前比较简单, 仅供参考, 欢迎star。 计算器的逻辑是基于一个简单的状态机实现的, 下面给出了状态机图, 仅供参考。 效果图: 状态机图: init: 初始状态 first_undot: 第一个操作数录入中, 无小数点 first_dot: 第一个操作数录入中, 有小数点 second_undot: 第二个操作数录入中, 无小数点 second_dot: 第二个操作数录入中, 有小数点 result: 结果状态 主要特性 支持简单的加减乘除和取余数 支持连续操作, 比如做了加法以后, 结果会直接作为第一个操作数进入下一轮操作 支持删除单个数字和一次性全部清空LICENSE Copyright 2016 boyce.ywr@gmail.com Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (
微信小程序-计算器的实现过程及全部源码下载
05-20
微信小程序-计算器的全部代码，下载导入即可 如果不清楚可以参考博文：https://blog.csdn.net/qq_29914837/article/details/90302137
计算器（微信小程序）
05-08
可以进行加减乘除的简易计算器，其中JS、WXML、wxss分别加入到资源包中，复制粘贴到微信的小程序开发软件上即可
微信小程序开发-科学计算器案例源码.zip
08-15
微信小程序开发-科学计算器案例源码.zip
(微信小程序毕业设计)简易计算器(源码+截图).zip
03-19
(微信小程序毕业设计)简易计算器(源码+截图)(微信小程序毕业设计)简易计算器(源码+截图)(微信小程序毕业设计)简易计算器(源码+截图)(微信小程序毕业设计)简易计算器(源码+截图)(微信小程序毕业设计)简易计算器(源码+...
微信小程序：计算器(附源码)
weixin_47627102的博客
03-19 1万+
微信小程序实现计算器，附源码
自己开发封装的微信小程序计算器组件，复制即可用（完整代码）
姜雪辞的博客
07-01 2183
写在前面 我在开发自己用的账本类微信小程序时，因为嫌老是要切屏打开计算器，算完之后还要照着计算结果手动记录很不方便，尤其是当计算出来的结果位数较长时，容易看错或打错，因此想自己开发封装一个计算器组件在需要用的页面里，这样不仅可以减少切屏的次数，还可以直接去拿到计算结果自动记录，非常的方便。 按惯例先贴效果再上代码，啰嗦的话后面再讲。 效果预览 完整代码 先贴目录，自己对应下面的代码复制到哪个对应的文件里（后续等我把自己的项目整理差不多了，有空写一个demo放到github上，这样下载起来会更方便一些。现在
用微信小程序写一个计算器
05-17
好的，下面是一个简单的微信小程序计算器代码示例： 1. 在微信开发者工具中创建一个新的小程序项目。 2. 在项目结构中找到 app.json 文件，在其中添加以下代码： ```json { "pages": [ "pages/index/index" ],...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值