iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现计算器功能
  • 600
分享到

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

2024-04-02 19:04:59 600人浏览 独家记忆
摘要

本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 一、微信小程序开发工具界面 二、目录结构 第一次进到页面它的目录结构如下: 三、需要注意的问题

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

一、微信小程序开发工具界面

二、目录结构

第一次进到页面它的目录结构如下:

三、需要注意的问题

(1)添加的新页面文件,都需要在app.JSON中进行配置,否则页面报错。

(2)工作原理  通过在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}"   相当于click事件。

js代码中,可以通过this.data.n9获取数据,这些数据的定义都是在js中

通过在<view id="{{btn_a}}"><view>填写id,在具体的函数中,event.target.id去判断id是多少,进行区分。就可以实现,不同标签的点击,然后进行业务逻辑。如果需要访问数据,则是通过this.data.xx。

计算器的wxml页面


<view class="content">
  <view class="xianshi">{{screenNum}}</view>
  <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>
    <view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>
    <view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>
    <view class="item blue" bindtap="btnClick" id="{{na}}">+</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>
    <view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>
    <view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>
    <view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>
    <view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>
    <view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>
    <view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>
    <view class="item blue" bindtap="btnClear">AC</view>
    <view class="item blue" bindtap="btnJs">=</view>
    <view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>
  </view>
</view>

// pages/cal/cal.js
Page({
 
  
  data: {
   n0: 0,
   n1: 1,
   n2: 2,
   n3: 3,
   n4: 4,
   n5: 5,
   n6: 6,
   n7: 7,
   n8: 8,
   n9: 9,
   na: '+',
   nb: '-',
   nc: '*',
   nd: '/',
   screenNum: 0,
   screenStr: 0,
   is_num:1
  },
 
  
  onLoad: function (options) {
  
  },
 
  
  onReady: function () {
  
  },
 
  
  onShow: function () {
  
  },
 
  
  onHide: function () {
  
  },
 
  
  onUnload: function () {
  
  },
 
  
  onPullDownRefresh: function () {
  
  },
 
  
  onReachBottom: function () {
  
  },
 
  
  onShareAppMessage: function () {
  
  },
  btnClick:function(event){
    //console.log('你按得键是'+event.target.id);
    //console.log('上一次' + this.data.is_num);
    var op='';
    var data=0;
    var last_is_num = this.data.is_num;
    //这次输入的是什么
    if (event.target.id == '9' || event.target.id == '8' || event.target.id == '7' || event.target.id == '6' || event.target.id == '5' || event.target.id == '4' || event.target.id == '3' || event.target.id == '2' || event.target.id == '1' || event.target.id == '0') {
      data = event.target.id;
      this.setData({ is_num: 1 });
    }
    if (event.target.id == '+' || event.target.id == '-' || event.target.id == '*' || event.target.id == '/') {
      op = event.target.id;
      this.setData({ is_num: 0 });
    }
    if (last_is_num==1){
      //如果上一次是数字
      if (op == ''){
        //这一次是数字
        if (this.data.screenNum!=0){
          this.setData({ screenNum: this.data.screenNum + data });
          this.setData({ screenStr: this.data.screenStr + data });
        }else{
          this.setData({ screenNum: data});
          this.setData({ screenStr: data });
        }
      }else{
        this.setData({ screenNum: this.data.screenNum + op });
        this.setData({ screenStr: this.data.screenStr +',' +op+',' });
      }
    }else{
      //上次不是数字
      if (data != 0) {
        //这一次是数字
        this.setData({ screenNum: this.data.screenNum + data });
        this.setData({ screenStr: this.data.screenStr + data });
      } else {
        return;
      }
    }
    //console.log(op+'aaaaa'+data);
    //console.log('现在是'+this.data.is_num);
    //console.log('screenNum' + this.data.screenNum);
    //console.log(this.data.screenStr);
  },
  btnJs:function(){
    console.log(this.data.screenNum);
    console.log(this.data.screenStr);
    var result=0;
    var strs = new Array(); //定义一数组 
    strs = this.data.screenStr.split(","); //字符分割
    for (var i = 0; i < strs.length; i++) {
      //console.log(strs[i] + i); //分割后的字符输出
      if (strs[i]=='+'){
        result = parseInt(strs[i - 1]) + parseInt(strs[i+1]);
      }
      if (strs[i] == '-') {
        result = strs[i - 1] - strs[i + 1];
      }
      if (strs[i] == '*') {
        result = strs[i - 1] * strs[i + 1];
      }
      if (strs[i] == '/') {
        result = strs[i - 1] / strs[i + 1];
      }    
    }
    console.log('result:'+result);
    this.setData({ screenNum: result});
    this.setData({ screenStr: result });    
  },
  btnClear:function(){
    //把标记恢复成默认状态
    this.setData({ screenNum: 0 });
    this.setData({ screenStr: 0 });
    this.setData({ is_num: 1 });      
  }
})

总结,在小程序的布局方面引入了相对单位rpx,需要在学习一下弹性盒子flex布局。对于js部分,和vue.js有些类似,都是对数据进行绑定,简化js的dom操作。这两点还是需要再看看。

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

--结束END--

本文标题: 微信小程序实现计算器功能

本文链接: https://www.lsjlt.com/news/130731.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现计算器小功能
    微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多...
    99+
    2024-04-02
  • 微信小程序实现计算器功能
    本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 一、微信小程序开发工具界面 二、目录结构 第一次进到页面它的目录结构如下: 三、需要注意的问题 ...
    99+
    2024-04-02
  • 用微信小程序实现计算器功能
    本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下。 页面部分 <view class='box'> <view class='txt...
    99+
    2024-04-02
  • 微信小程序如何实现计算器小功能
    这篇文章主要介绍微信小程序如何实现计算器小功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景...
    99+
    2023-06-20
  • 微信小程序实现简易计算器功能
    本文实例为大家分享了微信小程序实现简易计算器的具体代码,供大家参考,具体内容如下 实现代码: <!--pages/computer.wxml--> <view c...
    99+
    2024-04-02
  • 微信小程序实现简单计算器功能
    微信小程序:简单计算器,供大家参考,具体内容如下 对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器。...
    99+
    2024-04-02
  • 微信小程序实现简易的计算器功能
    一个初入IC的硅农,硬件编程经验3个月。偶然接触了微信小程序编程,然后自己写了一个计算器,希望得到改进意见。 功能: 1、计算 + - * /和%; 2、主要是当得出结果的时候,可以...
    99+
    2024-04-02
  • 微信小程序实现简单的计算器功能
    本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 wxml <view class='content'> <input va...
    99+
    2024-04-02
  • 微信小程序中如何实现一个计算器功能
    这期内容当中小编将会给大家带来有关微信小程序中如何实现一个计算器功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。index.wxml<view class="content&q...
    99+
    2023-06-20
  • 微信小程序如何实现简单的计算器功能
    这篇文章主要介绍微信小程序如何实现简单的计算器功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下wxml<view class='content'> &nb...
    99+
    2023-06-20
  • 微信小程序中怎么实现一个计算器功能
    微信小程序中怎么实现一个计算器功能,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。目录结构第一次进到页面它的目录结构如下:需要注意的问题(1)添加的新页面文件,都...
    99+
    2023-06-20
  • 微信小程序实现小型计算器
    本文实例为大家分享了微信小程序实现小型计算器的具体代码,供大家参考,具体内容如下 app.js // app.js App({   onLaunch() {   },   REGEX...
    99+
    2024-04-02
  • 微信小程序实现计算器功能的代码怎么写
    本篇内容介绍了“微信小程序实现计算器功能的代码怎么写”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!具体代码如下:wxml<view&n...
    99+
    2023-06-08
  • 小程序实现计算器功能
    本文实例为大家分享了小程序实现计算器功能的具体代码,供大家参考,具体内容如下 实现模拟手机上的计算器,输入即可运算 本页面是做一个计算收款的页面,如果不需要下面的内容可以删除掉 w...
    99+
    2024-04-02
  • 微信小程序实现利息计算器
    本文实例为大家分享了微信小程序实现利息计算器的具体代码,供大家参考,具体内容如下 一、案例说明 设计一个小程序,输入本金、利率,默认本金10000元、利率3%,计算存入银行,复利计息...
    99+
    2024-04-02
  • 微信小程序实现简易计算器
    微信小程序之简易计算器,供大家参考,具体内容如下 一、介绍 1.中缀表达式 中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间。中缀表达式是人们常用的算术...
    99+
    2024-04-02
  • 微信小程序实现简单计算器
    微信小程序写的简单计算器,供大家参考,具体内容如下 jisaunqi.js // pages/jisuanqi/jisuanqi.js Page({ data: {...
    99+
    2024-04-02
  • 微信小程序实现计算器案例
    本文实例为大家分享了微信小程序实现计算器的具体代码,供大家参考,具体内容如下 项目展示 页面设计 分为上面输入的显示部分和下面按键部分 <!--pages/index/i...
    99+
    2024-04-02
  • 微信小程序实现简单倒计时功能
    本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下 任务描述: 计时器 任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白...
    99+
    2024-04-02
  • 微信小程序倒计时功能怎么实现
    微信小程序的倒计时功能可以通过使用setInterval函数来实现。 首先,在页面的js文件中定义一个变量,用于存储倒计时的时间: ...
    99+
    2024-02-29
    微信小程序
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作