微信小程序如何實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器
今天小編給大家分享一下微信小程序如何實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
站在用戶的角度思考問題，與客戶深入溝通，找到額濟(jì)納網(wǎng)站設(shè)計(jì)與額濟(jì)納網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋額濟(jì)納地區(qū)。
運(yùn)行截圖
計(jì)算器對(duì)于界面美觀的要求并不高，只是一些view以及button控件的組合，所以并不需要在界面上費(fèi)很多功夫。重要的是邏輯層，之所以選擇計(jì)算器作為上手的第一個(gè)項(xiàng)目，因?yàn)橛?jì)算器的邏輯可簡(jiǎn)可繁，完全可以適應(yīng)新手對(duì)小程序的掌握程度。
主要代碼
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,
is_time:false
},
clickButton: function (e) {
console.log(e);
var buttonVal = e.target.id;
var res = this.data.result;
if(this.data.is_time==true){
res=0
}
var newbuttonDot=this.data.buttonDot;
var sign;
if (buttonVal >= "num_0" && buttonVal <= "num_9") {
var num=buttonVal.split("_")[1];
if (res == "0" || ((res.length-0) -(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")
{
if(res.length){}
else{
res=JSON.stringify(res)
}
var is_sign=res.substr(res.length-1,res.length)
if(is_sign=="+"||is_sign=="-"||is_sign=="×"||is_sign=="÷"){
res=res.substr(0,res.length-1);
}
switch(buttonVal){
case "div":
sign ="÷";
break;
case "mul":
sign ="×";
break;
case "sub":
sign="-";
break;
case "add":
sign="+";
break;
}
if(!isNaN(res.length))
{
res.length-1;
res=res+sign;
}
}
}
this.setData({
is_time:false,
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-0)- (num-0);
break;
case "+":
res = (res-0) + (num-0);
break;
case "×":
res = (res-0)* (num-0);
break;
case "÷":
if(num!="0")
{
res = (res-0)/ (num-0);
}
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,
is_time:true
});
}})wxml
<!--index.wxml-->
<view class="project_name">簡(jiǎn)單計(jì)算器</view>
<view class="screen_content">
<view class="screen">{{result}}</view>
</view>
<view class="content">
<view class="buttonGroup">
<button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button>
<button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button>
<button id="{{id3}}" bindtap="time" class="buttonitem color" hover-class="shadow">
<icon type="waiting" color="#66CC33"></icon>
</button>
<button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button>
</view>
<view class="buttonGroup">
<button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button>
<button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button>
<button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button>
<button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button>
</view>
<view class="buttonGroup">
<button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button>
<button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button>
<button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button>
<button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button>
</view>
<view class="buttonGroup">
<button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button>
<button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button>
<button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button>
<button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button>
</view>
<view class="buttonGroup">
<button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button>
<button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button>
<button id="{{id9}}" bindtap="equal" class="equal" hover-class="shadow">=</button>
</view>
</view>wxss:
/**index.wxss**/
page{
background: #f5f5f5;
}
.project_name{
position:absolute;
top:25px;
width:100%;
text-align: center;
font-size: 30px;
}
.screen_content{
position: fixed;
color: #1b1717;
background: #fff;
font-size: 40px;
bottom: 390px;
text-align: right;
height:100px;
width: 100%;
word-wrap: break-word;
border-top:1px solid #a8a8a8;
border-bottom:1px solid #a8a8a8;
}
.screen{
position: absolute;
font-size: 40px;
text-align: right;
bottom:0px;
width: 96%;
left:2%;
word-wrap: break-word;
}
.content{
position: fixed;
bottom: 0;
}
.buttonGroup{
display: flex;
flex-direction: row;
}
.buttonitem{
text-align: center;
line-height: 120rpx;
width: 25%;
border-radius: 0;
}
.buttonitem1{
width: 192rpx;
text-align: center;
line-height: 120rpx;
border-radius: 0;
}
icon{
position: absolute;
top: 20%;
left: 67rpx;
}
.color{
background: #fff;
}
.equal{
width: 380rpx;
text-align: center;
line-height: 120rpx;
border-radius: 0;
background: #fff;
}
.shadow{
background: #e9ebe9;
}以上就是“微信小程序如何實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目：微信小程序如何實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器
本文URL：http://jinyejixie.com/article44/psgdee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、搜索引擎優(yōu)化、小程序開發(fā)、手機(jī)網(wǎng)站建設(shè)、、靜態(tài)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 成都小程序開發(fā)需要多少錢 2016-12-16
- 成都家政小程序開發(fā)，優(yōu)勢(shì)和模式是怎樣的？ 2016-12-15
- 開發(fā)小程序所需要的條件準(zhǔn)備 2015-08-26
- 小程序開發(fā)制作后怎么關(guān)聯(lián)微信呢 2021-11-19
- 怎樣解決小程序代理的痛點(diǎn)？ 2016-10-01
- 小程序加入競(jìng)爭(zhēng)后，網(wǎng)站應(yīng)該如何定位 2016-11-08
- 新手運(yùn)營(yíng)微信小程序需要注意什么？ 2014-07-13
- “小程序·云開發(fā)”重磅上線 讓小程序開發(fā)更高效 2021-02-19
- 成都小程序開發(fā)的引流秘訣 2022-07-15
- H5開發(fā)相對(duì)小程序開發(fā)、APP開發(fā)的優(yōu)勢(shì)是什么？ 2016-10-18
- 小程序開發(fā)門檻低，各類生活服務(wù)會(huì)出現(xiàn) 2022-05-10
- 成都網(wǎng)站建設(shè)公司告訴您為什么越來越多的商家偏愛小程序 2016-08-30