javascript实现计算器功能详解流程
作者:凉沫love 发布时间:2024-04-23 09:27:00
标签:javascript,计算器
1、计算器功能介绍
可以实现数据的加(+),减(-),乘(*),除(/),取余运算(%),以及实现数据的删除(Del)和清空功能(C)。
2、计算器页面设计
1、导航栏部分
{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "计算器"
}
2、数据部分
data:{
// data中只放置初始数据
num:"1",
op:" "//记录运算符号
}
3、index.wxml布局页面
<view class="result">
<view class="result-num">{{num}}</view>
<view class="result-op">{{op}}</view>
</view>
<view class="btns">
<view>
<view hover-class="bg" bindtap="reSetBtn">C</view>
<view hover-class="bg" bindtap="delBtn">Del</view>
<view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
<view hover-class="bg" bindtap="opBtn" data-val="/">/</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
<view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
<view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
<view hover-class="bg" bindtap="opBtn" data-val="*">*</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
<view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
<view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
<view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
<view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
<view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
<view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
</view>
<view>
<view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
<view hover-class="bg" bindtap="doBtn" data-val=".">.</view>
<view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
</view>
</view>
4、index.css样式页面
page{
display: flex;
flex-direction: column;/*项目主轴的排列方向 */
height: 100%;
}
.result{
flex: 1;/*均匀分配元素*/
background: #f3f6fe;
position: relative;
}
.result-num{
position: absolute;/*父相子绝*/
font-size: 20pt;
bottom: 5vh;
right: 3vw;
}
.result-op{
position: absolute;
font-size: 15pt;
bottom: 1vh;
right: 3vw;
}
.btns{
flex: 1;
display: flex;
flex-direction: column;/*里面的大view排列为垂直*/
font-size: 17pt;
border-top: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
}
.btns>view{
flex: 1;
display: flex;
}
.btns>view>view{
flex-basis: 25%;/*宽度占比*/
border-bottom: 1rpx solid #ccc;
border-right: 1rpx solid #ccc;
box-sizing: border-box;/*加上边框的占比*/
display:flex;
align-items: center;
justify-content: center;/*两句加在一起是让文字居中*/
}
.btns>view:last-child>view:first-child{
flex-basis: 50%;
}
.btns>view:first-child>view:first-child{
color:#f00;
}
.btns>view>view:last-child{
color: #fcBe00;
}
.bg{
background: #eee;
}
5、运行结果
3、功能实现部分
1、删除功能
其中substr()函数中两个参数,第一个表示截取开始的位置,第二个表示截取的长度
delBtn:function(e){
var num=this.data.num.substr(0,this.data.num.length-1);
this.setData({num:num===""? "0":num})
}
2、清空功能
reSetBtn:function(e){
//全部变成初始状态
this.result=null;
this.isClear=false;
this.setData({num:"0",op:""})
}
3、其他功能实现
data:{
// data中只放置初始数据
num:"1",
op:" "//记录运算符号
},
result:null,
isClear:false,//用来记录状态
numBtn:function(e){
var num =e.target.dataset.val//获取data-val中的值
//如果多次按0或者isClear为true,则将原来的数据清除,显示按的数字
if(this.data.num==='0'||this.isClear){
this.setData({num:num})//将获取的值给result
this.isClear=false
}else{
this.setData({num:this.data.num+num})
}
},
opBtn:function(e){
var op=this.data.op;//先记录当前的op
var num=Number(this.data.num);//获取当前的num数据
this.setData({op:e.target.dataset.val});//把按下的按钮给变量op
if(this.isClear){//因为上面操作中有如果按了运算符,则isclear为true,在这里为了避免多次按加都会起作用,再return
return
}
this.isClear=true;//当用户按了运算按钮,再按数字,则把原来的数字清空
if(this.result===null){
this.result=num;
return
}
if(op==="+"){
this.result=this.result+num
this.setData({num:this.result})//把加出来的结果为num
}else if(op==="-"){
this.result=this.result-num
}else if(op==="*"){
this.result=this.result*num
}else if(op==="/"){
this.result=this.result/num
}else if(op==="%"){
this.result=this.result%num
}
this.setData({num:this.result+""})//转为字符串类型
},
doBtn:function(e){
if(this.isClear){//表示上一个运算结束了,一开始就按.的话
this.setData({num:"0."});
this.isClear=false;
return
}
//如果多按了.
if(this.data.num.indexOf(".")>=0){
return
}
//正常数字后面按点
this.setData({num:this.data.num+"."})
},
来源:https://blog.csdn.net/qq_50582468/article/details/121064756
0
投稿
猜你喜欢
- 二进制日志二进制日志记录了所有对数据库执行更改的操作,二进制主要有以下两种作用:1、恢复(recovery)2、复制(replication
- 0. 学习目标在顺序存储方式中,根据数据元素的序号就可随机存取表中任何一个元素,但同时在插入和删除运算需要移动大量的元素,造成算法效率较低。
- 一次性读取csv文件内所有行的数据<?php $file = fopen('windows_2011_s.csv',&
- 通过清晰的示例和解释,本文展示了 ChatGPT 如何简化和简化创建复杂 MySQL 查询的过程,使用户更容易与数据库交互并检索他们需要的数
- sql语句有一个非常长的sql,用编辑器打开编写的时候太长了导致编写非常吃力,而且容易错乱,我想做的是把A,B,C三个变量赋值到sql中的字
- 内容摘要:浏览器不兼容这个难题,一直是网页设计师们头痛的事情。ie7.0的面世,尚且不论他是否较之ie6.0进步, ie7和ie6
- 哈喽,今天给大家分享一篇Django+Celery实现动态配置定时任务,因为最近也是无意间看到一位大佬关于这块的文章,然后自己觉得不错,也想
- 前言小白白跑去鹅厂面试,面试官提出了一个很实际的问题: mysql增加索引,那些情况会失效呢?谈一下实际工作中遇到的情况。我们的
- 本文主要分享的是一则python+opencv实现任意角度的透视变换的实例,具体如下:# -*- coding:utf-8 -*-impor
- 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程。那么本教程将花费十分钟的时间带你走入Python的大门。本文的内容
- Python 提供了多个图形开发界面的库。Tkinter就是其中之一。 Tkinter 模块(Tk 接口)是 Python 的标准 Tk G
- python正则模块re中findall和finditer两者相似,但却有很大区别。 两者都可以获取所有的匹配结果,这和searc
- 打开VB6,新建ActiveX DLL 2、在工程引用中加入Microsoft Active Server Pages Object Lib
- 本文实例总结了Python常见的pandas用法。分享给大家供大家参考,具体如下:import numpy as npimport pand
- 将 HTML 网页转换为 PDF 是很多人常见的一个需求,在浏览器上,我们可以通过浏览器的“打印”功能直接将网页打印输出为 PDF。但是如果
- 下面就是解决方案: 1- From the command prompt, stop isqlplus: c:\>isqlplusct
- fit_generator 是 keras 提供的用来进行批次训练的函数,使用方法如下:model.fit_generator(genera
- 首先要了解为什么用连接池,连接池能为你解决什么问题连接池主要的作用:1、减少与数据服务器建立TCP连接三次握手及连接关闭四次挥手的开销,从而
- Git 代码管理工具,类似 SVN 客户端。安装步骤:1、官网下载Git:https://gitforwindows.org/2、双击运行,
- 前言大家好,我叫善念。我发现我的粉丝量涨的很慢,这次厚脸皮要波关注。这次做的是一个小巧的游戏脚本,本质上它可以用于任意的电脑与手机游戏。分析