想尝试做一个网页版计算器后,参考了很多博客大神的代码,综合归纳、总结修改,整理如下文。

  附:   Demo    源码

一、HTML+CSS

  具体结构样式如下图,基本参照手机计算器界面。按钮功能可以查看demo,都可以实现。

  

  这部分布局不是重点,只附上代码以便理解JS行为。

  HTML/结构:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS实现轻量级计算器</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/script.js" type="text/javascript" rel="stylesheet"></script>
</head>
<body>
<div id="box">
<div id="top">
<p>Lightweight Calculator by PYJ</p>
<input id="screen0" type="text" style="margin-top: 100px;" disabled/>
<input id="screen1" type="text" style="margin-top: 190px;" disabled/>
</div>
<div id="main">
<span class="div1" style="font-size: 26px">(</span>
<span class="div1" style="font-size: 26px">)</span>
<span class="div1" style="font-size: 26px">DEL</span>
<span class="div1">/</span> <span class="div2">7</span>
<span class="div2">8</span>
<span class="div2">9</span>
<span class="div1">*</span> <span class="div2">4</span>
<span class="div2">5</span>
<span class="div2">6</span>
<span class="div1">-</span> <span class="div2">1</span>
<span class="div2">2</span>
<span class="div2">3</span>
<span class="div1">+</span> <span class="div2">0</span>
<span class="div2">.</span>
<span class="div1">C</span>
<span class="div3" style="width: 94px;background: orangered;">=</span>
</div>
</div>
</body>
</html>

   CSS/表现:

*{
margin: 0;
padding: 0;
font-family: "Consolas", "Menlo", "Courier", monospace;
}
span{display: block;}
body{background: #f0f2f1;} #box{
width: 380px;
height: 675px;
margin-top: 8px;
margin-left: auto;
margin-right: auto;
box-shadow:0 0 10px #888;
} #top{
width: inherit;
height: 285px;
background: #333333;
position: relative;
}
#top p{
color: #e7e7e7;
font-size: 16px;
padding-top: 5px;
padding-right: 10px;
text-align: right;
}
#top input{
width: 368px;
height: 70px;
position: absolute;
color: #e8e8e8;
background: none;
border: none;
font-size: 35px;
text-align: right;
line-height: 70px;
cursor: text;
padding-right: 10px;
} #main{
width: inherit;
height: 390px;
background: #f0f2f1;
}
#main span{
width: 94px;
height: 77px;
border-right: 1px solid #dff0d8;
border-top: 1px solid #dff0d8;
float: left;
font-size: 32px;
text-align: center;
line-height: 80px;
cursor: pointer;
}
.div1{color: orangered;}
.div2{color: #000;}
.div3{border-right: none;color: #fff;} #main span:hover{background: #e1e1e1;}
#main span:active{box-shadow: 0 0 5px 5px #fff;}

二、JavaScript/行为

  行为层要解决的问题大致可以总结为:获取被点击的按钮内容,给出相应反应或组成表达式;计算表达式并显示。

1. 初始化(清屏):

 window.onload = function(){
var screen0 = document.getElementById('screen0'), //获取上显示器内容
screen1 = document.getElementById('screen1'); //获取下显示器内容
screen0.value = null;
screen1.value = null;
calculate(screen0, screen1);
};

2. 上面代码最后一行调用了calculate()函数,获取按钮字符:

 function calculate(screen0,screen1){
var box = document.getElementById('main'), //获取按钮盒子
count = 0; //记录显示器字符或数字个数 box.onclick = function(e){
var symbol = e.target.innerText; //获取按钮字符 //内容是否超过允许长度
if((screen1.value + symbol).length > 40){
alert('Content exceeds the maximum length!');
return null;
}
if(symbol == 'C' ){ //清零
count = 0;
screen0.value = null;
screen1.value = null;
}else if(symbol != '='){ //表达式
if(count == -1){ //对上一次计算的清空
screen0.value += "=" + screen1.value;
screen1.value = symbol;
count = 1;
}else if(symbol == 'DEL'){
if(screen1.value == null){
count = 0;
}else{
screen1.value = screen1.value.slice(0,-1);
count--;
}
}else{
screen1.value += symbol;
}
}else if(symbol == '='){ //计算结果
screen0.value = screen1.value;
screen1.value = test(screen1.value );
count = -1;
}
}
}

  分别对清零、回删、“=”和其他字符情况做出判断,给予不同的处理结果。

3. 按了“=”,就表示要对前面的字符串进行计算了:

  但在计算前,需要了解一下JS数字精度丢失的问题。计算机的二进制的实现和位数限制会使部分数无法有限表示,有穷的数在计算机的二进制里却是无穷的,因存储位数的限制而发生的“舍去”,就导致了精度的丢失。具体内容不再展开,可以去查看相关文档。

  为了解决浮点数的精度丢失问题,在这里为Math对象定义了一个方法:

 Math.formatFloat = function (exp, digit){
var m = Math.pow(10, digit);
return parseInt(exp*m, 10)/m;
};
//把小数放到位整数(乘倍数),再缩小回原来倍数(除倍数)

  

  计算器最核心的算法就是表达式的运算。

  本文的思想是,将表达式按符号拆分并运用递归:

 function test(text) {
var index = 0; //记录符号索引 while(text){
//首先计算括号内内容
if(text.lastIndexOf("(") > -1){
index = text.lastIndexOf("(");
var endIndex = text.indexOf(")", index);
if(endIndex > -1) {
var result = Math.formatFloat(test(text.substring(index + 1, endIndex)) ,2);
return Math.formatFloat(test(text.substring(0, index) + result + text.substring(endIndex + 1)) ,2);
} }else if(text.indexOf("+") >-1){
index = text.indexOf("+");
return Math.formatFloat(test(text.substring(0, index)) + test(text.substring(index + 1)) ,2); }else if(text.lastIndexOf("-") > -1){
index = text.lastIndexOf("-");
if(text[index-1] == '*'){
return Math.formatFloat(test(text.substring(0, index-1)) * test(text.substring(index)) ,2);
}else if(text[index-1] == '/'){
return Math.formatFloat(test(text.substring(0, index-1)) / test(text.substring(index)) ,2);
}else{
return Math.formatFloat(test(text.substring(0, index)) - test(text.substring(index + 1)) ,2);
} }else if(text.lastIndexOf("*") > -1){
index = text.lastIndexOf("*");
return Math.formatFloat(test(text.substring(0, index)) * test(text.substring(index + 1)) ,2); }else if(text.lastIndexOf("/") > -1){
index = text.lastIndexOf("/");
return Math.formatFloat(test(text.substring(0, index)) / test(text.substring(index + 1)) ,2); }else{
return Math.formatFloat(text,2);
}
} return null;
}

  需要注意:首先对括号内内容进行运算;“-” 号和除号要从表达式尾部开始提取,否则计算有误;“-” 号有负号和减号之分,解决办法是,在 “-” 号前有乘号和除号时,要按乘号或除号拆分;Math.formatFloat() 方法的运用。


使用效果图如下,存在bug或者文中有错误的话希望指出 [抱拳]

  

JS实现轻量级计算器的更多相关文章

  1. 使用html+css+js实现简易计算器

    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  2. html+css+js实现科学计算器

    代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...

  3. js加减乘除在线计算器代码

    js加减乘除在线计算器代码 在线演示本地下载

  4. 项目:JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  5. js实现简单计算器

    效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵. 代码: <!DOCTYPE html><html><head> < ...

  6. html、css、js实现简易计算器

    学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...

  7. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  8. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

  9. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. DP 动态规划

    p1269 马棚 题目: 每天,小明和他的马外出,然后他们一边跑一边玩耍.当他们结束的时候,必须带所有的马返回马棚,小明有K个马棚.他把他的马排成一排然后跟随它走向马棚,因为他们非常疲劳,小明不想让他 ...

  2. 删除bin后,Eclipse重新编译项目

    今天做"用java.util.Properties类读写配置文件"Demo时,在编译项目时由于配置资源文件一起写入bin了.而Demo修改了配置文件,从新运行时配置文件不再更新,于 ...

  3. CSS3形变——transform与transform-origin画时钟

    css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...

  4. 利用内核cgroup机制轻松实现类似docker的系统资源管控

    近几年,以docker为代表的容器技术异常火热,它的轻量.高效让人欣喜若狂,它被赋予了改变传统IT运维的使命.相信随着时间推移,以容器云为落地形式的产品将真正实现这一使命. 我们都知道docker能够 ...

  5. 算法模板——计算几何2(二维凸包——Andrew算法)

    实现功能:求出二维平面内一对散点的凸包(详见Codevs 1298) 很神奇的算法——先将各个点按坐标排序,然后像我们所知的那样一路左转,求出半边的凸包,然后反过来求另一半的凸包 我以前正是因为总抱着 ...

  6. java解析上传的excel

    file是一个File,是一个excel文件 得到文件流:InputStream in =  file.getInputStream() 需要引入的类 import jxl.Cell;import j ...

  7. IO 模型

    常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking IO):默认创建的socket都是阻塞的,非阻塞IO要求soc ...

  8. HTML5初步了解

        一.使用HTML5的十大原因 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是w ...

  9. python 中如何导入一个自己创建的模块

    导入模块的语句的三种方法: 1.import module 2.from module import name1,[name2,name3....] 3.from module import * 先看 ...

  10. rip路由协议 细节分析及实例配置【完整版】

    rip路由协议 细节分析及实例配置[完整版] RIP呢,这是一个比较重要的知识点,所以它的知识覆盖面很广泛:但是呢,我将会对碰到的问题进行一些分析解刨(主要是为了帮助自己理清思维):也希望能够从中发现 ...