前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 计算器

微信小程序 计算器

作者头像
用户5760343
发布2020-01-15 16:11:13
6810
发布2020-01-15 16:11:13
举报
文章被收录于专栏:sktj

文章轉載的 1、calc.wxss /* */

.content{

height:100%;

display: flex;

flex-direction: column;

align-items:center;

box-sizing: border-box;

background:#555;

padding:30rpx 0 20rpx 0;

}

.scr{

background:#fff;

width:700rpx;

height: 175rpx;

line-height: 175rpx;

text-align: right;

margin:0 0 10rpx 0;

padding:0 10rpx 0 0;

font-size:50px;

}

.btnGroup{

display: flex;

flex-direction: row;

}

.item{

width:175rpx;

min-height: 175rpx;

margin: 1rpx;

text-shadow:0 1px 1px rgba(255,255,255,.3);

text-align: center;

line-height: 175rpx;

}

.gray{

background:#eee;

}

.orange{

color:#fff;

background:#f60;

}

2、calc.js Page({

data: {

代码语言:javascript
复制
b01: "back",

b02: "clear",

b03: "negative",

b04: "+",

b05: "9",

b06: "8",

b07: "7",

b08: "-",

b09: "6",

b10: "5",

b11: "4",

b12: "×",

b13: "3",

b14: "2",

b15: "1",

b16: "÷",

b17: "0",

b18: ".",

b19: "sqrt",

b20: "=",

screenData: "0",

lastOperator: false,

arr: [],

logs: []

},

clickBtn: function (event) {

代码语言:javascript
复制
console.log(event.target.id);

var id = event.target.id;

switch (id) {

  case "back":

    //退格

    var data = this.data.screenData;

    if (data == 0) {

      return;

    }

    data = data.substring(0, data.length - 1);

    if (data == "" || data == "-") {

      data = 0;

    }

    this.setData({

      screenData: data

    });

    this.data.arr.pop();

    break;

  case "clear":

    //清屏

    this.setData({

      screenData: "0"

    });

    this.data.arr.length = 0;

    break;

  case "negative":

    //正负号

    var data = this.data.screenData;

    if (data == 0) {

      return;

    }

    var firstword = data.substring(0, 1);

    if (firstword == "-") {

      data = data.substring(1, data.length);

      this.data.arr.shift();

    } else {

      data = "-" + data;

      this.data.arr.unshift("-");

    }

    this.setData({

      screenData: data

    });

    break;

  case "=":

    //等号=

    var data = this.data.screenData;

    if (data == 0) {

      return;

    }

    var lastWord = data.substring(data.length - 1, data.length);

    if (isNaN(lastWord)) {

      return;

    }

    var num = "";

    var lastOperator;

    var arr = this.data.arr;

    var optarr = [];

    for (var i in arr) {

      if (isNaN(arr[i]) == false || arr[i] == this.data.b18 || arr[i] == this.data.b03) {

        num += arr[i];

      } else {

        lastOperator = arr[i];

        optarr.push(num);

        optarr.push(arr[i]);

        num = "";

      }

    }

    optarr.push(Number(num));

    var result = Number(optarr[0]) * 1.0;

    console.log(result);

    for (var i = 1; i < optarr.length; i++) {

      if (isNaN(optarr[i])) {

        if (optarr[1] == this.data.b04) {

          result += Number(optarr[i + 1]);

        } else if (optarr[1] == this.data.b08) {

          result -= Number(optarr[i + 1]);

        } else if (optarr[1] == this.data.b12) {

          result *= Number(optarr[i + 1]);

        } else if (optarr[1] == this.data.b16) {

          result /= Number(optarr[i + 1]);

        }

      }

    }

    //

    this.data.arr.length = 0;

    this.data.arr.push(result);

    this.setData({

      screenData: result + ""

    });

    break;

  default:

    if (id == this.data.b04 || id == this.data.b08 || id == this.data.b12 || id == this.data.b16) {

      if (this.data.lastOperator == true || this.data.screenData == 0) {

        return;

      }

    }

    var num = this.data.screenData;

    var data;

    if (num == 0) {

      data = id;

    } else {

      data = num + id;

    }

    this.setData({

      screenData: data

    });

    this.data.arr.push(id);

    if (id == this.data.b04 || id == this.data.b08 || id == this.data.b12 || id == this.data.b16) {

      this.setData({

        lastOperator: true

      });

    } else {

      this.setData({

        lastOperator: false

      });

    }

    break;

}

},

getSqrt: function () {

代码语言:javascript
复制
//平方根

var data = Math.sqrt(this.data.screenData);

this.setData({

  screenData: data

});

}

})

3、calc.wxml <view class='content'>

<view class='scr'>

{{screenData}}

</view>

<view class='btnGroup'>

<view class='item gray' bindtap='clickBtn' id='{{b01}}'>←</view>

<view class='item gray' bindtap='clickBtn' id='{{b02}}'>C </view>

<view class='item gray' bindtap='clickBtn' id='{{b03}}'> +/- </view>

<view class='item gray' bindtap='clickBtn' id='{{b04}}'>+</view>

</view>

<view class='btnGroup'>

<view class='item gray' bindtap='clickBtn' id='{{b05}}'> 9</view>

<view class='item gray' bindtap='clickBtn' id='{{b06}}'> 8 </view>

<view class='item gray' bindtap='clickBtn' id='{{b07}}'> 7 </view>

<view class='item gray' bindtap='clickBtn' id='{{b08}}'>-</view>

</view>

<view class='btnGroup'>

<view class='item gray' bindtap='clickBtn' id='{{b09}}'> 6</view>

<view class='item gray' bindtap='clickBtn' id='{{b10}}'> 5 </view>

<view class='item gray' bindtap='clickBtn' id='{{b11}}'> 4 </view>

<view class='item gray' bindtap='clickBtn' id='{{b12}}'>×</view>

</view>

<view class='btnGroup'>

<view class='item gray' bindtap='clickBtn' id='{{b13}}'> 3</view>

<view class='item gray' bindtap='clickBtn' id='{{b14}}'> 2 </view>

<view class='item gray' bindtap='clickBtn' id='{{b15}}'> 1</view>

<view class='item gray' bindtap='clickBtn' id='{{b16}}'>÷</view>

</view>

<view class='btnGroup'>

<view class='item gray'bindtap='clickBtn' id='{{b17}}' > 0</view>

<view class='item gray'bindtap='clickBtn' id='{{b18}}'> . </view>

<view class='item gray'bindtap='getSqrt' id='{{b19}}'> √</view>

<view class='item orange'bindtap='clickBtn' id='{{b20}}'>=</view>

</view>

</view>

4、app.json { "pages": [ "pages/calc/calc", "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档