先放一个样式图：

源代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

            span{

                display: inline-block;

                width: 100px;

                height: 100px;

                background-color: wheat;

                border-radius: 100px;

                text-align: center;

                line-height: 100px;

                margin: 5px 10px;

            }

            div{

                width: 500px;

                height: 700px;

                background-color: black;

            }

            #ling{

                display: inline-block;

                width: 225px;

                height: 100px;

                background-color: wheat;

                border-radius: 100px;

                text-align: center;

                line-height: 100px;

            }

            #result{

                display: inline-block;

                width: 480px;

                height: 100px;

                background-color: white;

                text-align: right;

                border-radius: 0;

                line-height: 100px;

                color: red;

                font: 25px/100px "微软雅黑";

            }

        </style>

    </head>

    <body>

        <div id="">

            <span id="result"></span><br />

            <span onclick="delAll()">del</span>

            <span onclick="del()">C</span>

            <span onclick="display('%')">%</span>

            <span onclick="display('/')">/</span>

            <span onclick="display(7)">7</span>

            <span onclick="display(8)">8</span>

            <span onclick="display(9)">9</span>

            <span onclick="display('*')">*</span>

            <span onclick="display(4)">4</span>

            <span onclick="display(5)">5</span>

            <span onclick="display(6)">6</span>

            <span onclick="display('-')">-</span>

            <span onclick="display(1)">1</span>

            <span onclick="display(2)">2</span>

            <span onclick="display(3)">3</span>

            <span onclick="display('+')">+</span>

            <span id="ling" onclick="display(0)">0</span>

            <span onclick="display('.')">.</span>

            <span onclick="cal()">=</span>

        </div>

        <script type="text/javascript">

            var osp = document.getElementById("result");

            function display(num){

                osp.innerHTML=osp.innerHTML+num;

            }

            function cal(){

                osp.innerHTML=eval(osp.innerHTML);

            }

            function delAll(){

                osp.innerHTML="";

            }

            function del(){

                osp.innerHTML = osp.innerHTML.slice(0,osp.innerHTML.length-1);

            }

        </script>

    </body>

</html>

————
简单来说，我的做法就是根据需求给每一个按键添加一个点击事件。

先获取到显示器部分：

<span id="result"></span>
var osp = document.getElementById("result");

————
利用点击事件将按键的值传给显示部分，用到这个方法的的按键有0~9的数字，小数点，加减乘除和取余（%）的运算符号

            <span onclick="display('%')">%</span>

            <span onclick="display('/')">/</span>

            <span onclick="display(7)">7</span>

            <span onclick="display(8)">8</span>

            <span onclick="display(9)">9</span>

            <span onclick="display('*')">*</span>

            <span onclick="display(4)">4</span>

            <span onclick="display(5)">5</span>

            <span onclick="display(6)">6</span>

            <span onclick="display('-')">-</span>

            <span onclick="display(1)">1</span>

            <span onclick="display(2)">2</span>

            <span onclick="display(3)">3</span>

            <span onclick="display('+')">+</span>

            <span id="ling" onclick="display(0)">0</span>

            <span onclick="display('.')">.</span>

function display(num){

                osp.innerHTML=osp.innerHTML+num;

            }

————
给等号按键添加的方法如下，eval方法会自动进行运算。

<span onclick="cal()">=</span>
function cal(){

                osp.innerHTML=eval(osp.innerHTML);

            }

————
del按键用来清空显示器中的内容。这里直接给显示器赋空值就好了

<span onclick="delAll()">del</span>
function delAll(){

                osp.innerHTML="";

            }

————
c键用来删除输入内容的最后一位，此处用到的方法是slice（），拿这里的例子来说：osp.innerHTML.slice(0,osp.innerHTML.length-1);就是截取字符串中索引值0到length-1的部分，包含0不包含length-1，所以刚好能达到我们所要的效果，即删除字符串的最后一位

function del(){

                osp.innerHTML = osp.innerHTML.slice(0,osp.innerHTML.length-1);

            }

js利用点击事件做一个简单的计算器的更多相关文章

  1. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  2. 【 D3.js 入门系列 — 3 】 做一个简单的图表！

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

  3. 用JS,做一个简单的计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8">   <title&g ...

  4. O-C-11-利用类方法做一个简单的计算器

    #import <Foundation/Foundation.h> @interface calculator : NSObject //@property  double    numb ...

  5. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  6. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  7. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  8. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  9. 使用Multiplayer Networking做一个简单的多人游戏例子-3/3（Unity3D开发之二十七）

    使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Netw ...

随机推荐

  1. [poj 3349] Snowflake Snow Snowflakes 解题报告 （hash表）

    题目链接:http://poj.org/problem?id=3349 Description You may have heard that no two snowflakes are alike. ...

  2. SSRS参数不能默认全选的解决方法

    解决方法选自<SQL Server 2008 R2 Reporting Services 报表服务>一书,亲测有效. 注意:参数默认值如果是字符串需要类型转换 =CStr("AL ...

  3. C# 程序集Assembly

    原谅我到目前为止一直肤浅的认为程序集就是dll,这种想法是错误的. 今天就系统的学习记录一下“程序集”的概念.原文链接https://www.cnblogs.com/czx1/p/2014131370 ...

  4. Windbg调试托管代码

    Windbg调试.net托管代码需要借助于SOS.dll,.Net 4.0的32位sos.dll的路径在C:\Windows\Microsoft.NET\Framework\v4.0.30319,64 ...

  5. （转载） 据说年薪30万的Android程序员必须知道的

    据说年薪30万的Android程序员必须知道的帖子 标签: android 2015-03-12 16:52 28705人阅读 评论(14) 收藏 举报 Android中国开发精英 目前包括: And ...

  6. ActiveMQ学习笔记（6）----ActiveMQ整合Spring开发

    1. 添加依赖 spring 提供了对JMS的支持,需要添加Spring支持jms的包和Spring的核心包,如下: <dependency> <groupId>org.apa ...

  7. 洛谷P3355 骑士共存问题 二分图_网络流

    Code: #include<cstdio> #include<cstring> #include<queue> #include<vector> #i ...

  8. li自定义图标

    /*自定义list的图标*/ li{ list-style-image: url(../img/21.JPG); }

  9. java list序列化json 对象、json数组

    list<T> 序列化   json对象   ----------- JSONObject -------JSONObject.toJSONString(str);  解析:JSONObj ...

  10. Tomcat跨域资源共享

    1.下载Jar包 cors-filter-1.7.jar java-property-utils-1.9.jar 下载完成后将Jar拷贝到tomcat下lib目录中 2.修改web.xml配置 在29 ...