本文使用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. MySql 主从复制 mysql-proxy实现读写分离
			
    1.安装和配置Docker 服务器版本阿里云CentOS7.4 docker版本18.06.0-ce docker安装步骤https://docs.docker.com/install/linux/d ...
    
			
    2. 
						
  2. java.util中，util是什么意思
			
    Util是utiliy的缩写,是一个多功能.基于工具的包. java.util是包含集合框架.遗留的 collection 类.事件模型.日期和时间设施.国际化和各种实用工具类(字符串标记生成器.随机 ...
    
			
    3. 
						
  3. 通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。
			
    Web Workers API - Web API 接口参考 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API ...
    
			
    4. 
						
  4. 召回率（Recall），精确率（Precision），平均正确率
			
    https://blog.csdn.net/yanhx1204/article/details/81017134 摘要 在训练YOLO v2的过程中,系统会显示出一些评价训练效果的值,如Recall, ...
    
			
    5. 
						
  5. Delphi 的内存操作函数(2): 给数组指针分配内存
			
    静态数组, 在声明时就分配好内存了, 譬如: var   arr1: ..] of Char;   arr2: ..] of Integer; begin   ShowMessageFmt('数组大小 ...
    
			
    6. 
						
  6. VUE项目注意点
			
    1.vue组件中img标签的src属性绑定数据: <img :src="img" alt="图片" /> //scriptdata() { img: ...
    
			
    7. 
						
  7. 当使用eclipse将项目部署到Tomcat时，提示Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modul
			
    原因: 此版本选择过高.当出现此错误时,直接对项目可能无法进行修改.可以通过修改项目的配置文件来达到目的. \workspace\项目名称\.settings\org.eclipse.wst.comm ...
    
			
    8. 
						
  8. 数据结构 - 表插入排序 具体解释 及 代码(C++)
			
    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012515223/article/details/24323125 表插入排序 具体解释 及 代码 ...
    
			
    9. 
						
  9. hystrix参数使用方法
			
    hystrix+feign+ribbon,但是可能很多人都知道hystrix还有线程隔离,信号量隔离,等等各种参数配置,在这几就记录下hystrix的参数, 一.hystrix参数使用方法 通过注解@ ...
    
			
    10. 
						
  10. request.getParameterNames()和request.getParameterValues()
			
    request.getParameterNames()方法是将发送请求页面中form表单里所有具有name属性的表单对象获取(包括button).返回一个Enumeration类型的枚举. 通过Enu ...
    
			
    11.