本文使用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. Dev TreeList 添加节点图标问题
			
    1. 在设计界面添加imageCollection控件,在属性页设置图标(可Load from disk,也可从Load from dev gallery) 2. TreeList控件有一个叫做Cus ...
    
			
    2. 
						
  2. DevExpress GridControl复合表头（多行表头）设置
			
    关于DevExpress.XtraGrid的复合表头或多行表头的示例,界面如下图所示 1.首先要把DevExpress的GridControl转换为BandedGridView 2.设置显示列及绑定的 ...
    
			
    3. 
						
  3. css----transition的应用，产生动画效果。
			
    应用transition属性产生动画效果 css中的transition属性设置元素的变化过程所需的时间. <!DOCTYPE html> <html> <head> ...
    
			
    4. 
						
  4. JS数组循环的性能和效率分析（for、while、forEach、map、for of）
			
    从最简单的for循环说起 for( 初始化:条件; ){} 条件为Trusy 值时候,可以继续执行for 循环,当条件变为Falsy 时跳出for循环.for循环常见的四种写法const person ...
    
			
    5. 
						
  5. QQ机器人
			
    先说下整体思路1.首先要借助一个QQ 插件,用来接收消息 发送消息2.要用个QQ 小号,这个QQ 你不能用来登,因为他相当于那个机器人3.要借助大神开发的SDK ,就是别人写的底层交互 ,我们只需要关 ...
    
			
    6. 
						
  6. 【Python基础】lpthw - Exercise 40 模块、类和对象
			
    一. 模块(module) 模块中包含一些函数和变量,在其他程序中使用该模块的内容时,需要先将模块import进去,再使用.操作符获取函数或变量,如 # This goes in mystuff.py ...
    
			
    7. 
						
  7. Java第四次实践作业
			
    1 编写“电费管理类”及其测试类.  第一步 编写“电费管理”类 1)私有属性:上月电表读数.本月电表读数 2)构造方法:无参.2个参数 3)成员方法:getXXX()方法.setXXX()方法 4 ...
    
			
    8. 
						
  8. RF - selenium - 常用关键字 - 示例
			
    1. 打开浏览器 Open Browser    http://www.baidu.com    chrome 2. 关闭浏览器 Close Browsers Close All Browser 3. ...
    
			
    9. 
						
  9. Numpy增加一列，指定概率指定参数
			
    这里主要应用到numpy.random.choice 可以根据需求,比如增加一列,A B C 为该列数据,随机概率生成 详见代码 import numpy as np import pandas as ...
    
			
    10. 
						
  10. VisualStudioCode中用dotnet命令创建多个ASP.NET Core 项目、类库、控制台程序，并添加应用间的引用
			
    一.准备工作 首先安装VisualStudioCode并且可以使用. 1.首先新创建空的MyApps文件夹,作为项目主目录,下面将在这个文件夹中创建多个web应用程序.类型.控制台程序等. 2.打开V ...
    
			
    11.