原生JS怎么实现简单计算器功能
原生JS怎么实现简单计算器功能
本篇内容主要讲解“原生JS怎么实现简单计算器功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“原生JS怎么实现简单计算器功能”吧!
使用html和css写出计算器的基本结构和样式,用原生JS实现计算器的加减乘除运算功能,只能计算简单的两位数的运算,不支持三个数连加或者连乘等等。一次计算完成之后再进行下一次运算不需要clear,可以直接进行下次运算。具体实现如下:
html结构:
<divid="box"><!--文本框要禁止用户输入,只能通过代码中的input.value来修改--><inputid="display"type="text"value="0"disabled><divclass="btn">1</div><divclass="btn">2</div><divclass="btn">3</div><divclass="btn">+</div><divclass="btn">4</div><divclass="btn">5</div><divclass="btn">6</div><divclass="btn">-</div><divclass="btn">7</div><divclass="btn">8</div><divclass="btn">9</div><divclass="btn">*</div><divclass="btn">C</div><divclass="btn">0</div><divclass="btn">=</div><divclass="btn">/</div></div>
css样式:
#box{width:500px;height:600px;border:1pxsolid#000000;}#display{width:460px;height:60px;margin:15px;text-align:right;font-size:60px;line-height:60px;overflow:hidden;/*overflow:hidden;溢出隐藏*//*text-overflow:ellipsis;文本溢出时显示省略号*//*word-wrap:none;强制不换行*/background:#ffffff;}.btn{width:100px;height:100px;border:1pxsolid#000000;float:left;margin:10px11px;font-size:40px;line-height:100px;text-align:center;user-select:none;}
JS代码:
firstValue这个全局变量存储第一次输入的数,input的input.value属性也是一个变量,这个值既作为页面上显示的内容,也是输入的数值。让这两个值进行运算,结果再显示到输入框中即可。bool变量作用:当一次运算完成之后所有数值清零。
如果要实现用上一次的结果继续参与运算这个功能,可以再设置一个全局变量result来存储每次运算后的结果,当下次输入运算符号时,判断firstValue和result,再决定用哪个值计算。当点击C按钮时,所有值清空,返回初始状态。
varinput=document.getElementById("display");varbtnCollection=document.getElementsByClassName("btn");vartype;varfirstValue=0;varbool=false;for(vari=0;i<btnCollection.length;i++){//获取到每个按键并添加点击事件。点击后会触发function中代码执行。btnCollection[i].onclick=function(){if(bool){input.value="0";firstValue=0;type=undefined;bool=false;}//input.value=this.innerHTML;//显示点击的数字在文本框内if(!isNaN(Number(this.innerHTML))){input.value=Number(input.value+this.innerHTML).toString();}elseif(this.innerHTML!=="C"&&this.innerHTML!=="="){firstValue=Number(input.value);type=this.innerHTML;input.value=0;}elseif(this.innerHTML==="C"){firstValue=0;type=undefined;input.value="0";}else{switch(type){case"+":input.value=(Number(input.value)+firstValue).toString();break;case"-":input.value=(firstValue-Number(input.value)).toString();break;case"*":input.value=(Number(input.value)*firstValue).toString();break;case"/":input.value=(firstValue/Number(input.value)).toString();break;}bool=true;}}}
到此,相信大家对“原生JS怎么实现简单计算器功能”有了更深的了解,不妨来实际操作一番吧!这里是恰卡编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
推荐阅读
-
node如何链接多个JS模块
-
前后端全部用 JS 开发是什么体验(Hybrid + Egg.js经验分享)上
-
换一种思维看待PHP VS Node.js
-
JS遍历数组的三种方法map、forEach与filter实例详解
-
物联网宠儿mqtt.js那些事儿
-
js不跳转传值php
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
为什么选择 Node.js 作为 Web 应用程序?
-
node.js后台快速搭建在阿里云(一)(express篇)
-
基于WebRTC 如何借助Laravel 7和Vue.js创建视频聊天应用
本文介绍了如何借助Vue.js和laravel7创建一个简单的视频聊天应用。如何实现视频聊天我们会用到一个免...