微信小程序 简易计算器实现代码实例


Posted in Javascript onSeptember 02, 2019

这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

只能进行简单的运算

效果图如下:

微信小程序 简易计算器实现代码实例

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计算器",
 "usingComponents": {}
}

其中有一些小错误,望大神指正!!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
javascript无刷新评论实现方法
May 13 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 #Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 #Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 #Javascript
layui数据表格跨行自动合并的例子
Sep 02 #Javascript
Vue form表单动态添加组件实战案例
Sep 02 #Javascript
小程序和web画三角形实现解析
Sep 02 #Javascript
vue-cli随机生成port源码的方法
Sep 02 #Javascript
You might like
php实用代码片段整理
2016/11/12 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
python中reload重载实例用法
2020/12/15 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
2014的自我评价
2014/01/13 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
行政处罚告知书
2015/07/01 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
社区结对共建协议书
2016/03/23 职场文书