微信小程序实现简单计算器
作者: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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。