效果图：

刚开始做时没考虑到清零和退格两个功能，嘻嘻，后来加的整体与传统计算器比有点小瑕疵。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js简单计算器</title>

<style type="text/css">
*{
margin:0px;
padding:0px;
}
input{
margin-top:2px;
margin-left:2px;
width:230px;
height:30px;
text-align:right;
}
button{
margin-top:2px;
margin-left:2px;
width:50px;
height:50px;
}
#container{
margin-left:1px;
border:1px solid #E4E4E4;
background:#BBBBBB;
width:235px;
height:215px;
}
</style>

<script>

function onLoad(){
//加载完毕后光标自动对应到输入框
document.getElementById("input").focus();
}
//读取按钮的值，传给输入框
function inputEvent(e){
//把val的值改为每个事件的innerHTML值
var val=e.innerHTML;
//获取input标签
var xsval=document.getElementById("input");
//标签里的value连接每个事件的innerHTML值
xsval.value+=val;
}

//计算出结果
function inputOper(){
var xsval=document.getElementById("input");
xsval.value=eval(document.getElementById("input").value);
}
//清零
function clearNum(){
var xsval=document.getElementById("input");
xsval.value="";
document.getElementById("input").focus();
}
//退格
function backNum(){
var arr=document.getElementById("input");
arr.value=arr.value.substring(0,arr.value.length-1);
}



</script>
</head>

<body onload="onLoad()">
<input id="input" type="text">
<div id="container">
<div>
<button onclick="inputEvent(this)">1</button>
<button onclick="inputEvent(this)">2</button>
<button onclick="inputEvent(this)">3</button>
<button onclick="inputEvent(this)">+</button>

</div>

<div>
<button onclick="inputEvent(this)">4</button>
<button onclick="inputEvent(this)">5</button>
<button onclick="inputEvent(this)">6</button>
<button onclick="inputEvent(this)">-</button>
</div>

<div>
<button onclick="inputEvent(this)">7</button>
<button onclick="inputEvent(this)">8</button>
<button onclick="inputEvent(this)">9</button>
<button onclick="inputEvent(this)">*</button>
</div>

<div>
<button onclick="inputEvent(this)">0</button>
<button onclick="inputEvent(this)">.</button>
<button onclick="inputOper(this)">=</button>
<button onclick="inputEvent(this)">/</button>
</div>
</div>
<button onclick="clearNum()">清零</button>
<button onclick="backNum()">退格</button>
</body>

</html>

js实现简单计算器的更多相关文章

  1. Ext实现简单计算器

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客 使用Ext实现简单计算器,网页版实现 1.页面部分calculator. ...

  2. html+css+js实现科学计算器

    代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...

  3. 1.C#WinForm基础制作简单计算器

    利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...

  4. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  5. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  6. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  7. PAT 06-1 简单计算器

    想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...

  8. php大力力 [005节] php大力力简单计算器001

    2015-08-22 php大力力005. php大力力简单计算器001: 上网看视频,看了半天,敲击代码,如下: <html> <head> <title>简单计 ...

  9. PHP实现简单计算器

    <!--简单的计算器--> <!DOCTYPE html> <html> <head> <title>PHP实现简单计算器</titl ...

随机推荐

  1. strcpy,memcpy,内存块重叠

    前段时间准备面试,看了一些库函数的实现,在看到memcpy时,发现有处理source和destination所指内存有重叠的情况,而strcpy没有,特别模仿库函数写了这个函数,并进行了测试.以下是具 ...

  2. Dijkstra算法构造单源点最短路径

    迪杰斯特拉(Dijkstra)算法 是求从某个源点到其余各顶点的最短路径,即对已知图 G=(V,E),给定源顶点 s∈V,找出 s 到图中其它各顶点的最短路径. 我总结下核心算法,伪代码如下: Dij ...

  3. Sicily1317-Sudoku-位运算暴搜

    最终代码地址:https://github.com/laiy/Datastructure-Algorithm/blob/master/sicily/1317.c 这题博主刷了1天,不是为了做出来,AC ...

  4. 研磨设计模式解析及python代码实现——(三)适配器模式(Adapter)

    一.适配器模式定义 将一个类的接口转换成另外一个接口,适配器模式使得原本由于接口不兼容,而不能在一起工作的哪些类能够在一起工作. 二.python 实现 import string import cP ...

  5. iOS新建项目基本配置

    项目整体同xib+代码的方式 1.调整项目文件结构 2.将资源图片导入工程 General->LaunchScreen 修改 3.App名称修改 info->Bundle name 4.删 ...

  6. asp.net采用OLEDB方式导入Excel数据时提示:未在本地计算机上注册"Microsoft.Jet.OLEDB.4.0" 提供程序"

    笔者在项目中做做了一个从Excel表格中导入数据的模块.大体上asp.net项目中导入Excel大体分成三类: 1)采用c#内置方案System.Data.OleDb(限制较小, 通用) 2)采用Ex ...

  7. iOS APNS远程推送(史上最全步骤)

    /*****************************************1************************************************/ waterma ...

  8. 【iOS-Android开发对照】 之 APP入口

    [iOS-Android开发对照]之 APP入口 [图片 Android vs iOS] 提纲 对照分析iOS,Android的入口, iOS,Android的界面单元 为什么要有那样的生命周期 继承 ...

  9. TCP keepalive under Linux

    TCP Keepalive HOWTO Prev   Next 3. Using TCP keepalive under Linux Linux has built-in support for ke ...

  10. careercup-栈与队列 3.1

    3.1 描述如何只用一个数组来实现三个栈. 解答 我们可以很容易地用一个数组来实现一个栈,压栈就往数组里插入值,栈顶指针加1: 出栈就直接将栈顶指针减1:取栈顶值就把栈顶指针指向的单元的值返回: 判断 ...