微信小程序实现简单计算器
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序写简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
微信小程序写的简单计算器,供大家参考,具体内容如下
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=num11+num21;break; case '-':result=num11-num21;break; case '':result=(num11)(num21);break; case '/':result=(num11)/(num21);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=n11+n21; 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-: 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-: 5px; background-color: #e4e4e4; line-height: 100rpx; font-size: 20px; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:详解React中key的作用
下一篇:Vue实现无缝轮播效果
编程语言
- 甘肃哪有关键词排名优化购买方式有哪些
- 甘肃SEO如何做网站优化
- 河南seo关键词优化怎么做电话营销
- 北京SEO优化如何做QQ群营销
- 来宾百度关键词排名:提升您网站曝光率的关键
- 卢龙关键词优化:提升您网站排名的策略与技巧
- 山东网站优化的注意事项有哪些
- 四川整站优化怎样提升在搜索引擎中的排名
- 疏附整站优化:提升网站性能与用户体验的全新
- 海南seo主要做什么工作售后服务要做到哪些
- 荣昌百度网站优化:提升您网站的搜索引擎排名
- 河北seo网站排名关键词优化如何做SEO
- 江西优化关键词排名推广售后保障一般有哪些
- 古浪SEO优化:提升你的网站可见性
- 西藏网站排名优化怎么把网站排名在百度首页
- 如何提升阳东百度快照排名:详尽指南