計(jì)算器：
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" bi ndtap="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="*">x</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>
js:
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
num: '',
op: '+'
},
result: null,
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 = this.result + num
}
else if (op === '-') {
this.result = this.result - num
}
else if (op === '*') {
this.result = this.result * num
}
else if (op == '/') {
this.result = 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 + '.' })
},
delBtn: function () {
var num = this.data.num.substr(0, this.data.num.length - 1)
this.setData({ num: num === '' ? '0' : num })
},
resetBtn: function () {
this.result = null
this.isClear = false
this.setData({ num: '0', op: '' })
},
})
WXSS:
page{
display: flex;
flex-direction: column;
height: 100%
}
.result{
flex: 1;
background: #f3f6fe;
}
.btns{
flex: 1;
}
.bg{
background: #eee;
}
.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;
}
.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;
}
比較數(shù)字大小
wxml：
<view class="container">
<view>
<text>請(qǐng)輸入第1個(gè)數(shù)：</text>
<input type="number" bindchange="num1Change"></input>
</view>
<view>
<text>請(qǐng)輸入第2個(gè)數(shù)：</text>
<input type="number" bindchange="num2Change"></input>
</view>
<button bindtap="compare">比較</button>
<text>比較結(jié)果：{{result}}</text>
</view>
wxss：
.input{
width: 300px;
margin-top: 20rpx;
border-bottom: 2rpx磷蛹；
solid：rgb(240, 34, 34)
}
.x{
background-color: rgb(231, 60, 60)
}
.w{ margin: 50rpx;
background-color: rgb(94, 116, 241)
}
js：
Page({
/**
- 頁(yè)面的初始數(shù)據(jù),定義數(shù)值、字符串味咳、數(shù)組，相當(dāng)于int num1=new int;這種樣子
*/
data: {
num1: 0,
num2: 0,
result: ''
},
/**
- 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
},
/**
- 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
- 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
},
/**
- 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () {
},
/**
- 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () {
},
/**
- 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
- 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
- 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
},
num1Change: function (e) {
console.log("從界面獲取的第一個(gè)數(shù)： "+e.detail.value)
this.setData({
num1: Number(e.detail.value)
})
},
num2Change: function (e) {
this.setData({
num2: Number(e.detail.value)
})
},
compare: function () {
console.log(this.data.num2)
var str = '兩數(shù)相等'
if (this.data.num1 > this.data.num2) {
str = '第1個(gè)數(shù)大'
} else if (this.data.num2 > this.data.num1) {
str = '第2個(gè)數(shù)大'
}
this.setData({
result: str
})
}
})
