微信小程序实现计算器功能
更新时间：2021年07月19日 09:12:36 作者：dyfc3sfd3s
这篇文章主要为大家详细介绍了微信小程序实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现计算器功能的具体代码，供大家参考，具体内容如下
一、微信小程序开发工具界面
二、目录结构
第一次进到页面它的目录结构如下：
三、需要注意的问题
(1)添加的新页面文件，都需要在app.json中进行配置，否则页面报错。
(2)工作原理 通过在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}" 相当于click事件。
在js代码中，可以通过this.data.n9获取数据，这些数据的定义都是在js中
通过在<view id="{{btn_a}}"><view>填写id，在具体的函数中，event.target.id去判断id是多少，进行区分。就可以实现，不同标签的点击，然后进行业务逻辑。如果需要访问数据，则是通过this.data.xx。
计算器的wxml页面
<view class="content">
<view class="xianshi">{{screenNum}}</view>
<view class="anniu">
<view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>
<view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>
<view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>
<view class="item blue" bindtap="btnClick" id="{{na}}">+</view>
</view>
<view class="anniu">
<view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>
<view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>
<view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>
<view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>
</view>
<view class="anniu">
<view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>
<view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>
<view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>
<view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>
</view>
<view class="anniu">
<view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>
<view class="item blue" bindtap="btnClear">AC</view>
<view class="item blue" bindtap="btnJs">=</view>
<view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>
</view>
</view>
// pages/cal/cal.js
Page({
/**
* 页面的初始数据
*/
data: {
n0: 0,
n1: 1,
n2: 2,
n3: 3,
n4: 4,
n5: 5,
n6: 6,
n7: 7,
n8: 8,
n9: 9,
na: '+',
nb: '-',
nc: '*',
nd: '/',
screenNum: 0,
screenStr: 0,
is_num:1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
btnClick:function(event){
//console.log('你按得键是'+event.target.id);
//console.log('上一次' + this.data.is_num);
var op='';
var data=0;
var last_is_num = this.data.is_num;
//这次输入的是什么
if (event.target.id == '9' || event.target.id == '8' || event.target.id == '7' || event.target.id == '6' || event.target.id == '5' || event.target.id == '4' || event.target.id == '3' || event.target.id == '2' || event.target.id == '1' || event.target.id == '0') {
data = event.target.id;
this.setData({ is_num: 1 });
}
if (event.target.id == '+' || event.target.id == '-' || event.target.id == '*' || event.target.id == '/') {
op = event.target.id;
this.setData({ is_num: 0 });
}
if (last_is_num==1){
//如果上一次是数字
if (op == ''){
//这一次是数字
if (this.data.screenNum!=0){
this.setData({ screenNum: this.data.screenNum + data });
this.setData({ screenStr: this.data.screenStr + data });
}else{
this.setData({ screenNum: data});
this.setData({ screenStr: data });
}
}else{
this.setData({ screenNum: this.data.screenNum + op });
this.setData({ screenStr: this.data.screenStr +',' +op+',' });
}
}else{
//上次不是数字
if (data != 0) {
//这一次是数字
this.setData({ screenNum: this.data.screenNum + data });
this.setData({ screenStr: this.data.screenStr + data });
} else {
return;
}
}
//console.log(op+'aaaaa'+data);
//console.log('现在是'+this.data.is_num);
//console.log('screenNum' + this.data.screenNum);
//console.log(this.data.screenStr);
},
btnJs:function(){
console.log(this.data.screenNum);
console.log(this.data.screenStr);
var result=0;
var strs = new Array(); //定义一数组
strs = this.data.screenStr.split(","); //字符分割
for (var i = 0; i < strs.length; i++) {
//console.log(strs[i] + i); //分割后的字符输出
if (strs[i]=='+'){
result = parseInt(strs[i - 1]) + parseInt(strs[i+1]);
}
if (strs[i] == '-') {
result = strs[i - 1] - strs[i + 1];
}
if (strs[i] == '*') {
result = strs[i - 1] * strs[i + 1];
}
if (strs[i] == '/') {
result = strs[i - 1] / strs[i + 1];
}
}
console.log('result:'+result);
this.setData({ screenNum: result});
this.setData({ screenStr: result });
},
btnClear:function(){
//把标记恢复成默认状态
this.setData({ screenNum: 0 });
this.setData({ screenStr: 0 });
this.setData({ is_num: 1 });
}
})
总结，在小程序的布局方面引入了相对单位rpx，需要在学习一下弹性盒子flex布局。对于js部分，和vue.js有些类似，都是对数据进行绑定，简化js的dom操作。这两点还是需要再看看。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了BootStrap学习笔记之nav导航栏和面包屑导航的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JS实现访问DOM对象指定节点的方法,结合实例形式分析了javascript针对DOM元素节点属性相关操作技巧,需要的朋友可以参考下2018-04-04
js动态添加事件可以搜索到很多的相关文章，不过可以传参数的就没有几个了，下面有个不错的示例可以满足大家对传参的需求，感兴趣的各位不要错过2013-10-10
很多网站都涉及到输入日期选项，如果客户日期输入错误，可能导入查询不到甚至查询到错误的信息，为了更好的满足用户需求，需要对日期进行校验，下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了javascript封装的sqlite操作类,可实现SQLite数据库的初始化及执行SQL语句的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JS中frameset框架弹出层实例代码 的相关资料,需要的朋友可以参考下2016-04-04
js自动生成的元素与页面原有元素发生堆叠通过去除浮动，给原有元素（商品扩展信息部分）加上clear:both; 果然正常了2013-10-10
这篇文章主要介绍了TypeScript使用函数重载确定返回类型的实现方法，文中通过代码示例讲解的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-03-03
微信小程序在 2.2.1 版本后增加了对 npm 包加载的支持，使得小程序支持使用 npm 安装第三方包。这篇文章主要介绍了在小程序开发中使用npm的方法，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了js中值引用和地址引用,结合实例形式分析了javascript值引用和地址引用相关原理、用法及操作注意事项,需要的朋友可以参考下2019-06-06
最新评论