微信小程序实现简单计算器功能

2024-04-02 19:04:59 977人浏览泡泡鱼

摘要

微信小程序：简单计算器，供大家参考，具体内容如下对于才接触小程序不久的人来说，想要直接上手一个实用性强的项目难度很大，想要快速熟悉小程序的使用，我们可以先尝试着做一个简单的计算器。

微信小程序：简单计算器，供大家参考，具体内容如下

对于才接触小程序不久的人来说，想要直接上手一个实用性强的项目难度很大，想要快速熟悉小程序的使用，我们可以先尝试着做一个简单的计算器。

运行截图

计算器对于界面美观的要求并不高，只是一些view以及button控件的组合，所以并不需要在界面上费很多功夫。重要的是逻辑层，之所以选择计算器作为上手的第一个项目，因为计算器的逻辑可简可繁，完全可以适应新手对小程序的掌握程度。

主要代码

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">简单计算器</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:



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

后记

我这里只是对加减程进行了粗略的处理，但是这样的一个计算器也已经具备了初步的功能，随着我们掌握程度的加深，我们还可以添加平方，开方等更复杂的功能，从而熟练掌握小程序的开发。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 微信小程序实现简单计算器功能

本文链接: https://www.lsjlt.com/news/130743.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

微信小程序实现简单计算器功能

微信小程序：简单计算器，供大家参考，具体内容如下对于才接触小程序不久的人来说，想要直接上手一个实用性强的项目难度很大，想要快速熟悉小程序的使用，我们可以先尝试着做一个简单的计算器。...

99+

2024-04-02
微信小程序实现简单的计算器功能

本文实例为大家分享了微信小程序实现计算器功能的具体代码，供大家参考，具体内容如下 wxml <view class='content'> <input va...

99+

2024-04-02
微信小程序如何实现简单的计算器功能

这篇文章主要介绍微信小程序如何实现简单的计算器功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体内容如下wxml<view class='content'> &nb...

99+

2023-06-20
微信小程序实现简易计算器功能

本文实例为大家分享了微信小程序实现简易计算器的具体代码，供大家参考，具体内容如下实现代码：  <view c...

99+

2024-04-02
微信小程序实现简单计算器

微信小程序写的简单计算器，供大家参考，具体内容如下 jisaunqi.js // pages/jisuanqi/jisuanqi.js Page({ data: {...

99+

2024-04-02
微信小程序实现简易的计算器功能

一个初入IC的硅农，硬件编程经验3个月。偶然接触了微信小程序编程，然后自己写了一个计算器，希望得到改进意见。功能： 1、计算 + - * /和%； 2、主要是当得出结果的时候，可以...

99+

2024-04-02
微信小程序实现简单倒计时功能

本文实例为大家分享了微信小程序实现简单倒计时的具体代码，供大家参考，具体内容如下任务描述：计时器任务要求：案例描述：设计一个实现倒计时功能的小程序，小程序运行后，首先显示空白...

99+

2024-04-02
微信小程序实现计算器小功能

微信小程序现在越来越火爆了，我也看到很多在校大学生都在自学了，那些专门从事APP开发，网页开发的工作者更是看到了小程序的前景，在小程序领域也掺上一脚，本人也是自学小程序的，初期跟很多...

99+

2024-04-02
微信小程序实现计算器功能

本文实例为大家分享了微信小程序实现计算器功能的具体代码，供大家参考，具体内容如下一、微信小程序开发工具界面二、目录结构第一次进到页面它的目录结构如下：三、需要注意的问题 ...

99+

2024-04-02
用微信小程序实现计算器功能

本文是用微信小程序写的一个简单的计算器，有兴趣的小伙伴可以了解一下。页面部分 <view class='box'> <view class='txt...

99+

2024-04-02
微信小程序如何实现简单倒计时功能

本篇内容介绍了“微信小程序如何实现简单倒计时功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！任务描述：计时器任务要求：案例描述：设计一个实...

99+

2023-06-30
微信小程序实现简单计算器与秒表

本文实例为大家分享了微信小程序实现简单计算器与秒表的具体代码，供大家参考，具体内容如下实验内容：任务一：实现一个简单的加减乘除运算。首先输入两个运算数，然后选择加、减、乘、除四...

99+

2024-04-02
微信小程序如何实现计算器小功能

这篇文章主要介绍微信小程序如何实现计算器小功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序现在越来越火爆了，我也看到很多在校大学生都在自学了，那些专门从事APP开发，网页开发的工作者更是看到了小程序的前景...

99+

2023-06-20
微信小程序实现简单搜索功能

本文实例为大家分享了微信小程序实现简单搜索功能的具体代码，供大家参考，具体内容如下搜索效果图实现功能如下 (1) 未找到商品时显示提示信息，找到商品时显示商品列表 (2) 清空...

99+

2024-04-02
微信小程序实现简易计算器

微信小程序之简易计算器，供大家参考，具体内容如下一、介绍 1.中缀表达式中缀表达式是一种通用的算术或逻辑公式表示方法，操作符以中缀形式处于操作数的中间。中缀表达式是人们常用的算术...

99+

2024-04-02
微信小程序实现简单购物车小功能

本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！ 1. 应用场景2. 思路分析3....

99+

2024-04-02
微信小程序实现简单的购物车功能

本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下实现一个购物车页面，需要哪些数据。整理下大概如下：一个购物车商品列表(carts)，列表里的单个it...

99+

2024-04-02
微信小程序实现简易加法计算器

本文实例为大家分享了微信小程序实现加法计算器的具体代码，供大家参考，具体内容如下 wxml  <view cla...

99+

2024-04-02
微信小程序————简易计算器

1、计算器小程序点击页面数字按键可以计算简单的加减乘除数据运算。 2、大概结构页面显示大概逻辑是当点第一次击数字键的时候要有个变量来存储这个点击的数，然后再来个记录点击运算符的变量，等要算的数全输入后，最后“...

99+

2023-10-26

微信小程序小程序
iOS实现简单计算器小功能

本文实例为大家分享了iOS实现简单计算器小功能的具体代码，供大家参考，具体内容如下 SimpleCaculatorViewController.h // // SimpleCac...

99+

2024-04-02