微信小程序简易计算器制作(微信小程序实现简单计算器功能)
类别:编程学习 浏览量: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; }
后记
我这里只是对加减程进行了粗略的处理,但是这样的一个计算器也已经具备了初步的功能,随着我们掌握程度的加深,我们还可以添加平方,开方等更复杂的功能,从而熟练掌握小程序的开发。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- 微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
- 鱼竿 夏钓短,冬钓长 ,一定是这样 认清优缺点在选竿(鱼竿夏钓短冬钓长)
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓(鲢鳙钓底还是钓浮)
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场(入秋后的第二场苹果发布会来了)
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel(苹果正式发布自研芯片M1)
热门推荐
- vue在html里面怎么展示图片(v-html渲染组件问题)
- python循环创建字典(Python字典的基本用法实例分析创建、增加、获取、修改、删除)
- django 后台管理office文件(django admin后台添加导出excel功能示例代码)
- C#中==、Equals、ReferenceEquals的区别
- linux系统的组成架构(Linux输入子系统框架原理解析)
- 云服务器推荐流程(云服务器入门须知的3个技巧)
- 实用的Visual Studio插件
- python配合docker(Docker构建python Flask+ nginx+uwsgi容器)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- python学生管理系统设计代码(python学生管理系统开发)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9