微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器
更新時(shí)間：2022年06月02日 15:57:15 作者：springsnow
這篇文章介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、項(xiàng)目概述
功能：
- 實(shí)現(xiàn)加減乘除
- 去余(%)
- 刪除(Delete)
- 全部清空( C)
html界面要在app.json里面注冊(cè)。
不注冊(cè)的話會(huì)報(bào)錯(cuò)：navigateTo:fail url "pages/index/talkPage" is not in app.json
注冊(cè)完畢之后編譯，開(kāi)發(fā)工具會(huì)自動(dòng)為你創(chuàng)建一個(gè)對(duì)應(yīng)的js和wxss文件，而且js里面會(huì)自動(dòng)搭好基本函數(shù)：
頁(yè)面如下：
二、WXML文件編寫(xiě)
首先我們對(duì)計(jì)算器頁(yè)面進(jìn)行設(shè)計(jì)，這里我們主要分為兩部分，上部分和下部，顯示部分分為操作數(shù)和操作符。
計(jì)算器分為五行四列，最外面為縱向布局，里面為橫向布局。布局通過(guò)樣式表操作，
代碼如下：
<view class="result">
<!-- 當(dāng)前view表示的是顯示部分 -->
<view class="result_num">{{num}}</view>
<!--顯示操作數(shù) -->
<view class="result_op">{{op}}</view>
<!--顯示操作符 -->
</view>
<view class="btns">
<!-- 當(dāng)前view表示的是操作部分 -->
<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" bindtap="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="*">×</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="doBtn">.</view>
<view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
</view>
</view>三、WXSS文件編寫(xiě)
這里分兩部分，計(jì)算結(jié)果展示區(qū)，計(jì)算按鈕區(qū)?？梢?jiàn)wxml文件注釋。
這里在補(bǔ)充一點(diǎn)樣式設(shè)計(jì)：
- display:flex 表示彈性布局，block塊布局（后面接換行符）
flex：1表示占滿剩余空間（flex-grow,flex-shrink,flex-basis的簡(jiǎn)寫(xiě)）默認(rèn)值為:0，1，auto， 不伸不縮 - flex-direction：容器內(nèi)元素的排列方向（默認(rèn)橫向排列）
1.flex-direction:row;沿水平主軸讓元素從左向右排列。此時(shí)flex-basis相當(dāng)于width。
2.flex-direction：colimn；沿垂直主軸從上到下排列。此時(shí)flex-basis相當(dāng)于height
3.flex-direction:roe-reverse;沿水平主軸從右向左排列 - hover-class： 按下去的樣式
- **box-sizing：border-box；**將邊框先計(jì)入寬度之內(nèi),用于確定準(zhǔn)確邊框?qū)挾?，任何像素都?huì)影響頁(yè)面效果
- align-items：**垂直對(duì)齊,**display要設(shè)置成flex才能對(duì)齊屬性賦值
- justify-content：水平對(duì)齊方式
- 樣式表的設(shè)置“>”符號(hào)：表示嵌套級(jí)聯(lián)關(guān)系
.btns>view>view
view>view - 視口單位
代碼如下：
/* pages/cal/index.wxss */
.result {
flex: 1; /* 彈性填充滿*/
background: #f3f6fe;
position: relative;
}
.btns {
flex: 1;
display: flex; /*彈性顯示結(jié)構(gòu)*/
flex-direction: column; /*縱向顯示*/
font-size: 17pt;
border-top: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
}
page {
display: flex;
flex-direction: column;
height: 100%;
}
.btns>view {
flex: 1;
display: flex;
flex-direction: row;
}
.btns>view>view {
flex-basis: 25%;
border-right: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.btns>view:last-child>view:first-child {
flex-basis: 50%;
}
.bg {
background-color: #eee;
}
.result_num {
font-size: 17pt;
position: absolute;
bottom: 5vh;
right: 3vw;
}
.result_op {
font-size: 17pt;
position: absolute;
bottom: 1vh;
right: 3vw;
}四、JS頁(yè)面設(shè)計(jì)
主要實(shí)現(xiàn)
代碼如下：
Page({
data: {
num: "", //前臺(tái)頁(yè)面顯示的輸入數(shù)字或者結(jié)果
op: "" //前臺(tái)頁(yè)面顯示的操作符
},
result: null, //裝載計(jì)算結(jié)果
isClear: true, //是否需要清理前面的數(shù)字，true是要清理
numBtn: function(e) {
var num = e.target.dataset.val; //獲取你輸入的數(shù)字
if (this.isClear || this.data.num == "0") //如果需要清理前面的數(shù)字，那么前面的數(shù)字就不需要保存
{
this.isClear = false; //將清理標(biāo)志設(shè)置為false，以便連續(xù)輸入數(shù)字
this.setData({
num: num
});
} else {
this.setData({
num: this.data.num + num //不清理前面的內(nèi)容，將輸入的內(nèi)容追加到最后面,這是字符串的連接操作，因?yàn)閮蛇叾际亲址愋?
});
}
},
opBtn: function(e) {
var op = this.data.op; //獲取上一次的操作符
var num = Number(this.data.num); //獲取操作數(shù)
this.setData({
op: e.target.dataset.val
});
if (this.isClear) //當(dāng)你連續(xù)點(diǎn)擊操作符的時(shí)候，操作無(wú)效
{
return;
}
this.isClear = true; //設(shè)置清理內(nèi)容標(biāo)志
if (this.result == null) //講第一次運(yùn)算設(shè)置為當(dāng)前的操作數(shù)
{
this.result = num;
return;
}
//運(yùn)算符的運(yùn)算
if (op == "+") {
// this.result = cals.add(this.result, num);
this.result = this.result + num; //數(shù)字加，因?yàn)閚um是數(shù)字類型
} else if (op == "-") {
// this.result = cals.sub(this.result, num);
this.result = this.result - num;
} else if (op == "*") {
// this.result = cals.mul(this.result, num);
this.result = this.result * num;
} else if (op == "/") {
// this.result = cals.div(this.result, num);
this.result = this.result / num;
} else if (op == "%") {
this.result = this.result % num;
}
this.setData({
num: this.result
});
},
doBtn: function(e) {
if (this.isClear) //如果直接點(diǎn)擊小數(shù)點(diǎn)，則顯示"0."
{
this.setData({
num: "0."
});
this.isClear = false;
return;
}
if (this.data.num.indexOf(".") >= 0) //查詢前面輸入的數(shù)字中，是否存在小數(shù)點(diǎn)
{
return; //如果存在小數(shù)點(diǎn)，當(dāng)前輸入無(wú)效
}
this.setData({
num: this.data.num + "."
});
},
delBtn: function(e) {
var num = this.data.num.substr(0, this.data.num.length - 1);
this.setData({
num: num == "" ? "0" : num
});
},
resetBtn: function(e) {
this.result = null;
this.isClear = true;
this.setData({
num: '0',
op: ''
});
}
})五、總結(jié)
1、計(jì)算器最重要注意樣式表，JS。
在JS中要是想數(shù)據(jù)從前臺(tái)傳到后臺(tái)通過(guò)事件的方式（e)，從后臺(tái)傳到前臺(tái)用data的方式。
2、主頁(yè)跳轉(zhuǎn)到計(jì)算器頁(yè)面
主頁(yè)index.wxml,增加一個(gè)按鈕：
<button bindtap="OnCalShow" >計(jì)算器</button>
在index.js中增增加
OnCalShow() {
wx.navigateTo({
url: '/pages/cal/index',
})
}
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js前端如何實(shí)現(xiàn)圖片壓縮上傳的效果，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，有需要的小伙伴可以參考一下2023-11-11
Javascript 修改String 對(duì)象 增加去除空格功能(示例代碼)
這篇文章主要介紹了Javascript 修改String 對(duì)象 增加去除空格功能(示例代碼)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了Java 生成隨機(jī)字符的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
這篇文章給大家分享了關(guān)于js中時(shí)間格式化的幾種方法，有需要的朋友們可以參考學(xué)習(xí)下。2018-07-07
原生JS實(shí)現(xiàn)非常好看的計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)非常好看的計(jì)數(shù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
CountUp.js數(shù)字滾動(dòng)插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了CountUp.js數(shù)字滾動(dòng)插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
select由左邊框移動(dòng)到右邊，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-12-12
javascript實(shí)現(xiàn)復(fù)選框超過(guò)限制即彈出警告框的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)復(fù)選框超過(guò)限制即彈出警告框的方法,涉及復(fù)選框及警告框的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
詳解用Webpack與Babel配置ES6開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開(kāi)發(fā)環(huán)境，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
淺析JavaScript中兩種類型的全局對(duì)象/函數(shù)
這篇文章主要介紹了JavaScript中兩種類型的全局對(duì)象/函數(shù)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12