热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序实现简易计算器功能_javascript技巧

这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的

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

实现代码:



    {{num}}
    {{op}}


   
        C
        DEL
        %
        ÷
   

   
        7
        8
        9
        ×
   

   
        4
        5
        6
        -
   

   
        1
        2
        3
        +
   

   
        0
        .
        =
   


/* pages/computer.wxss */
page{
    display: flex;
    flex-direction: column;
    height: 100%
}
.result{
    flex: 1;
    background-color: #f3f6fe;
    position: relative;
}
.result_num{
    position: absolute;
    font-size: 27pt;
    bottom: 5vh;
    right: 3vw;
}
.result_op{
    font-size: 15pt;
    position: absolute;
    bottom: 1vh;
    right: 3vw;
}
.btns{
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 17pt;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.btns>view{
    flex: 1;
    display: flex;
}
.btns>view>view{
    flex:1;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btns>view:last-child>view:first-child{
    flex: 2;
}
.btns>view:first-child>view:first-child{
    color: #f00;
}
.btns>view>view:last-child{
    color: #fc8e00;
}
.bg{
    background-color: #eee;
}


// pages/computer.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        num:'0',
        op:''
    },
    result:null,
    isClear:false,
    numBtn:function(e){
        var num = e.target.dataset.val
       if(this.data.num==='0'||this.isClear){
        this.setData({num:num})
        this.isClear=false
       }else{
        this.setData({num:this.data.num+num})
       }
    },
    opBtn:function(e){
        var op = this.data.op
        var num = Number(this.data.num)
        var val = e.target.dataset.val
        if(val==='/'){
            this.setData({op:'÷'})
        }else if(val==='*'){
            this.setData({op:'×'})
        }else{
            this.setData({op:val})
        }
        //用于多次按计算按钮时,避免重复计算的问题
        if(this.isClear){
            return
        }
        this.isClear=true
        if(this.result===null||this.result===undefined){
            this.result = num
            return
        }
        if(op==='+'){
            this.result=this.result+num
        }else if(op==='-'){
            this.result=this.result-num
        }else if(op==='×'){
            this.result=(this.result*num).toFixed(2)
        }else if(op==='÷'){
            this.result=this.result/num
        }else if(op==='%'){
            this.result=this.result%num
        }
        this.setData({num:this.result})
    },
    dotBtn:function(){
        if(this.isClear){
            this.setData({num:'0.'})
            this.isClear=false
            return
        }
        if(this.data.num.indexOf('.')>=0){
            return
        }
        this.setData({num:this.data.num+'.'})
    },
    delBtn:function(){
        var temp = this.data.num.toString()
        var num = temp.substr(0,this.data.num.length-1);
        this.setData({num:num===''?'0':num})
    },
    resetBtn:function(){
        this.result=null
        this.isClear=false
        this.setData({num:'0',op:''})
    }
})

computer.json

{
  "navigationBarTitleText":"计算器",
  "navigationBarBackgroundColor":"#fff",
  "navigationBarTextStyle":"black",
  "usingComponents": {}
 
}


推荐阅读
  • 本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配,确保中文显示正常,并提供代码示例。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 本文详细介绍了如何在Android应用中处理和使用Cookie,包括登录时获取Cookie并将其存储,以及在WebView中同步这些Cookie以保持用户会话。 ... [详细]
  • 现在越来越多的人使用IntelliJIDEA,你是否想要一个好看的IDEA主题呢?本篇博客教你如何设置一个美美哒IDEA主题,你也可以根据 ... [详细]
  • vue引入echarts地图的四种方式
    一、vue中引入echart1、安装echarts:npminstallecharts--save2、在main.js文件中引入echarts实例:  Vue.prototype.$echartsecharts3、在需要用到echart图形的vue文件中引入:   importechartsfrom"echarts";4、如果用到map(地图),还 ... [详细]
  • 本文介绍了如何使用 Spring Boot DevTools 实现应用程序在开发过程中自动重启。这一特性显著提高了开发效率,特别是在集成开发环境(IDE)中工作时,能够提供快速的反馈循环。默认情况下,DevTools 会监控类路径上的文件变化,并根据需要触发应用重启。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 主要用了2个类来实现的,话不多说,直接看运行结果,然后在奉上源代码1.Index.javaimportjava.awt.Color;im ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 本文将深入探讨PHP编程语言的基本概念,并解释PHP概念股的含义。通过详细解析,帮助读者理解PHP在Web开发和股票市场中的重要性。 ... [详细]
  • 深入解析Java枚举及其高级特性
    本文详细介绍了Java枚举的概念、语法、使用规则和应用场景,并探讨了其在实际编程中的高级应用。所有相关内容已收录于GitHub仓库[JavaLearningmanual](https://github.com/Ziphtracks/JavaLearningmanual),欢迎Star并持续关注。 ... [详细]
  • Java项目分层架构设计与实践
    本文探讨了Java项目中应用分层的最佳实践,不仅介绍了常见的三层架构(Controller、Service、DAO),还深入分析了各层的职责划分及优化建议。通过合理的分层设计,可以提高代码的可维护性、扩展性和团队协作效率。 ... [详细]
  • 交互式左右滑动导航菜单设计
    本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ... [详细]
  • 优雅实现 jQuery 折叠展开下拉菜单
    本文介绍了一种使用 jQuery 实现的优雅折叠和展开效果的下拉菜单,通过简单的 HTML 结构和 CSS 样式,结合 jQuery 脚本,可以轻松创建出美观且功能强大的下拉菜单。 ... [详细]
author-avatar
飞舞的猫2502890283
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有