微信小程序实现简单计算器
更新时间：2021年04月12日 08:43:44 作者：m0_45972156
这篇文章主要为大家详细介绍了微信小程序写简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序写的简单计算器，供大家参考，具体内容如下
jisaunqi.js
// pages/jisuanqi/jisuanqi.js
Page({
/**
* 页面的初始数据
*/
data: {
result:"0",
string:"",
cal:"",
num1:"",
num2:""
},
btSubmit:function(e){
console.log(e);
var num1 = this.data.num1;
var cal = this.data.cal;
var num2 = this.data.num2;
var char= e.target.id;
var string ;
if((char>="0"&&char<="9"||char=='.')&&cal==""){
num1=num1+char;
this.setData({
num1:num1,
})
}
else if((char>="0"&&char<="9"||char=='.')&&cal!=""){
num2=num2+char;
this.setData({
num2:num2,
})
}
else {
cal=char;
this.setData({
cal:cal,
})
}
this.setData({
string:num1+cal+num2
})
},
clean:function(e){
this.setData({
string:"",
num1:"",
num2:"",
cal:""
})
},
calculate:function(e){
var num1 = this.data.num1;
var num2 = this.data.num2;
var cal = this.data.cal;
var result;
switch(cal){
case '+':result=num1*1+num2*1;break;
case '-':result=num1*1-num2*1;break;
case '*':result=(num1*1)*(num2*1);break;
case '/':result=(num1*1)/(num2*1);break;
}
num1=result;
cal="";
num2="";
this.setData({
result:result,
num1:num1,
cal:cal,
num2:num2
})
},
reverse:function(e){
var cal = this.data.cal;
var num1 = this.data.num1;
var num2 = this.data.num2;
if(cal==""){num1="-";}
else if(cal!=""){num2="-"}
this.setData({
num1:num1,
num2:num2
})
},
lololo:function(e){
console.log(123)
},
confirm:function(e){
console.log(555);
console.log(e)
},
event:function(e){
wx.navigateTo({
url: '/pages/event/event',
})
},
bindinput:function(e){
console.log(1)
},
jisuanqi:function(e){
var n1=e.detail.value.num1;
var n2=e.detail.value.num2;
var result=n1*1+n2*1;
console.log(n1);
console.log(n2);
console.log(result);
this.setData({
result:result
})
},
tiaozhuan:function(e){
wx.navigateTo({
url: '/pages/9x9form/9x9form',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
jisuanqi.json
{
"usingComponents": {},
"navigationBarTitleText": "计算器"
}
jisuanqi.wxml
<view class="container">
<view class="view1">{{string}}</view>
<view class="view2">{{result}}</view>
<view class="button-group">
<button class="button">历史</button>
<button class="button" bindtap="clean">C</button>
<button class="button"></button>
<button class="button" id="/" bindtap="btSubmit">/</button>
</view>
<view class="button-group">
<button class="button" id="7" bindtap="btSubmit">7</button>
<button class="button" id="8" bindtap="btSubmit">8</button>
<button class="button" id="9" bindtap="btSubmit">9</button>
<button class="button" id="*" bindtap="btSubmit">*</button>
</view>
<view class="button-group">
<button class="button" id="4" bindtap="btSubmit">4</button>
<button class="button" id="5" bindtap="btSubmit">5</button>
<button class="button" id="6" bindtap="btSubmit">6</button>
<button class="button" id="-" bindtap="btSubmit">-</button>
</view>
<view class="button-group">
<button class="button" id="1" bindtap="btSubmit">1</button>
<button class="button" id="2" bindtap="btSubmit">2</button>
<button class="button" id="3" bindtap="btSubmit">3</button>
<button class="button" id="+" bindtap="btSubmit">+</button>
</view>
<view class="button-group">
<button class="button" bindtap="reverse">-(符号减)</button>
<button class="button" id="0" bindtap="btSubmit">0</button>
<button class="button" id="." bindtap="btSubmit">.</button>
<button class="button" bindtap="calculate">=</button>
</view>
</view>
<navigator url="/pages/event/event">跳转到event</navigator>//
jisuanqi.wxss
.button{
width: 160rpx;
height: 100rpx;
margin-left: 10rpx;
padding-left: 10rpx;
margin-top: 10rpx;
text-align: center;
line-height: 100rpx;
padding: 5px;
border-radius: 5px;
}
.button-group{
display: flex;
flex-direction: row;
align-content: flex-start;
}
.container{
display: flex;
flex-direction: column;
justify-content: flex-end;
/* align-content: flex-end; */
}
.view1{
height: 100rpx;
background-color: #e4e4e4;
line-height: 100rpx;
font-size: 20px;
}
.view2{
height: 100rpx;
margin-top: 5px;
background-color: #e4e4e4;
line-height: 100rpx;
font-size: 20px;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
这篇文章主要介绍了JS图片延迟加载插件LazyImgv1.0用法,结合实例形式分析了使用图片延迟加载插件LazyImgv1.0的注意事项与核心操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-09-09
扫雷是一款相当大众的小游戏,游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子,同时避免踩雷。今天我们来看看如何使用javascript来实现这款小游戏2015-03-03
javascript实现选中复选框后相关输入框变灰不可用的方法
这篇文章主要介绍了javascript实现选中复选框后相关输入框变灰不可用的方法,涉及javascript针对页面元素属性的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了JavaScript之WebSocket技术,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术,本文给大家介绍了使用JavaScript实现页面局部更新的三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下2023-12-12
详解webpack-dev-server 设置反向代理解决跨域问题
后端只负责接口，前端负责数据展示、逻辑处理。那么如何跨域？这篇文章主要介绍了webpack-dev-server 设置反向代理解决跨域问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这是一个非常重要的知识点了，了解了JavaScript的作用域链的话，能帮助我们理解很多‘异常’问题。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
直接调用window.print()，但是打印出来后，字体总是缩小一号,后来直接target="_blank"，就可以正常打印了，下面是实现代码2014-01-01
在访问某个网站或者博客时，如果该站点为用户提供内容的评级或投票功能的话，可以增强用户参与的交互性之外，更可以给用户一种“主人”的亲切感，使得用户可以切实地参与到网站内容的评价体系中来。2010-01-01
微信小程序开发之animation循环动画实现的让云朵飘效果
这篇文章主要介绍了微信小程序开发之animation循环动画实现的让云朵飘效果,结合实例形式分析了animation结合js时间函数实现循环动画效果的具体步骤与相关操作技巧,需要的朋友可以参考下2017-07-07
最新评论