先放一个样式图：

源代码如下：

<!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. 5.Git使用详细教程

    转自:https://www.cnblogs.com/seven-ahz/p/7712125.html 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的 ...

  2. Codeforces 676E The Last Fight Between Human and AI 规律

    链接 Codeforces 676E The Last Fight Between Human and AI 题意 给一个多项式,有些系数不确定.人和机器轮流填系数,系数可以是任何数,问是否能使得最后 ...

  3. kafka的使用

    kafka基于zookeeper. 需要安装kafka.zookeeper. 安装方法参考:http://tzz6.iteye.com/blog/2401197 启动zookeeper:点击zkSer ...

  4. 【原创】TimeSten安装与配置

    1.安装TimeSten 2.安装时要指定TNS_ADMIN_LOCATION,即tnsnames.ora的路径,因为tt会根据这个连接Oracle.C:\TimesTen\tt1122_32\net ...

  5. Eclipse安装Web插件

    方法/步骤     本次安装教程,我把所有的步骤都写在了图片中,大家仔细查看图片即可,希望能帮到大家   1.选择菜单栏上的“Help”   选择Install New Software   在弹出的 ...

  6. HDU 1175 连连看【BFS】

    题意:给出起点和终点的棋子,不能经过别的棋子,而且转弯的次数不能超过2次,问能否消除 和逃离迷宫一样,每个节点记录下来它的当前的方向和转弯的次数,再搜 注意特判起点的棋子和终点的棋子为0或者不一样的情 ...

  7. tinymce原装插件源码分析（一）-hr

    tinymce简介 tinymce是一款能方便无限扩展的网页富文本编辑器. tinymce原装插件已经十分丰富,对于文本编辑(blog等文章)是绰绰有余,但是应对一些复杂的应用,比如在上面开发html ...

  8. Ubuntu上面安装docker

    1.先用uname -r查看系统的信息 2.安装docker的命令为 sudo apt install docker.io 3.然后就能实现安装了 但是:运行docker search golang, ...

  9. 系统级脚本 rpcbind

    [root@web02 ~]# vim /etc/init.d/rpcbind #! /bin/sh # # rpcbind Start/Stop RPCbind # # chkconfig: 234 ...

  10. 按shift键调出命令行的脚本

    打开Notepad++,粘贴以下命令,并将文件命名为opencmdhere.reg(注意:文件编码格式为UCS-2 Little Endian,否则会导致中文乱码),再双击打开即可 Windows R ...