先放一个样式图:

源代码如下:

<!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 5875] [NOIP2018提高组模拟9.20] 听我说,海蜗牛 解题报告(BFS+二分)

    题目链接: http://172.16.0.132/senior/#main/show/5875 题目: 题解: 注意这题只能经过开放的港口 我们考虑用vector存下每个点不能到的点,并把并让vec ...

  2. Andoid CustomCircleProgress 半圆

    package com.play.playgame.view; import android.content.Context; import android.graphics.Canvas; impo ...

  3. POJ 3320 Jessica's Reading Problem (尺取法,时间复杂度O(n logn))

    题目: 解法:定义左索引和右索引 1.先让右索引往右移,直到得到所有知识点为止: 2.然后让左索引向右移,直到刚刚能够得到所有知识点: 3.用右索引减去左索引更新答案,因为这是满足要求的子串. 4.不 ...

  4. HDU 1166 敌兵布阵【线段树 单点更新】

    题意:给出n个数,a1,a2,a3,,,,,an,再给出一些操作 add i  j 表示给第i个节点增加j sub i  j 表示给第i个节点减少j query i j 表示询问第i个节点到第j个节点 ...

  5. 纯净版linux (debian)挂载VirtualBox共享文件夹

    使用的虚拟机版本是:VirtualBox-5.2.8-121009 使用的linux版本是:Linux debian 4.9.0-7-amd64 tty 1. 开始配置 1.1:打开虚拟机设置,打开你 ...

  6. spring中IOC的简单使用

    spring的ioc主要就是依赖注入,有基于构造器的依赖注入还有通过设值注入,这里我只简单的实现设值注入的方法,通过spring的依赖管理,我们可以很方便的了解各层之间的依赖关系,降低了各层之间的耦合 ...

  7. OpenJudge 1031 Lausanne Capitale Olympique

    Lausanne Capitale Olympique Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on  ...

  8. C++容器(三):pair类型

    pair类型 在开始介绍关联容器之前,我们有必要了解一种与之相关的标准库类型–pair类型. 操作 含义 pair<T1, T2> p1 创建一个空的pair对象,它的两个元素分别为T1和 ...

  9. 和同事合作开发,使用局域网 git创建本地仓库

    转自原文 和同事合作开发,使用局域网 git创建本地仓库 1.仓库 建一个空文件夹来做仓库,例如建为 cangku 1.1 cd 到 cangku目录下 创建远程仓库容器 mkdir  mycangk ...

  10. hihocoder 1124 : 好矩阵 dp

    好矩阵 时间限制:3000ms 单点时限:1000ms 内存限制:256MB 描写叙述 给定n, m.一个n × m矩阵是好矩阵当且仅当它的每一个位置都是非负整数,且每行每列的和 ≤ 2.求好矩阵的个 ...