微信小程序简易计算器制作(微信小程序实现简单计算器功能)
类别:编程学习 浏览量:906
时间:2021-10-03 01:10:05 微信小程序简易计算器制作
微信小程序实现简单计算器功能微信小程序:简单计算器,供大家参考,具体内容如下
对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器。
运行截图
计算器对于界面美观的要求并不高,只是一些view以及button控件的组合,所以并不需要在界面上费很多功夫。重要的是逻辑层,之所以选择计算器作为上手的第一个项目,因为计算器的逻辑可简可繁,完全可以适应新手对小程序的掌握程度。
主要代码
js:
Page({ data: { result:"0", id1:"clear", id2:"back", id3:"time", id4:"li", 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 == "li" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add") { if(res.length){} else{ res=JSON.stri.jpg" alt="微信小程序简易计算器制作(微信小程序实现简单计算器功能)" border="0" />
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; }
后记
我这里只是对加减程进行了粗略的处理,但是这样的一个计算器也已经具备了初步的功能,随着我们掌握程度的加深,我们还可以添加平方,开方等更复杂的功能,从而熟练掌握小程序的开发。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- php开发微信小程序后台步骤流程(基于PHP实现微信小程序客服消息功能)
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序多人编辑表格(微信小程序实现固定表头、列表格组件)
- 微信小程序怎么绕过人脸的(详解微信小程序官方人脸核身认证)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 微信小程序存token(小程序开发实现access_token统一管理)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序通知验证签名方法(微信小程序实现电子签名)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 微信小程序即时聊天功能怎么实现(微信小程序实现聊天室功能)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
- 你喜欢足球吗 足球如何点亮世界的(足球如何点亮世界的)
- 不可分鸽是什么梗(不可分鸽是什么梗)
- 古代的鸽子是爱情的象征,并非和平的使者(古代的鸽子是爱情的象征)
- 一课译词 放鸽子(一课译词放鸽子)
- 终于来了,淘宝更改账户名测试中,快去看看你能不能修改(淘宝更改账户名测试中)
热门推荐
- javascript设置鼠标(JavaScript实现鼠标控制自由移动的窗口)
- extjs tabPanel的用法
- mysql操作时间的函数(一篇文章搞定Mysql日期时间函数)
- sqlserver基础数据类型(SQL Server中T-SQL 数据类型转换详解)
- python实现层次遍历二叉树(Python实现的序列化和反序列化二叉树算法示例)
- base64图片在各种浏览器的兼容性处理(base64图片在各种浏览器的兼容性处理)
- 阿里云数据库高可用方案(阿里云服务器ECS安装MariaDB后无法远程连接数据库的解决方法)
- 自制cssdiv导航栏(css利用transform skewX制作平行四边形导航菜单)
- php面向对象3大特征(PHP面向对象程序设计重载overloading操作详解)
- sql常见的聚合函数有哪些(SQL中的开窗函数详解可代替聚合函数使用)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9