微信小程序实现计算器案例
本文实例为大家分享了微信小程序实现计算器的具体代码，供大家参考，具体内容如下
项目展示
页面设计
分为上面输入的显示部分和下面按键部分
<!--pages/index/index.wxml-->
<view class="result">
<view class="result-num">{{num}}</view>
<view class="result-op">{{op}}</view>
</view>
<view class="btns">
<view>
<view hover-class="bg" bindtap="resetBtn">C</view>
<view hover-class="bg" bindtap="delBtn">DEL</view>
<view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
<view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
<view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
<view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
<view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
<view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
<view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
<view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
<view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
<view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
<view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
<view hover-class="bg" bindtap="dotBtn">.</view>
<view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
</view>
</view>
页面样式
/* pages/index/index.wxss */
page {
display: flex;
flex-direction: column;
height: 100%;
color: #555;
}
.result {
flex: 1;
background: #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;
}
/* 按钮样式 */
.bg {
background: rgb(223, 44, 20);
}
.btns {
flex: 1;
display: flex;
flex-direction: column;
font-size: 17pt;
border-top: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
}
.btns > view {
flex: 1;
display: flex;
}
.btns > view > view {
flex-basis: 25%;
border-right: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.btns > view:last-child > view:first-child {
flex-basis: 50%;
}
.btns > view:first-child > view:first-child {
color: #f00;
}
.btns > view > view:last-child {
color: #fc8e00;
}
页面逻辑
util–>calc.js
计算过程是将小数都乘以两数10的最大次幂化为整数，这样可进行高精度计算，最后再将得数除以相应的10的次幂
例如
// 精确计算
module.exports = {
// 加
add: function(arg1, arg2) {
var r1, r2, m
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
// 将小数都化为整数在进行计算 m是需要×的10的幂数
m = Math.pow(10, Math.max(r1, r2))
// 最后返回的时候再除以m
return (arg1 * m + arg2 * m) / m
},
// 减
sub: function(arg1, arg2) {
var r1, r2, m, n
try {
r1 = arg1.toString().split(".")[1].length
} catch (e) {
r1 = 0
}
try {
r2 = arg2.toString().split(".")[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
//动态控制精度长度
n = (r1 >= r2) ? r1 : r2
return ((arg1 * m - arg2 * m) / m).toFixed(n)
},
// 乘
mul: function(arg1, arg2) {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString()
try {
m += s1.split(".")[1].length
} catch (e) {}
try {
m += s2.split(".")[1].length
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
},
// 除
div: function(arg1, arg2) {
var t1 = 0,
t2 = 0,
r1, r2
try {
t1 = arg1.toString().split(".")[1].length
} catch (e) {}
try {
t2 = arg2.toString().split(".")[1].length
} catch (e) {}
r1 = Number(arg1.toString().replace(".", ""))
r2 = Number(arg2.toString().replace(".", ""))
return (r1 / r2) * Math.pow(10, t2 - t1)
}
}
index.js
数字点击处理事件
当点击数字不为零，并且指示不清空时候，将输入的num拼接到page里的num
// 数字按钮事件处理函数
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)
this.setData({
op: e.target.dataset.val
})
if (this.isClear) {
return
}
this.isClear = true
if (this.result === null) {
this.result = num
return
}
if (op === '+') {
this.result = calc.add(this.result, num)
} else if (op === '-') {
......
其他运算操作（详细代码看下面完整代码部分）
......
}
this.setData({
num: this.result + ''
})
},
全部js
// pages/index/index.js
const calc = require('../../utils/calc.js')
Page({
/**
* 页面的初始数据
*/
data: {
num: '0',
op: ''
},
// 结果
result: null,
// 是否清空数字行
/*
清空的情况(值为true)
点击过运算符之后,改为true 以便下一次输入数字显示
点击清空
*/
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)
this.setData({
op: e.target.dataset.val
})
if (this.isClear) {
return
}
this.isClear = true
if (this.result === null) {
this.result = num
return
}
if (op === '+') {
this.result = calc.add(this.result, num)
} else if (op === '-') {
this.result = calc.sub(this.result, num)
} else if (op === '*') {
this.result = calc.mul(this.result, num)
} else if (op === '/') {
this.result = calc.div(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 + '.'
})
},
// DEL按钮处理函数
delBtn: function() {
var num = this.data.num.substr(0, this.data.num.length - 1)
this.setData({
num: num === '' ? '0' : num
})
},
// C按钮事件处理函数
resetBtn: function() {
this.result = null
this.isClear = false
this.setData({
num: '0',
op: ''
})
}
})
案例下载：微信小程序实现计算器案例
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
微信小程序实现计算器小功能
微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多人一样,遇到一些不懂的想问问别人,到贴吧去,一大堆广告,根本没人帮忙解决问题. 今天教一些刚入门的同学做一款计算器,如果C语言是编程的最佳入门语言,那计算器应该算得上是小程序的入门demo了,希望刚入门的同学们认真品味下面的代码,从wxml到js,再到wxss(页面的布局),每个代码都要弄懂他的意思 废话不多说,先上
-
微信小程序实现计算器功能
本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 一.微信小程序开发工具界面 二.目录结构 第一次进到页面它的目录结构如下: 三.需要注意的问题 (1)添加的新页面文件,都需要在app.json中进行配置,否则页面报错. (2)工作原理 通过在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}" 相当于click事件. 在js代码中,可以通过this.data
-
用微信小程序实现计算器功能
本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下. 页面部分 <view class='box'> <view class='txt'>{{screenNum}}</view> <view capture-bind:touchstart="compute"> <view> <button data-val='clear' class='boxtn btn1'>AC</button> &
-
微信小程序实现简易计算器
微信小程序之简易计算器,供大家参考,具体内容如下 一.介绍 1.中缀表达式 中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间.中缀表达式是人们常用的算术表示方法. 虽然人的大脑很容易理解与分析中缀表达式,但对计算机来说中缀表达式却是很复杂的,因此计算表达式的值时,通常需要先将中缀表达式转换为前缀或后缀表达式,然后再进行求值.对计算机来说,计算前缀或后缀表达式的值非常简单. 2.后缀表达式 从左至右扫描表达式,遇到数字时,将数字压入堆栈,遇到运算符时,弹出栈顶的两个数
-
微信小程序实现简单计算器功能
微信小程序:简单计算器,供大家参考,具体内容如下 对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器. 运行截图 计算器对于界面美观的要求并不高,只是一些view以及button控件的组合,所以并不需要在界面上费很多功夫.重要的是逻辑层,之所以选择计算器作为上手的第一个项目,因为计算器的逻辑可简可繁,完全可以适应新手对小程序的掌握程度. 主要代码 js: Page({ data: { result:"0",
-
微信小程序实现简单计算器
微信小程序写的简单计算器,供大家参考,具体内容如下 jisaunqi.js // pages/jisuanqi/jisuanqi.js Page({ /** * 页面的初始数据 */ data: { result:"0", string:"", cal:"", num1:"", num2:"" }, btSubmit:function(e){ console.log(e); var num1 = this.
-
微信小程序 简易计算器实现代码实例
这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 只能进行简单的运算 效果图如下: cal.wxml <view class="screen">{{result}}</view> <view class="content"> <view class="buttonGroup"> <button
-
微信小程序计算器实例详解
微信小程序计算器实例,供大家参考,具体内容如下 index.wxml <view class="content"> <view class="num">{{num}}</view> <view class="operotor">{{op}}</view> </view> <view class="entry"> <view> <
-
微信小程序实现简单的计算器功能
本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 wxml <view class='content'> <input value='{{calculation}}'></input> <view class='box'> <button class='yellow-color'>退格</button> <button class='yellow-color' bindtap='empty'>
-
微信小程序实现计算器案例
本文实例为大家分享了微信小程序实现计算器的具体代码,供大家参考,具体内容如下 项目展示 页面设计 分为上面输入的显示部分和下面按键部分 <!--pages/index/index.wxml--> <view class="result"> <view class="result-num">{{num}}</view> <view class="result-op">{{op}}</
-
微信小程序 动画的简单实例
微信小程序--简易动画案例 wxml: <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button> js:
-
微信小程序语音同步智能识别的实现案例代码解析
一.背景 在小程序的一些应用场景中,会有语音转文字的需求.原有的做法一般是先通过小程序的录音功能录下语音文件,然后再通过调用语音智能识别WebApi(比如百度云AI平台,科大讯飞平台)将语音文件转成文字信息,以上的做法比较繁琐且用户的体验性较差. 为解决此问题,微信直接开放了同声传译的插件,小程序作者可以直接使用该插件进行语音同声传译的开发.此文章将通过前后端整合应用的完整案例完成语音的实时转换,并将语音上传到服务端后台备份. 二.同声传译插件介绍 微信同声传译由微信智聆语音团队.微信翻译团队与
-
微信小程序 scroll-view的使用案例代码详解
scroll-view:滚动视图 使用view其实也能实现滚动,跟div用法差不多 而scroll-view跟view最大的区别就在于:scroll-view视图组件封装了滚动事件,监听滚动事件什么的直接写方法就行. scroll-view纵向滚动添加属性scroll-y,然后写一个固定高度就行了,我主要说一下scroll-view的横向滚动scroll-x: 我使用了display: flex;布局,特么的直接写在scroll-view上面,显示出来的结果总是不对头,试了好多次,得到了下面两种