本文使用js实现了一个简单的加、减、乘、除计算器。

以下是css部分代码：

*{

    padding:0;

    margin:0;

    color: #424242;

}

.outer{

    width:300px;

    height:auto;

    outline:1px solid #b9b9b9;

    margin:50px auto;

    background: pink;

}

.title{

    height:40px;

    width:100%;

    border-bottom:1px solid #b9b9b9;

    text-align: left;

    text-indent:10px;

    line-height: 40px;

    cursor: pointer;

}

.bodyBox{

    width:90%;

    height:auto;

    padding:5%;

}

.calView{

    width:100%;

    height:75px;

    outline:1px solid #b9b9b9;

    background: rgba(255,255,255,.8);

    overflow: scroll;

    text-indent: 5px;

    padding-top:5px;

}

.content,

.contentBtn{

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

}
.btn,
.back,
.reset{
    display: inline;
    width:22%;
    height:30px;
    margin-top:15px;
    text-align: center;
    line-height:30px;
    cursor: pointer;
    background: #ffe4e8;
    outline:none;
    border:3px solid #ffa2a5;
    border-left:none;
    border-top:none;
}

.back,
.reset{
    width:47%;
}
 

以下是html部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="calculator.css">
</head>
<body>

    <div class="outer">
        <div class="title">
            <span>计算器</span>
        </div>
        <div class="bodyBox">
            <div class="calView"></div>
            <div class="content">
                <button class="btn">7</button>
                <button class="btn">8</button>
                <button class="btn">9</button>
                <button class="btn">+</button>
                <button class="btn">4</button>
                <button class="btn">5</button>
                <button class="btn">6</button>
                <button class="btn">-</button>
                <button class="btn">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
                <button class="btn">*</button>
                <button class="btn">0</button>
                <button class="btn">.</button>
                <button class="btn">=</button>
                <button class="btn">/</button>
            </div>
            <div class="contentBtn">
                <button class="back">回退</button>
                <button class="reset">清空</button>
            </div>
        </div>
    </div>

<script src="calculator.js"></script>
</body>
</html>

以下是js部分代码（使用了es6的语法，使用之前请将编辑器设置为支持es6语法）：



/**
 * Created by Administrator on 2018/10/1.
 */
(function(){
    let content=document.getElementsByClassName("content")[0];
    let calView=document.getElementsByClassName("calView")[0];
    let reset=document.getElementsByClassName("reset")[0];//清空按钮
    let back=document.getElementsByClassName("back")[0];//回退按钮
    let arr=[];//存放输入的内容
    content.onmousedown=function(event){
        e=window.event||arguments[0];
        let tar=e.target||e.srcElement;
        tar.style.boxShadow="-1px -1px 3px #ffa2a5 inset";//设置按钮点击内阴影样式
        content.onmouseup=function(event){
            tar.style.boxShadow="none";
        };
        let val=tar.innerText;
        if(calView.innerHTML.indexOf("=")!==-1){//如果已经计算出结果，则开始下一次计算，清空数组
            calView.innerHTML="";
            arr=[];
        }
        calView.innerHTML="";
        arr.push(val);//将输入内容放入数组
        if(!isNaN(parseFloat(val))){//如果输入数字，则进行拼接
            joinNum(val);
        }
        if(isNaN(parseFloat(arr[arr.length-2])) && isNaN(parseFloat(arr[arr.length-1]))){//如果上一位和这一位为符号，则删除这一位
            arr.pop();
        }
        show();//更新窗口内容
        if(val==="=" && arr.length>1){//如果输入等号，则计算出结果
            compute(arr);
        }
    };
    reset.onclick=()=>{//清空输入的内容
        calView.innerHTML="";
        arr=[];//清空数组
    };
    back.onclick=()=>{//清空输入的内容
        arr.pop();
        show();
    };

    /**
     * 拼接输入的内容
     * @param val ：用户输入的内容
     */
    function joinNum(val){
        if(!isNaN(parseFloat(arr[arr.length-2]))){//检测上一个是否为数字
            arr[arr.length-2]=String(parseFloat(arr[arr.length-2])*10+parseFloat(val));
            arr.pop();
        }
        if(arr[arr.length-2] === "/" && arr[arr.length-1] ==="0"){//如果分母为0，则删除0
            arr.pop();
        }
    }

    /**
     * 更新显示窗口内容
     */
    function show(){
        let arrLen=arr.length;
        let str="";
        for(let i=0;i<arrLen;i++){
            str+=arr[i];
        }
        calView.innerHTML=str;//将拼接好的字符串显示在结果窗口中
        return str;
    }

    /**
     * 计算出最终结果
     */
    function compute(arr){
        let showStr=show();
        calView.innerHTML=showStr + eval(showStr.split("=")[0]).toFixed(6);//由于会出现精度丢失问题，因此这里用toFixed()处理一下
    }

})();




最终效果如下图所示，样式我写得比较随意，将就看吧！


（本文为原创，转载请注明，谢谢！如果发现bug，请大家提出来！）
												


											
用JavaScript写一个简单的计算器的更多相关文章
	

    
								
  1. 用c++写一个简单的计算器程序
		
    // 050305.cpp : 定义控制台应用程序的入口点.// // 050304.cpp : 定义控制台应用程序的入口点.////四则运算#include "stdafx.h" ...
    
		
    2. 
						
  2. 用python语言写一个简单的计算器
		
    假如我们有这样一个式子: 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - (-4*3)/ (16-3*2 ...
    
		
    3. 
						
  3. 用JavaScript写一个简单的倒计时，可以应用在发送短信验证码的“59秒后重新发送验证短信”
		
    倒计时——从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text& ...
    
		
    4. 
						
  4. js eval函数写一个简单的计算器
		
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    5. 
						
  5. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
		
    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
    
		
    6. 
						
  6. JS实现一个简单的计算器
		
    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
    
		
    7. 
						
  7. 怎么用JavaScript写一个区块链？
		
    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...
    
		
    8. 
						
  8. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
		
    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
    
		
    9. 
						
  9. 使用JavaScript实现一个简单的编译器
		
    在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C++中继承与抽象类
			
    继承语法格式如下: class 子类名称 : 继承方式(public private protected 三种) 父类名称 纯虚函数格式: virtual 返回值类型 函数名(参数列表)= 0:含有纯 ...
    
			
    2. 
						
  2. sublime 将tab替换为4个空格 & 显示空格
			
    preferences -> settings -> 在右侧的json中加入(左侧的默认配置是无法修改的,可以在默认配置中搜到这几个配置) // The number of spaces  ...
    
			
    3. 
						
  3. 字符串转xml，特殊字符的问题
			
    字符串转xml,如果字符串包含&,< 等特殊符号,转成xml 需要特殊处理,否则XML解析会出错. String uuid = UUID.randomUUID().toString(). ...
    
			
    4. 
						
  4. SecureCRT连接linux步骤
			
    SecureCRT连接linux步骤  做个笔记,以免隔段时间后忘了 LINUX系统一般都是用来作服务器使用,而且都是通过命令行来操作,为了操作方便我们都会使用第三方软件来远程操作.CRT就是比较常用 ...
    
			
    5. 
						
  5. pandas（一）
			
    import numpy as py import pandas as pd Series对象 data= pd.Series([0.25,0.5,0.75,1.0])   默认索引是数字 data= ...
    
			
    6. 
						
  6. C++ opencv调用resize修改插值方式遇到的坑
			
    opencv提供的热死则函数原型如下:void resize(InputArray src, OutputArray dst, Size dsize, double fx=0, double fy=0 ...
    
			
    7. 
						
  7. sudoers权限管理
			
    该/etc/sudoers文件的权限管理很完善,覆盖了linux中的各种命令,各种shell.编辑器等等,在此留作以后作为参考. # This file MUST be edited with the ...
    
			
    8. 
						
  8. tarjan算法（强连通分量 + 强连通分量缩点 + 桥(割边) + 割点 + LCA）
			
    这篇文章是从网络上总结各方经验 以及 自己找的一些例题的算法模板,主要是用于自己的日后的模板总结以后防失忆常看看的, 写的也是自己能看懂即可. tarjan算法的功能很强大, 可以用来求解强连通分量, ...
    
			
    9. 
						
  9. opencart3产品页调用upc/数量等信息
			
    opencart3产品页默认只调用标题.价格.型号等几个数据,如果想要调用更多的参数要如何操作呢?跟着ytkah一起来看看吧.首先打开/catalog/model/catalog/product.ph ...
    
			
    10. 
						
  10. Python模块安装与读取Excel
			
    今天.想用Python读取一下Excel中的数据,从网上查找了一个样例,是要安装相关的模块:        1:到python官网下载http://pypi.python.org/pypi/xlrd模 ...
    
			
    11.