专栏首页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: {

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) {

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 () {

//平方根

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" }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue data

    var data = { a: 1 } var vm = new Vue({   data: data }) vm.$data === data // ...

    用户5760343
  • jquery ajax回调

    .ajax({ url: "test.html", success: function(data){ $("#myDiv").html(data); }})...

    用户5760343
  • flask 鼠标进入时显示弹窗(flask 99)

    $(function () { var default_error_message = 'Server error, please try again lat...

    用户5760343
  • 前端-微信小程序开发(6):一个业务页面的完成

    github地址:https://github.com/yexiaochai/wxdemo

    grain先森
  • 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    达达前端
  • 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:     官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/         开始使用:h...

    别先生
  • R语言构建层次分析模型不看一下吗~

    AHP (Analytic Hierarchy Process)层次分析法是美国运筹学家Saaty教授于二十世纪80年代提出的一种实用的多方案或多目标的决策方法...

    数据小磨坊
  • Geotools读取shp文件并在Ol2中展示

    在前面有一篇文章中讲到了GDAL将shp转换为GeoJson的实现,以及ol2、3以及Arcgis for js中GeoJson的加载,今天呢,书接上文,介绍G...

    lzugis
  • 关于cuda拷贝的速度测试

    由于没有使用profiler,仅仅通过简单的传输函数测试,如下测试了10000个点,1000000个点,100000000个点的速度: 均按时钟周期来计时,通过...

    用户1154259
  • 学习小组Day5笔记--liull

    今天就把花花的教程看完了,ggplot2还在学习中,先占个坑先,上今天的思维导图哟

    liu_ll

扫码关注云+社区

领取腾讯云代金券