热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要为大家详细介绍了微信小程序写简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

微信小程序写的简单计算器,供大家参考,具体内容如下

jisaunqi.js

// pages/jisuanqi/jisuanqi.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    result:"0",
    string:"",
    cal:"",
    num1:"",
    num2:""
  },
  btSubmit:function(e){
    console.log(e);
    var num1 = this.data.num1;
    var cal = this.data.cal;
    var num2 = this.data.num2;
    var char= e.target.id;
    var string ;
    if((char>="0"&&char<="9"||char=='.')&&cal==""){
      num1=num1+char;
      this.setData({
        num1:num1,
      })
    }
    else if((char>="0"&&char<="9"||char=='.')&&cal!=""){
      num2=num2+char;
      this.setData({
        num2:num2,
      })
    }
    else {
      cal=char;
      this.setData({
        cal:cal,
      })
    }
    this.setData({
     string:num1+cal+num2
    })
  },
  clean:function(e){
    this.setData({
      string:"",
      num1:"",
      num2:"",
      cal:""
    })
  },
  calculate:function(e){
    var num1 = this.data.num1;
    var num2 = this.data.num2;
    var cal = this.data.cal;
    var result;
    switch(cal){
      case '+':result=num1*1+num2*1;break;
      case '-':result=num1*1-num2*1;break;
      case '*':result=(num1*1)*(num2*1);break;
      case '/':result=(num1*1)/(num2*1);break;
    }
    num1=result;
    cal="";
    num2="";
    this.setData({
      result:result,
      num1:num1,
      cal:cal,
      num2:num2
    })
  },
  reverse:function(e){
    var cal = this.data.cal;
    var num1 = this.data.num1;
    var num2 = this.data.num2;
    if(cal==""){num1="-";}
    else if(cal!=""){num2="-"}
    this.setData({
      num1:num1,
      num2:num2
    })
  },
  lololo:function(e){
    console.log(123)
  },
  confirm:function(e){
    console.log(555);
    console.log(e)
  },
  event:function(e){
    wx.navigateTo({
      url: '/pages/event/event',
    })
  },
  bindinput:function(e){
    console.log(1)
  },
  jisuanqi:function(e){
    var n1=e.detail.value.num1;
    var n2=e.detail.value.num2;
    var result=n1*1+n2*1;
    console.log(n1);
    console.log(n2);
    console.log(result);
    this.setData({
      result:result
    })
  },
  tiaozhuan:function(e){
    wx.navigateTo({
      url: '/pages/9x9form/9x9form',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

jisuanqi.json

{
  "usingComponents": {},
  "navigationBarTitleText": "计算器"
}

jisuanqi.wxml


  {{string}}
  {{result}}
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  
  
    
    
    
    
  

跳转到event//

jisuanqi.wxss

.button{
  width: 160rpx;
  height: 100rpx;
  margin-left: 10rpx;
  padding-left: 10rpx;
  margin-top: 10rpx;
  text-align: center;
  line-height: 100rpx;
  padding: 5px;
  border-radius: 5px;
}
.button-group{
  display: flex;
  flex-direction: row;
  align-content: flex-start;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* align-content: flex-end; */
}
.view1{
  height: 100rpx;
  background-color: #e4e4e4;
  line-height: 100rpx;
  font-size: 20px;
}
.view2{
  height: 100rpx;
  margin-top: 5px;
  background-color: #e4e4e4;
  line-height: 100rpx;
  font-size: 20px;
}

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


推荐阅读
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
    小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 微信答题小程序的设计与实现详解
    本文详细介绍了如何设计和实现一个微信答题小程序,包括题库的设计和题目的呈现。通过抽取题目编号和使用全局变量记录当前题目的信息,实现了题目的刷新和显示。同时,还介绍了题目的展示方式和容器的创建。本文适合零基础的小白学习微信答题小程序的开发。 ... [详细]
  • 起因由于我录制过一个小程序的课程,里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板,使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统 课程。 ... [详细]
  • 使用flex弹性布局来为微信小程序写自适应页面
    我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖display属性positi ... [详细]
  • PHP小习题:PHP小练习题前几天在百度知道里面看到有位网友询问如何制作一下的小程序:用php语言设计一个小程序,计算今天到达下月的天数、全部输出这些天数,并使得每天的日期以三种颜 ... [详细]
  • 西安小程序开发,小程序制作,一个后台管理多端小程序功能性
    小程序已经发展4年多时间大全app下载汅api免费安卓。从最初简单demo到现在底层api接口。让我们的小程序和APP一样可以轻松的操作硬件信息。对于调取手机硬 ... [详细]
  • 生产环境下JVM调优参数的设置实例
     正文前先来一波福利推荐: 福利一:百万年薪架构师视频,该视频可以学到很多东西,是本人花钱买的VIP课程,学习消化了一年,为了支持一下女朋友公众号也方便大家学习,共享给大家。福利二 ... [详细]
  • 项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到 ... [详细]
  • 问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败,PC端是可以请求 ... [详细]
  • 跨站的艺术XSS Fuzzing 的技巧
    作者|张祖优(Fooying)腾讯云云鼎实验室对于XSS的漏洞挖掘过程,其实就是一个使用Payload不断测试和调整再测试的过程,这个过程我们把它叫做F ... [详细]
author-avatar
l彡id夏日阳光
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有