本文使用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. DataTable数据存储问题
			
    需求: 我想要实现这样一个效果:用户可以在表中通过右键新建行.删除行(这两个后面再写),编辑数据后进行保存.这里保存需要做一个区分,就是新增的和修改的.他们的区别就是新增的主键为空,而修改的因为原本就 ...
    
			
    2. 
						
  2. laravel整合workerman做消息推送系统
			
    官方建议分离 workerman和mvc框架的结合,我去,这不是有点脑缺氧吗? 大量的业务逻辑,去独立增加方法和类库在写一次,实际业务中是不现实和不实际的 gateway增加一些这方面的工作,但是我看 ...
    
			
    3. 
						
  3. -ms、-moz、-webkit  -o
			
    -ms-transform:rotate(7deg); //-ms代表ie内核 识别码-moz-transform:rotate(7deg); //-moz代表火狐内核识别码 -webkit-tran ...
    
			
    4. 
						
  4. fiddler4微信抓包教程
			
    使用fiddler来抓包: 需要先做一些简单的准备工作: 一台带有无线网卡的PC或者笔记本电脑,然后将电脑和手机连接到同一个Wi-Fi网络中,并且保证二者是在同一个ip网段内的: 在电脑上安装 Fid ...
    
			
    5. 
						
  5. C++ 第二次实验
			
    实验内容: 1.函数重载编程练习 编写重载函数add(),实现对int型,double型,Complex型数据的加法.在main()函数中定义不同类型 数据,调用测试. #include <io ...
    
			
    6. 
						
  6. Pycharm 自定义文件模板
			
    Pycharm 自定义文件模板 每次新建文件都有相同的代码框架,每次重复敲浪费了程序员的寿命啊 按照下面方式自定义自己的模板:
    
			
    7. 
						
  7. HFSS中查看增益
			
    第一步:设置查看增益条件  radiation 中设置 第二步设置扫描方式   下面的save fields 一定要勾选 第三步:扫描完成就可以查看了  results 中 查看   其中   phi ...
    
			
    8. 
						
  8. 【HBase】-NO.140.HBase.1 -【HBase】
			
    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of  ...
    
			
    9. 
						
  9. Cocos Creator（圆形遮罩头像）动态增加遮盖层 mask 并设为圆形生效
			
    var avatar = new cc.Node('avatar'); var sp = node.addComponent(cc.Sprite); sp.spriteFrame = new cc.S ...
    
			
    10. 
						
  10. puppeteer（六）启动参数——浏览器扩展应用的添加及应用
			
    前言 最近再做浏览器的自动化,首页是定制化的,是通过extension(扩展)实现的,由于通过puppeteer默认是以无参(即首次以干净的环境)运行的,导致登录页无法正常显示,首先想当然是直接找扩展 ...
    
			
    11.