小程序实现简单的计算器

本文实例为大家分享了小程序实现简单计算器的具体代码,供大家参考,具体内容如下

#app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "智能计算器"
  },
  "tabBar": {
    "color": "#ff69b4",
    "selectedColor": "#0000ff",
    "backgroundColor": "#ffff00",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "计 算 机"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "回家"
      }
    ]
  }
}

#app.wsxx

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

#index.wxml

<template name="calculator-key">
  <button hover-start-time="{{5}}" hover-stay-time="{{100}}" hover-class="calculator-key-hover" data-key="{{className}}" class="calculator-key {{className}}">{{display}}</button>
</template>

<view class="calculator">
  <view class="calculator-display">
    <view class="calculator-display-text">{{displayValue}}</view>
  </view>
  <view class="calculator-keypad">
    <view class="input-keys">
      <view class="function-keys" catchtap="onTapFunction">
        <template is="calculator-key" data="{{className: 'key-clear', display: clearDisplay ? 'C' : 'C'}}"/>
        <template is="calculator-key" data="{{className: 'key-sign', display: '+/-'}}"/>
        <template is="calculator-key" data="{{className: 'key-percent', display: '%'}}"/>
   </view>
      <view class="digit-keys" catchtap="onTapDigit">
        <template is="calculator-key" data="{{className: 'key-0', display: '0'}}"/>
        <template is="calculator-key" data="{{className: 'key-dot', display: '●'}}"/>
        <template is="calculator-key" data="{{className: 'key-1', display: '1'}}"/>
        <template is="calculator-key" data="{{className: 'key-2', display: '2'}}"/>
        <template is="calculator-key" data="{{className: 'key-3', display: '3'}}"/>
        <template is="calculator-key" data="{{className: 'key-4', display: '4'}}"/>
        <template is="calculator-key" data="{{className: 'key-5', display: '5'}}"/>
        <template is="calculator-key" data="{{className: 'key-6', display: '6'}}"/>
        <template is="calculator-key" data="{{className: 'key-7', display: '7'}}"/>
        <template is="calculator-key" data="{{className: 'key-8', display: '8'}}"/>
        <template is="calculator-key" data="{{className: 'key-9', display: '9'}}"/>
      </view>
    </view>
    <view class="operator-keys" catchtap="onTapOperator">
        <template is="calculator-key" data="{{className: 'key-divide', display: '÷'}}"/>
        <template is="calculator-key" data="{{className: 'key-multiply', display: '×'}}"/>
        <template is="calculator-key" data="{{className: 'key-subtract', display: '−'}}"/>
        <template is="calculator-key" data="{{className: 'key-add', display: '+'}}"/>
        <template is="calculator-key" data="{{className: 'key-equals', display: '='}}"/>
    </view>
  </view>
</view>

#index.js

Page({
  data: {
    value: null, // 上次计算后的结果,null表示没有上次计算的结果
    displayValue: '0', // 显示数值
    operator: null, // 上次计算符号,null表示没有未完成的计算
    waitingForOperand: false // 前一按键是否为计算符号
  },

  onLoad: function (options) {
    this.calculatorOperations = {
      'key-divide': (prevValue, nextValue) => prevValue / nextValue,
      'key-multiply': (prevValue, nextValue) => prevValue * nextValue,
      'key-add': (prevValue, nextValue) => prevValue + nextValue,
      'key-subtract': (prevValue, nextValue) => prevValue - nextValue,
      'key-equals': (prevValue, nextValue) => nextValue
    }
  },

  /* AC操作,一下回到解放前 */
  clearAll() {
    this.setData({
      value: null,
      displayValue: '0',
      operator: null,
      waitingForOperand: false
    })
  },

  /* 仅清空当前显示的输入值 */
  clearDisplay() {
    this.setData({
      displayValue: '0'
    })
  },

  onTapFunction: function (event) {
    const key = event.target.dataset.key;

    switch (key) {
      case 'key-clear':
        if (this.data.displayValue !== '0') {
          this.clearDisplay();
        } else {
          this.clearAll();
        }

        break;

      case 'key-sign':
        var newValue = parseFloat(this.data.displayValue) * -1

        this.setData({
          displayValue: String(newValue)
        })

        break;

      case 'key-percent':
        const fixedDigits = this.data.displayValue.replace(/^-?\d*\.?/, '')
        var newValue = parseFloat(this.data.displayValue) / 100

        this.setData({
          displayValue: String(newValue.toFixed(fixedDigits.length + 2))
        });

        break;

      default:
        break;
    }
  },

  onTapOperator: function (event) {
    const nextOperator = event.target.dataset.key;
    const inputValue = parseFloat(this.data.displayValue);

    if (this.data.value == null) {
      this.setData({
        value: inputValue
      });
    } else if (this.data.operator) {
      const currentValue = this.data.value || 0;
      const newValue = this.calculatorOperations[this.data.operator](currentValue, inputValue);

      this.setData({
        value: newValue,
        displayValue: String(newValue)
      });
    }

    this.setData({
      waitingForOperand: true,
      operator: nextOperator
    });
  },

  onTapDigit: function (event) {
    const key = event.target.dataset.key; // 根据data-key标记按键

    if (key == 'key-dot') {
      // 按下点号
      if (!(/\./).test(this.data.displayValue)) {
        this.setData({
          displayValue: this.data.displayValue + '.',
          waitingForOperand: false
        })
      }
    } else {
      // 按下数字键
      const digit = key[key.length - 1];

      if (this.data.waitingForOperand) {
        this.setData({
          displayValue: String(digit),
          waitingForOperand: false
        })
      } else {
        this.setData({
          displayValue: this.data.displayValue === '0' ? String(digit) : this.data.displayValue + digit
        })
      }
    }
  }
})

#index.wxss

page {
  height:100%;
}

.calculator {
  width: 100%;
  height: 100vh;
  border:solid 1px;
  background: rgb(238, 5, 5);
  position: relative;
  box-shadow: 0px 0px 20px 0px rgb(211, 41, 41);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.calculator-display {     /*显示器背景颜色*/
  background: #2c2a2c;
  flex: 1;
}

/*TODO:解决文本垂直居中问题,显示器数字颜色*/
.calculator-display-text {
  padding: 0 30px;
  font-size: 3em;
  color: rgb(245, 245, 248);
  text-align: right;
}

.calculator-keypad {
  display: flex;

}

.calculator .function-keys {
  display: flex;
  color:rgb(245, 13, 13);

}

.calculator .digit-keys {
  background: #0808f7;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

.calculator-key-hover {   /*按钮按下以后的颜色*/
  box-shadow: inset 0px 0px 25vw 0px hsla(71, 90%, 48%, 0.898);
}

.calculator-key {
background-color:aqua;

  display: block;
  width: 25vw;
  height: 25vw;
  line-height: 25vw;
  border-top: 1px solid rgb(6, 245, 78);
  border-right: 1px solid rgb(19, 241, 12);
  text-align: center;
  box-sizing: border-box;
}

.calculator .function-keys .calculator-key {
  font-size: 2em;

}

.calculator .digit-keys .calculator-key {
  font-size: 3em;
}

.calculator .digit-keys .key-0 {
  width: 50vw;
  text-align: left;
  padding-left: 9vw;
}

.calculator .digit-keys .key-dot {
  padding-top: 1em;
  font-size: 0.75em;
}

.calculator .operator-keys .calculator-key {
  color: rgb(248, 165, 10);
  border-right: 0;
  font-size: 3em;
}

.calculator .function-keys {
  background: linear-gradient(to bottom, rgb(6, 6, 240) 0%, rgb(52, 5, 240) 100%);
}

.calculator .operator-keys {
  background:  linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%);
}

.input-keys {
  width: 100%;
}

.operator-keys {
  width: 100%;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-07-17

微信小程序计算器实例详解

微信小程序计算器实例,供大家参考,具体内容如下 index.wxml <view class="content"> <view class="num">{{num}}</view> <view class="operotor">{{op}}</view> </view> <view class="entry"> <view> <

微信小程序实现简单计算器

微信小程序写的简单计算器,供大家参考,具体内容如下 jisaunqi.js // pages/jisuanqi/jisuanqi.js Page({ /** * 页面的初始数据 */ data: { result:"0", string:"", cal:"", num1:"", num2:"" }, btSubmit:function(e){ console.log(e); var num1 = this.

小程序实现计算器功能

本文实例为大家分享了小程序实现计算器功能的具体代码,供大家参考,具体内容如下 实现模拟手机上的计算器,输入即可运算 本页面是做一个计算收款的页面,如果不需要下面的内容可以删除掉 wxml <view class="calculate-box"> <view class="calculate-txt">{{express}}</view> <view class="result-num">={{res

微信小程序实现计算器功能

本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 一.微信小程序开发工具界面 二.目录结构 第一次进到页面它的目录结构如下: 三.需要注意的问题 (1)添加的新页面文件,都需要在app.json中进行配置,否则页面报错. (2)工作原理  通过在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}"   相当于click事件. 在js代码中,可以通过this.data

微信小程序实现简单计算器功能

微信小程序:简单计算器,供大家参考,具体内容如下 对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器. 运行截图 计算器对于界面美观的要求并不高,只是一些view以及button控件的组合,所以并不需要在界面上费很多功夫.重要的是逻辑层,之所以选择计算器作为上手的第一个项目,因为计算器的逻辑可简可繁,完全可以适应新手对小程序的掌握程度. 主要代码 js: Page({ data: { result:"0",

微信小程序 简易计算器实现代码实例

这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 只能进行简单的运算 效果图如下: cal.wxml <view class="screen">{{result}}</view> <view class="content"> <view class="buttonGroup"> <button

微信小程序实现简易计算器

微信小程序之简易计算器,供大家参考,具体内容如下 一.介绍 1.中缀表达式 中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间.中缀表达式是人们常用的算术表示方法. 虽然人的大脑很容易理解与分析中缀表达式,但对计算机来说中缀表达式却是很复杂的,因此计算表达式的值时,通常需要先将中缀表达式转换为前缀或后缀表达式,然后再进行求值.对计算机来说,计算前缀或后缀表达式的值非常简单. 2.后缀表达式 从左至右扫描表达式,遇到数字时,将数字压入堆栈,遇到运算符时,弹出栈顶的两个数

微信小程序实现计算器小功能

微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多人一样,遇到一些不懂的想问问别人,到贴吧去,一大堆广告,根本没人帮忙解决问题. 今天教一些刚入门的同学做一款计算器,如果C语言是编程的最佳入门语言,那计算器应该算得上是小程序的入门demo了,希望刚入门的同学们认真品味下面的代码,从wxml到js,再到wxss(页面的布局),每个代码都要弄懂他的意思 废话不多说,先上

微信小程序实现简单的计算器功能

本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 wxml <view class='content'> <input value='{{calculation}}'></input> <view class='box'> <button class='yellow-color'>退格</button> <button class='yellow-color' bindtap='empty'>

用微信小程序实现计算器功能

本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下. 页面部分 <view class='box'> <view class='txt'>{{screenNum}}</view> <view capture-bind:touchstart="compute"> <view> <button data-val='clear' class='boxtn btn1'>AC</button> &

微信小程序 在线支付功能的实现

微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

微信小程序 五星评价功能的实现

微信小程序 五星评价功能 话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico

Android中微信小程序支付倒计时功能

看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

微信小程序显示下拉列表功能【附源码下载】

本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

微信小程序实现日历功能

本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下 效果图: 代码: <view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="

微信小程序显示倒计时功能示例【测试可用】

本文实例讲述了微信小程序显示倒计时功能.分享给大家供大家参考,具体如下: 微信小程序中显示倒计时: index.wxml: <view class='countdown'>剩:<text style='color:#6B4EFD'> {{countDownDay}} </text> 天 <text style='color:#6B4EFD'>{{countDownHour}} </text> <text style='color:#6B4E

微信小程序手机号码验证功能的实例代码

wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi

微信小程序实现签到功能

本文实例为大家分享了微信小程序实现签到功能的具体代码,供大家参考,具体内容如下 效果图: 今天是16号,所以显示已签到,渲染页面时请求后台传的参数为这月签到的日期 如:["16", "14"] 点击签到执行 calendarSign sign.wxml <!--index.wxml--> <view class="calendar"> <view class='bcfff'> <view class=&q

微信小程序实现评论功能

本文实例为大家分享了微信小程序实现评论功能的具体代码,供大家参考,具体内容如下 前端 <textarea class='the_prw_in' bindinput='bindblur' cursor-spacing="130" placeholder='说点什么吧...' maxlength="76"> </textarea> <view class='the_prw_btn' bindtap='btn_send'> 留言 <