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


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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
prototype 学习笔记整理
Jul 17 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
JS Canvas接口和动画效果大全
Apr 29 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
JS 建立对象的方法
2007/04/21 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python学习笔记之解析json的方法分析
2017/04/21 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python对XML文件的操作实现代码
2020/03/27 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
综合办公室主任职责
2013/12/16 职场文书
个人自荐书
2013/12/20 职场文书
装修五一活动策划案
2014/01/23 职场文书
优秀经理事迹材料
2014/02/01 职场文书
机关办公室岗位职责
2014/04/16 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
会计做账心得体会
2016/01/22 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL