先放一个样式图：

源代码如下：

<!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. [jzoj 6084] [GDOI2019模拟2019.3.25] 礼物 [luogu 4916] 魔力环 解题报告(莫比乌斯反演+生成函数)

    题目链接: https://jzoj.net/senior/#main/show/6084 https://www.luogu.org/problemnew/show/P4916 题目: 题解: 注: ...

  2. javascript对象的深度克隆

    在做项目的时候需要向对象里面添加新属性,又不想修改原对象.于是就写: var newObj = oldObj,但是新对象属性改变后就对象也会跟着改变,这是因为无论是新对象还是旧对象,指向的内存地址都是 ...

  3. jq 方法函数（淡入淡出，查找元素，过滤）遍历

    淡入淡出:fadeIn fadeOut fadeToggle fadeTo 淡入:fadeIn(speed[,callback])   速度和回调函数 回调函数可以写匿名函数,或者方法名不加括号. s ...

  4. 适配器模式（Adapter）：类适配器、对象适配器

    适配器模式(Adapter):将一个类的接口转换成客户希望的另外一个接口.A d a p t e r 模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适用场景: 1.已经存在的类的接口 ...

  5. hiho1469 - 简单dp

    题目链接 题目大意: 从一个大正方形数组里面找一个小正方形,满足其中的每个位置上的数都恰好比他的左边的那个和上边的那个大1(如果左边或上边的那个不存在的话就无此要求). 比如 1 2 32 3 43 ...

  6. LCD段码驱动

    假如要第3个数码关显示“8.”,则3A-3D均得为1,即Seg3和Seg4均得为1.假设模具Seg和驱动芯片Seg对应,则只需往HT1621的地址Seg3和Seg4分半发送0xF. 注意:HT1621 ...

  7. socket网络编程登录实现及多客户端和服务端的数据交互

    一.TCP/IP 客户端 package com.demo.entity; import java.io.Serializable; public class UserInfo implements ...

  8. 玩转HTML5移动页面（动效篇）

    为一名前端,在拿到设计稿时你有两种选择: 快速输出静态页面 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些 ...

  9. 如何让iframe背景色透明框架页文件设置

    如何让iframe背景色透明框架页文件设置:<body style="background-color:transparent" > 或 <body bgColo ...

  10. js效果之导航中英文转换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...