微信小程序-简易计算器

最新推荐文章于 2024-06-07 10:10:47 发布

SepbreeZe

最新推荐文章于 2024-06-07 10:10:47 发布

阅读量1.5k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 javascript

本文链接：https://blog.csdn.net/weixin_43424740/article/details/121413126

版权

本文是一位初学者分享的微信小程序计算器实现，旨在保留操作数并提供加减乘除和取模功能。作者讨论了WXML代码和JS代码的编写过程，特别是遇到的难点，如如何在两行显示数字，并寻求更优的解决方案。

摘要由CSDN通过智能技术生成

一个初入IC的硅农，硬件编程经验3个月。偶然接触了微信小程序编程，然后自己写了一个计算器，希望得到改进意见。

功能：1、计算 + - * /和%；

2、主要是当得出结果的时候，可以显示原来的数都是什么。用手机上的计算器都是一按等于号，我的两个操作数也没了，很烦。所以自己写的时候就在得到结果的时候操作数不变。

计算器样子就是下面这样子：

样子不太会设计，主要是js部分啦。

WXML代码

由于wxml的很多方法和属性我都还不太了解，所以有的设置方法可能显得繁琐。

<!--pages/caculator/caculator.wxml-->
<!-- 计算区 -->
<view class="caculatorArea">
  <!-- 显示数据与运算符 -->
  <view class="dataArea1">{
  {firstNum}}</view>
  <view class="dataArea2">{
  {operatorShow}}</view>
  <view class="dataArea3">{
  {secondNum}}</view>
  <!-- 显示结果 -->
  <view class="resultArea">result:   {
  {result}}</view>
</view>
<!-- 输入区 -->
<view class="inputArea">
<!-- 按键第一排 -->
  <view class="fstRaw">  
    <button class="clear" bindtap="clearEvent" data-value="C" >C</button>
    <button class="divide" bindtap="opEvent"  data-value="/">/</button>
    <button class="mutiply" bindtap="opEvent" data-value="*">*</button>
    <button class="back" bindtap="backEvent" data-value="←">←</button>
  </view>
  <!-- 按键第二排 -->
  <view class="secRaw">  
    <button class="seven" bindtap="numEvent" data-value="7">7</button>
    <button class="eight" bindtap="numEvent" data-value="8" >8</button>
    <button class="nine" bindtap="numEvent" data-value="9">9</button>
    <button class="minus