javascript实现计算器功能详解流程

目录

• 1、计算器功能介绍
• 2、计算器页面设计
• 1、导航栏部分
• 2、数据部分
• 3、index.wxml布局页面
• 4、index.css样式页面
• 5、运行结果

• 1、删除功能
• 2、清空功能
• 3、其他功能实现

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})//将获取的值给resultthis.isClear=false}else{this.setData({num:this.data.num+num})}},opBtn:function(e){var op=this.data.op;//先记录当前的opvar num=Number(this.data.num);//获取当前的num数据this.setData({op:e.target.dataset.val});//把按下的按钮给变量opif(this.isClear){//因为上面操作中有如果按了运算符，则isclear为true，在这里为了避免多次按加都会起作用，再returnreturn}this.isClear=true;//当用户按了运算按钮，再按数字，则把原来的数字清空if(this.result===null){this.result=num;return}if(op===\"+\"){this.result=this.result+numthis.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+\".\"})},

到此这篇关于javascript实现计算器功能详解流程的文章就介绍到这了,更多相关javascript 计算器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• js版实现计算器功能
• 原生js实现简易计算器
• 用javascript实现简单计算器
• js制作简易计算器
• javascript实现编写网页版计算器
• JavaScript实现简单网页版计算器
• javascript写的简单的计算器，内容很多，方法实用，推荐
• js实现简单计算器
• 简易js代码实现计算器操作
• html+js实现简单的计算器代码(加减乘除)