【实践】js实现简易的四则运算计算器
最近看了一个大神推荐的某公司面试程序员的js 面试题，题目是用js 做一个计算器于是跟着大神的思想自己做了一下
ps：功能还没有完善好毕竟自己还是一只菜鸟还在不断学习中。
闲话不多说先上css代码
<style type="text/css">
*{
padding: 0px;
margin: 0px;
border: 0px;
}
.wrapper{
border: 5px solid #000;
width: 300px;
height: 400px;
margin: 0 auto;
}
#screen,#result{
width: 100%;
height: 80px;
border:1px solid red;
}
.allbtn input{
display: inline-block;
float: left;
width: 75px;
height: 47px;
border: 1px solid #ccc;
}
#zeroWidth{
width: 150px;
}
</style>
html代码：
这里我用了input标签把每一个计算器按键都做成了按钮，当按下按钮的时候获取按钮的value值从而运行计算
id为 screen的div 是显示整个表达式的容器
id 为result 的div 是显示最后结果的容器
id为 allbtn的div 下面包裹着所有的运算符以及数字按钮
<body>
<div class="wrapper">
<div id="screen"></div>
<div id="result"></div>
<div id="allbtn" class="allbtn">
<input type="button" name="AC" id="clearall" value="AC">
<input type="button" id="clear" name="clear" value="C">
<input type="button" name="yushu" value="%">
<input type="button" class ="calc" name="chu" value="/">
<input type="button" class="num" name="seven" value="7">
<input type="button" class="num" name="eight" value="8">
<input type="button" class="num" name="nine" value="9">
<input type="button" class="calc" name="chu" name="cheng" value="*">
<input type="button" class="num" name="four" value="4">
<input type="button" class="num" name="five" value="5">
<input type="button" class="num" name="six" value="6">
<input type="button" class="calc" name="chu" name="reduce" value="-">
<input type="button" class="num" name="one" value="1">
<input type="button" class="num" name="two" value="2">
<input type="button" class="num" name="three" value="3">
<input type="button" class="calc" name="chu" name="sum" value="+">
<input class="num" id="zeroWidth" type="button" name="zero" value="0">
<input type="button" class="num" name="point" value=".">
<input type="button" id="finish" name="equal" value="=">
</div>
</div>
下面是js 代码
js 代码最核心的部分就是四则运算了
<script type="text/javascript">
window.onload = function(){
var saveResult = new Array();//建立运算结果的数组
var show = "";//显示屏显示的表达式
var number = "";//定义一个临时变量 用来储存每一个整数
var screen = document.getElementById('screen');//获取负责显示表达式的div
var resultScreen = document.getElementById('result');//获取负责显示结果的div
var allbtn = document.getElementById('allbtn');//获取按钮的外包裹层
var input = allbtn.getElementsByTagName('input');//获取所有按钮
var finish = document.getElementById('finish');//获取 "=" 按钮
var clear = document.getElementById('clear');//获取清除按钮
var clearall = document.getElementById('clearall');//获取 "AC" 按钮
var numArray = new Array();//储存数字数组
var calcArray = new Array();//储存运算符数组
var a = 0;//循环初始化变量
var b = 0;//循环初始化变量
var flag = false;//判断是否按过等于符号 //获取所有数字按钮
for (var i = 0; i < input.length; i++) {
if(input[i].className == "num"){
numArray.push(input[i]);
}
}
console.log(numArray); //获取所有操作符按钮
for (var j = 0; j < input.length; j++) {
if(input[j].className == "calc"){
calcArray.push(input[j]);
}
}
console.log(calcArray);
//--------------------------------------准备工作完成--------------------------------------
//
//
//
//
//--------------------------------------以下是操作部分------------------------------------------ //数字键点击事件
for (var x = 0; x < numArray.length; x++) {
numArray[x].onclick = function(){
if (flag == true) {
saveResult.splice(0,saveResult.length);
number = "";
show = "";
flag = false;
}
var value = this.getAttribute("value");
show += value;
screen.innerHTML = show;
number += value;
console.log("点击数字的时候x的值为：" + number); } } //运算符点击事件
for (var y = 0; y < calcArray.length; y++) {
calcArray[y].onclick = function(){
var value = this.getAttribute("value");
show += value;
screen.innerHTML = show;
saveResult.push(number);
//运算符一点击x变量里面的值就会存进去数组里面
//这样确保数字能够保持完整性
saveResult.push(value);
number = "";//然后清空变量number 下次再次存入数字
console.log(saveResult);
}
} //等于符号点击事件
finish.onclick = function(){
saveResult.push(number);
number = "";
while(a < saveResult.length){ if(saveResult[a] == "*"){
var result = parseFloat(saveResult[a - 1]) * parseFloat(saveResult[a + 1]);
saveResult.splice(a-1,3,result);
a = 0;
}else if(saveResult[a] == "/"){
var result = parseFloat(saveResult[a - 1]) / parseFloat(saveResult[a + 1]);
saveResult.splice(a-1,3,result);
a = 0;
}
a++; } while(b < saveResult.length){ if(saveResult[b] == "+"){
var result = parseFloat(saveResult[b - 1]) + parseFloat(saveResult[b + 1]);
saveResult.splice(b-1,3,result);
b = 0;
}else if(saveResult[b] == "-"){
var result = parseFloat(saveResult[b - 1]) - parseFloat(saveResult[b + 1]);
saveResult.splice(b-1,3,result);
b = 0;
}
b++; }
resultScreen.innerHTML = saveResult;
flag = true;
console.log("最终数组输出" + saveResult); } //AC 按钮点击事件
clearall.onclick = function(){
saveResult.splice(0,saveResult.length);
number = "";
show = "";
screen.innerHTML = "";
}
} </script>
这里说说四则元算：
本次实现四则元素的核心是使用数组，那怎么实现呢？遍历
我这里用了while 循环当然用for 也是可以的 核心的思想是 我先遍历一次数组 如果遍历到有元素是 * 或者 / 那么我就把它所在位置的前一个元素和后一个元素执行乘或除运算（前一个元素和后一个元素要用parseFloat转型方便日后有小数点运算）然后再用splice方法，把这三个元素替换成运算后的结果，然后自增变量 a重新赋值为0，再重新执行一次遍历如此类推直到没有了 * 或 / 号
之后再执行第二次遍历，方法也是如此最后把数组saveResult输出到 结果div 中
【实践】js实现简易的四则运算计算器的更多相关文章
- java 24 - 8 GUI之创建四则运算计算器（未校验版）
这个是用NetBeans软件制作的,因为这个软件制作GUI任务比较方便 通过拖拽控件生成的窗体:(红色的名称是更改后的控件名称) 拉拽好布局后,要进行的步骤: A:更改想要进行操作的控件的名称(右键控 ...
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
- 深入浅出数据结构C语言版（8）——后缀表达式、栈与四则运算计算器
在深入浅出数据结构(7)的末尾,我们提到了栈可以用于实现计算器,并且我们给出了存储表达式的数据结构(结构体及该结构体组成的数组),如下: //SIZE用于多个场合,如栈的大小.表达式数组的大小 #de ...
- JS——制作简单的网页计算器
用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 利用ANTLR4实现一个简单的四则运算计算器
利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- 使用Node.js实现简易MVC框架
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...
- [转] 使用Node.js实现简易MVC框架
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...
随机推荐
- Python实战：下载鬼灵报告有声小说
在家无聊,想看看小说,不过看的眼睛痛,就想着下个有声小说来听听.但风上找到的都是要一集一集下,还得重命名,122集啊,点到什么时候. 写个批处理下载的脚本.记录下过程. 一.老套路了,找到下载URL. ...
- 文本编辑器VIM/VI
vim/vi 功能强大全屏文本编辑器.主要是建立,编辑,显示文本. www.vim.org 构建shell脚本 :set number 使文件出现行号 a 光标后附件文件 i在光标前插入文 ...
- AD Local Domain groups, Global groups and Universal groups
http://ss64.com/nt/syntax-groups.html Rules that govern when a group can be added to another group ( ...
- wordpress 分类相关
分类类型,层级 wp中的分类.文章类型(post,page,video,image).标签.自定义分类.自定义标签都是分类形式.有些分类是有层级关系,有些没有.如图: taxonomy分类(categ ...
- 谈一谈php://filter的妙用
php://filter是PHP中独有的协议,利用这个协议可以创造很多"妙用",本文说几个有意思的点,剩下的大家自己下去体会.本来本文的思路我上半年就准备拿来做XDCTF2016的 ...
- LL(1)文法
<源程序>→<外部声明>|<外部声明><函数体> <外部申明>→<头文件><函数声明>|其他声明 <函数体&g ...
- 怎么搭建DC+SCCM 域环境（一）
需要的软件: 1. SCCM 2012 SP1 2. SQL Server 2012 3. System ISO 4. ADK 环境搭建顺序: 1. 安装DC和SCCM 机器,并配置需要的IP.DNS ...
- JMeter学习-025-JMeter 命令行（非GUI）模式详解（三）-测试图形化 HTML 报表（dashboard）生成
闲话少述,接 上文 继续... 6.生成测试报表 生成测试报表前,需要先生成性能测试结果 jtl 或 csv 文件,用于测试结果的生成. jmeter -n -t JMeter分布式测试示例.jmx ...
- mysql和CSV
1.mysql导入和导出数据可以通过mysql命令或者mysqldump来完成.mysqldump可以导入和导出完整的表结构和数据.mysql命令可以导入和导出csv文件. 1.mysql支持导入和导 ...
- ASP.NET MVC 4 视图页去哪里儿
这里特别感谢 swagon 提到了Displaymodeprovider,所以才有了本篇博客,也使我对[View的呈现]中寻找视图页的过程有了清晰的认识! 前戏 在MVC中,执行完Action之后,会 ...