先放一个样式图：

源代码如下：

<!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. sts安装出现could not find jar:file解决办法，could not find jar:file，sts安装

    标题sts插件下载好但是安装出错 我的eclipse是4.5.2,在官方网站https://spring.io/tools3/sts/legacy下载,压缩包的名字为:spring-tool-suit ...

  2. javascript对象的相关操作

    Window对象 我们知道浏览器对象模型(BOM)是javascript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象.其分层结构如下: window对象是整个BOM的核心其有documen ...

  3. Codeforces 982 C. Cut 'em all!（dfs）

    解题思路: 代码中有详细注解,以任意一点为根,dfs遍历这棵树. 每一个节点可能有好几个子树,计算每棵子树含有的节点数,再+1即为这整棵树的节点. 判断子树是否能切断与根之间的联系,如果子树含有偶数个 ...

  4. node.js连接数据库基本操作、封装数据库操作，输出到网页

    声明:以下代码测试通过,不同于直接的复制粘贴乱七八糟未测试的代码,完全可以用,最后会附上所有的代码和sql文件 首先建立表,建表语句如下: /* SQLyog Ultimate v12.08 (64 ...

  5. Jlink如何校验Hex

    打开SEGGER J-Flash ARM,记住必须设置好工程属性后才能校验,否则校验和为0 设置好工程属性后,直接将Hex拖入到工程中即可.在LOG窗口中会显示CRC的值 如何校验芯片中的程序的版本号 ...

  6. FCC高级编程篇之Make a Person

    Make a Person Fill in the object constructor with the following methods below: getfirstname() getLas ...

  7. OSI参考模型概论

  8. Day92

    # session:用于保存客户端历史访问的信息# BeautifulSoup是一个模块,该模块用于接收一个HTML或XML字符串,然后将其进行格式化,# 之后遍可以使用他提供的方法进行快速查找指定元 ...

  9. 2017年6月28日 python爬虫学习

    1.写入csv文件2.lxml的用法3.自定义字典类的方法4.bytes解码得到str,str编码得到bytes5.json 1 import csv import lxml.html class S ...

  10. 微软的鼠标 Microsoft mouse

    微软是做软件出身的厂商, 所以微软开发的软件质量毋庸置疑,Windows操作系统还有诸如Office的办公软件拥有庞大的用户群. 微软家的Visual Studio也被号称宇宙最强IDE,我个人也每天 ...