先放一个样式图：

源代码如下：

<!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. 如何实现内核旁路（Kernel bypass）？

    转到 :http://blog.jobbole.com/94976/ 在前两篇文章中,我们讨论了<如何生成每秒百万级别的HTTP 请求?> 以及 如何减少往返时间 .我们在 Linux 上 ...

  2. 如何设置ASP.NET站点页面运行超时

    全局超时时间 服务器上如果有多个网站,希望统一设置一下超时时间,则需要设置 Machine.config 文件中的 ExecutionTimeout 属性值.Machine.config 文件位于 % ...

  3. php查询字符串是否存在 strpos

    /*** 查询字符是否存在于某字符串** @param $haystack 字符串* @param $needle 要查找的字符* @return bool*/function str_exists( ...

  4. CF666E Forensic Examination 广义后缀自动机_线段树合并_树上倍增

    题意: 给定一个串 $S$ 和若干个串 $T_{i}$每次询问 $S[pl..pr]$ 在 $Tl..Tr$ 中出现的最多次数,以及出现次数最多的那个串的编号. 数据范围: 需要离线 题解:首先,很常 ...

  5. mysql 临时表和内存表

    查看内存表的最大值: show variables like '%heap%'; mysql> show variables like '%heap%'; +------------------ ...

  6. 微信小程序微信支付的一些坑

    使用的是Node.js作为后端 统一下单: appid:这里的appid是调起微信支付的appid mch_id:商户号,需要注意的是商户号要与appid对应 nonce_str:Math.rando ...

  7. luogu P1495 曹冲养猪（中国剩余定理）

    题意 题解 翻到了一个金句 就跟这句话说得一样,就是个裸题. 所以看模板呗. #include<iostream> #include<cstring> #include< ...

  8. [洛谷P1580]yyy loves Easter_Egg I

    题目大意:很多人@一个人,如果那个人忍不住说话了,就轰炸成功,如果那个人没说话或者别的人没有@他或@很多个人,则轰炸失败.(具体见原题) 解题思路:字符串处理,好好用sscanf即可(细节见代码). ...

  9. 【codeforces 429D】Tricky Function

    [题目链接]:http://codeforces.com/problemset/problem/429/D [题意] 给你n个数字; 让你求出一段区间[l,r] 使得 (r−l)2+(∑rl+1a[i ...

  10. ActiveMQ学习总结（9）——Linux中安装ActiveMQ

    1.新建一个文件夹activeMQ   mkdir /server 2.授权    chmod 777 /server 3.下载activeMQ安装包,拷贝到/activeMQ目录下 apache-a ...