微信小程序 簡(jiǎn)易計(jì)算器實(shí)現(xiàn)代碼實(shí)例
更新時(shí)間：2019年09月02日 14:31:03 作者：EN_T
這篇文章主要介紹了微信小程序 簡(jiǎn)易計(jì)算器實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序 簡(jiǎn)易計(jì)算器實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
只能進(jìn)行簡(jiǎn)單的運(yùn)算
效果圖如下：
cal.wxml
<view class="screen">{{result}}</view>
<view class="content">
<view class="buttonGroup">
<button id="{{id1}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">清除</button>
<button id="{{id2}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">回退</button>
<button id="{{id3}}" bindtap="time" class="buttonitem color1" hover-class="shadow">
<icon type="waiting" color="#66CC33"></icon>
</button>
<button id="{{id4}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">÷</button>
</view>
<view class="buttonGroup">
<button id="{{id17}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow7">7</button>
<button id="{{id18}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow8">8</button>
<button id="{{id19}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow9">9</button>
<button id="{{id5}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">×</button>
</view>
<view class="buttonGroup">
<button id="{{id14}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow4">4</button>
<button id="{{id15}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow5">5</button>
<button id="{{id16}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow6">6</button>
<button id="{{id6}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">-</button>
</view>
<view class="buttonGroup">
<button id="{{id11}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow1">1</button>
<button id="{{id12}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow2">2</button>
<button id="{{id13}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow3">3</button>
<button id="{{id7}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">+</button>
</view>
<view class="buttonGroup">
<button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color3" hover-class="shadow0">0</button>
<button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color2" hover-class="shadow1">.</button>
<button id="{{id9}}" bindtap="equal" class="buttonitem1 color2" hover-class="shadow1">=</button>
</view>
</view>
cal.wxss
/* pages/cal/cal.wxss */
page{
background: #000000;
}
.screen{
position: fixed;
color: #ffffff;
font-size: 30px;
bottom: 780rpx;
text-align: right;
width: 730rpx;
word-wrap: break-word;
}
.content{
position: fixed;
bottom: 0;
}
.buttonGroup{
display: flex;
flex-direction: row;
}
.buttonitem{
text-align: center;
line-height: 148rpx;
width: 192rpx;
border-radius: 0;
}
.buttonitem1{
width: 255rpx;
text-align: center;
line-height: 148rpx;
border-radius: 0;
}
icon{
position: absolute;
top: 30rpx;
left: 67rpx;
}
.color1{
background: #CCFF99;
}
.color2{
background: #FFFF99;
}
.color3{
background: rgb(167, 223, 241);
}
.shadow{
background: #88e676;
}
.shadow0{
background: rgb(149, 118, 243);
}
.shadow1{
background: #FFCC66;
}
.shadow2{
background: #99FF00;
}
.shadow3{
background: #FF9999;
}
.shadow4{
background: #00CC66;
}
.shadow5{
background: #00CCFF;
}
.shadow6{
background: rgb(248, 80, 80);
}
.shadow7{
background: #FFCCFF;
}
.shadow8{
background: #CCCCCC;
}
.shadow9{
background: #CCFFFF;
}
cal.js
// pages/cal/cal.js
Page({
data: {
result:"0",
id1:"clear",
id2:"back",
id3:"time",
id4:"div",
id5:"mul",
id6:"sub",
id7:"add",
id8:"dot",
id9:"eql",
id10:"num_0",
id11:"num_1",
id12:"num_2",
id13:"num_3",
id14:"num_4",
id15:"num_5",
id16:"num_6",
id17:"num_7",
id18:"num_8",
id19:"num_9",
buttonDot:false,
},
clickButton: function (e) {
console.log(e);
var buttonVal = e.target.id;
var res = this.data.result;
var newbuttonDot=this.data.buttonDot;
var sign;
if (buttonVal >= "num_0" && buttonVal <= "num_9") {
var num=buttonVal.split('_')[1];
if (res == "0" || res.charAt(res.length -(length-1)) == "=") {
res = num;
}
else {
res = res + num;
}
}
else{
if(buttonVal=="dot")
{
if(!newbuttonDot)
{
res = res + '.';
}
}
else if(buttonVal=="clear")
{
res='0';
}
else if(buttonVal=="back")
{
var length=res.length;
if(length>1)
{
res=res.substr(0,length-1);
}
else{
res='0';
}
}
else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add")
{
switch(buttonVal){
case "div":
sign ='÷';
break;
case "mul":
sign ='×';
break;
case "sub":
sign='-';
break;
case "add":
sign='+';
break;
}
if(!isNaN(res.charAt(res.length-1)))
{
res=res+sign;
}
}
}
this.setData({
result: res,
buttonDot:newbuttonDot,
});
},
equal: function(e){
var str=this.data.result;
var item= '';
var strArray = [];
var temp=0;
for(var i=0;i<=str.length;i++){
var s=str.charAt(i);
if((s!='' && s>='0' && s<='9') || s=='.'){
item=item+s;
}
else{
strArray[temp]=item;
temp++;
strArray[temp]=s;
temp++;
item='';
}
}
if(isNaN(strArray[strArray.length-1]))
{
strArray.pop();
}
var num;
var res=strArray[0]*1;
for(var i=1;i<=strArray.length;i=i+2){
num=strArray[i+1];
switch(strArray[i]){
case "-":
res = res - num;
break;
case "+":
res = res + num;
break;
case "×":
res = res * num;
break;
case "÷":
if(num!='0')
{
res = res / num;
}
else
{
res ='∞';
break;
}
break;
}
}
this.setData({
result:'='+res,
});
},
time:function(e){
var util=require("../../utils/util.js");
var time=util.formatTime(new Date());
this.setData({
result:time
});
}
})
cal.json
{
"navigationBarBackgroundColor": "#FF9900",
"navigationBarTitleText": "EN計(jì)算器",
"usingComponents": {}
}
其中有一些小錯(cuò)誤，望大神指正?。。?！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS中函數(shù)科里化的背景與應(yīng)用實(shí)例教程
在數(shù)學(xué)和計(jì)算機(jī)科學(xué)中,柯里化是一種將使用多個(gè)參數(shù)的一個(gè)函數(shù)轉(zhuǎn)換成一系列使用一個(gè)參數(shù)的函數(shù)的技術(shù),下面這篇文章主要給大家介紹了JS中函數(shù)科里化的背景與應(yīng)用實(shí)例的相關(guān)資料,需要的朋友可以參考下2022-06-06
JavaScript之iterable_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之iterable，遍歷Array可以采用下標(biāo)循環(huán)，遍歷Map和Set就無(wú)法使用下標(biāo)。為了統(tǒng)一集合類型，ES6標(biāo)準(zhǔn)引入了新的iterable類型，Array、Map和Set都屬于iterable類型2017-06-06
js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
如何使用Javascript正則表達(dá)式來格式化XML內(nèi)容
本篇文章是對(duì)使用Javascript正則表達(dá)式來格式化XML內(nèi)容的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以參考下2013-07-07
這篇文章主要介紹了JavaScript定時(shí)器原理,setTimeout()方法用于設(shè)置一個(gè)定時(shí)器，該定時(shí)器在定時(shí)器到期后執(zhí)行調(diào)用函數(shù),文章圍繞JavaScript定時(shí)器相關(guān)資料展開以下內(nèi)容,需要的朋友可以參考一下2021-12-12
這篇文章為大家分析一下js中的數(shù)組對(duì)象排序的一些知識(shí)，方便大家在以后使用中知道這些排序的原理2018-12-12
JavaScript獲取對(duì)象key的幾種方法和區(qū)別
這篇文章主要介紹了JavaScript獲取對(duì)象key的幾種方法和區(qū)別，下面文章更多的相關(guān)資料需要的小伙伴可以參考一下，希望對(duì)你有所幫助2022-03-03
JavaScript @umijs/plugin-locale插件使用教程
這篇文章主要介紹了JavaScript @umijs/plugin-locale插件使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12
原生javascript實(shí)現(xiàn)的ajax異步封裝功能示例
這篇文章主要介紹了原生javascript實(shí)現(xiàn)的ajax異步封裝功能,結(jié)合完整實(shí)例形式分析了原生javascript實(shí)現(xiàn)的ajax異步交互函數(shù)與相應(yīng)的使用方法,需要的朋友可以參考下2016-11-11
本文詳細(xì)介紹了匿名函數(shù)、閉包、并給出了詳細(xì)的例子以及詳細(xì)的注意事項(xiàng)，是篇非常非常不錯(cuò)的文章，推薦給大家。2014-11-11