微信小程序：简单计算器

对于才接触小程序不久的人来说，想要直接上手一个实用性强的项目难度很大，想要快速熟悉小程序的使用，我们可以先尝试着做一个简单的计算器。

运行截图

计算器对于界面美观的要求并不高，只是一些view以及button控件的组合，所以并不需要在界面上费很多功夫。重要的是逻辑层，之所以选择计算器作为上手的第一个项目，因为计算器的逻辑可简可繁，完全可以适应新手对小程序的掌握程度。

主要代码

js:

Page({data: {result:"0",id1:"clear",id2:"back",id3:"time",id4:"div",id5:"mul",id6:"sub",id7:"add",id8:"dot",id9:"eql",id10:"num_0",id11:"num_1",id12:"num_2",id13:"num_3",id14:"num_4",id15:"num_5",id16:"num_6",id17:"num_7",id18:"num_8",id19:"num_9",buttonDot:false,is_time:false},clickButton: function (e) {console.log(e);var buttonVal = e.target.id;var res = this.data.result;if(this.data.is_time==true){res=0}var newbuttonDot=this.data.buttonDot;var sign;if (buttonVal >= "num_0" && buttonVal <= "num_9") {var num=buttonVal.split('_')[1];if (res == "0" || ((res.length-0) -(length-1)) == "=") {res = num;}else {res = res + num;}}else{if(buttonVal=="dot"){if(!newbuttonDot){res = res + '.';}}else if(buttonVal=="clear"){res='0';}else if(buttonVal=="back"){var length=res.length;if(length>1){res=res.substr(0,length-1);}else{res='0'; }}else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add"){if(res.length){}else{res=JSON.stringify(res)}  var is_sign=res.substr(res.length-1,res.length)if(is_sign=="+"||is_sign=="-"||is_sign=="×"||is_sign=="÷"){res=res.substr(0,res.length-1);}switch(buttonVal){case "div":sign ='÷';break;case "mul":sign ='×';break;case "sub":sign='-';break;case "add":sign='+';break;}if(!isNaN(res.length)){res.length-1;res=res+sign;}}}this.setData({is_time:false,result: res,buttonDot:newbuttonDot,});},equal: function(e){var str=this.data.result;var item= '';var strArray = [];var temp=0;for(var i=0;i<=str.length;i++){var s=str.charAt(i);if((s!='' && s>='0' && s<='9') || s=='.'){item=item+s;}else{strArray[temp]=item;temp++;strArray[temp]=s;temp++;item='';}}if(isNaN(strArray[strArray.length-1])){strArray.pop();}var num;var res=strArray[0]*1;for(var i=1;i<=strArray.length;i=i+2){num=strArray[i+1];switch(strArray[i]){case "-":res = (res-0)- (num-0);break;case "+":res = (res-0) + (num-0);break;case "×":res = (res-0)* (num-0);break;case "÷":if(num!='0'){res = (res-0)/ (num-0);}else{res ='∞';break;} break;}}this.setData({result:res,});},time:function(e){var util=require("../../utils/util.js");var time=util.formatTime(new Date());this.setData({result:time,is_time:true});}})

wxml:

<!--index.wxml-->
<view class="project_name">简单计算器</view>
<view class="screen_content"><view class="screen">{{result}}</view>
</view>
<view class="content"> <view class="buttonGroup"><button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button><button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button><button id="{{id3}}" bindtap="time" class="buttonitem color" hover-class="shadow"><icon type="waiting" color="#66CC33"></icon></button><button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button></view> <view class="buttonGroup"> <button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button><button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button><button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button><button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button></view><view class="buttonGroup"><button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button><button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button><button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button><button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button></view><view class="buttonGroup"><button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button><button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button><button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button><button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button></view><view class="buttonGroup"><button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button><button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button><button id="{{id9}}" bindtap="equal" class="equal" hover-class="shadow">=</button></view>
</view>

wxss:

/**index.wxss**/
page{background: #f5f5f5;}.project_name{position:absolute;top:25px;width:100%;text-align: center;font-size: 30px;}.screen_content{position: fixed;color: #1b1717;background: #fff;font-size: 40px;bottom: 390px;text-align: right;height:100px;width: 100%;word-wrap: break-word;border-top:1px solid #a8a8a8;border-bottom:1px solid #a8a8a8;}.screen{position: absolute;font-size: 40px;text-align: right;bottom:0px;width: 96%;left:2%;word-wrap: break-word;}.content{position: fixed;bottom: 0;}.buttonGroup{display: flex;flex-direction: row;}.buttonitem{text-align: center;line-height: 120rpx;width: 25%;border-radius: 0;}.buttonitem1{width: 192rpx;text-align: center;line-height: 120rpx;border-radius: 0;}icon{position: absolute;top: 20%;left: 67rpx;}.color{background: #fff;}.equal{width: 380rpx;text-align: center;line-height: 120rpx;border-radius: 0;background: #fff;}.shadow{background: #e9ebe9;}

后记

我这里只是对加减程进行了粗略的处理，但是这样的一个计算器也已经具备了初步的功能，随着我们掌握程度的加深，我们还可以添加平方，开方等更复杂的功能，从而熟练掌握小程序的开发。

微信小程序：简单计算器相关推荐

微信小程序——简单计算器
实现代码:  <view class="result"><view class="res ...
微信小程序-简易计算器
代码地址如下: http://www.demodashi.com/demo/14210.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序简单好看的表格器
微信小程序简单好看的表格 1.数据和样式 2.带纵向滑动条的列表纯色简单表格 3.带纵向滑动条的列表间隔色简单表格微信小程序目前没有 table 标签,需要用到表格,必须自己处理.想要一个简单的比较 ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序简单的信息表格的提交到数据库(新手篇)(云端数据库)
微信小程序简单的信息表格的提交到数据库(新手专属)(云端数据库) 大家好,我是小陈,一名大一的编码爱好者,,,,,刚刚结束了大一的学习生活,也总结出了一点编码的经验,希望与大家一起分享.我是学习物联网 ...
微信小程序--简单页面跳转
微信小程序--简单页面跳转例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...
【微信小程序系列】微信小程序简单的实现发送订阅信息
[微信小程序系列]微信小程序简单的实现发送订阅信息项目结构两个云函数一个页面获取模板注:详细内容中的参数很重要,一会要在云函数里用代码 app.js // app.js App({onLau ...
小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...
微信小程序简单日历组件
微信小程序简单的日历组件代码:  <view class='cld'><view class="cld-top">< ...
微信小程序-ios计算器简易版
微信小程序-ios计算器图片: 核心代码 index.js: Page({ data: { value: null, // 上次计算后的结果,null表示没有上次计算的结果 displayValue ...

微信小程序：简单计算器

微信小程序：简单计算器

运行截图

主要代码

后记

微信小程序：简单计算器相关推荐

最新文章

热门文章