代码如下，仅支持webkit

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>calc</title>
<style type="text/css">
*{
padding:0;
margin:1px;
}
#calculater{
margin: auto;
margin-top: 30px;
border: solid 6px #2371D3;
border-spacing: 0px;
}
#display{
width: 100%;
height: 80px;
border-bottom: solid 4px #2371D3;
color: lightcoral;
font-family: helvetica;
font-size: 50px;
padding-left: 2px;
}
.numberkey{
cursor: pointer;
width: 120px;
height: 100px;
border: solid 1px #FFFFFF;
background: #2371D3;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
/*td{
background-color: red;
}*/
#equality{
cursor: pointer;
width: 120px;
height: 100%;
background: #2371D3;
border: solid 1px #FFFFFF;
color: #ffffff;
text-align: center;
font-family: helvetica;
font-size: 60px;
}
.numberkey:hover{
background: lightcoral;
}
#equality:hover{
background: lightcoral;
}
</style>
</head>
<body>
<table id="calculater" onclick="calculator()">
<tr>
<td id="display" colspan="5">0</td>
</tr>
<tr>
<td class="numberkey" >1</td>
<td class="numberkey" >2</td>
<td class="numberkey" >3</td>
<td class="numberkey" >+</td>
<td class="numberkey" id="deletesign">c</td>
</tr>
<tr>
<td class="numberkey" >4</td>
<td class="numberkey" >5</td>
<td class="numberkey" >6</td>
<td class="numberkey" >-</td>
<td rowspan="3" id="equality" onclick="resultscalculate()">=</td>
</tr>
<tr>
<td class="numberkey" >7</td>
<td class="numberkey" >8</td>
<td class="numberkey" >9</td>
<td class="numberkey" >*</td>
</tr>
<tr >
<td class="numberkey" >+/-</td>
<td class="numberkey" >0</td>
<td class="numberkey" >.</td>
<td class="numberkey" >/</td>
</tr>



<script type="text/javascript">

var results="";

var calresults="";
var lastkey="";
var results2="";
var flg=1;
var re1=/^[\*|\/].+/;
var re2=/.+[\*|\/]$/;
var re3=/(\+|-|\*|\/)/;
function calculator () {

// 点击=触发的calculater()函数得不到结果

if(event.srcElement.innerText=="="){
return;
}

// .c键的清除功能
if(event.srcElement.innerText=="c"){
results="";
display.innerText="0";
return;
}

//点击显示框时使触发的calculator函数得不到结果
if(event.srcElement.id=="display"){
return;
}

//显示框第一个元素为运算符显示输入错误，result清空

if(results.match(re1)){
results="";
display.innerText="wrong !";
return;
}

//显示框末位不能出现两个运算符
if(lastkey.match(re3)&&event.srcElement.innerText.match(re3)){
return;
}


//若结果后输入运算符继续运算
if(lastkey=="="&&event.srcElement.innerText.match(re3)){
results=calresults;
}

//取反功能

if (event.srcElement.innerText=="+/-"&&results!="") {
if (flg==-1) {
results=String(results2);
display.innerText=results;
flg=-flg;
return;
}
results2=results;
results = "-"+"("+results+")";
flg=-flg;
display.innerText=results;
return;
}
results+=event.srcElement.innerText;
lastkey=event.srcElement.innerText;
display.innerText=results;

}


function resultscalculate(){
if (results.match(re1)||results.match(re2)) {
display.innerText="输入错误";
results="";
return;
}

calresults=eval(results);
display.innerText=calresults;
lastkey="=";
results="";
}


</script>

</body>
</html>

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

  1. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  2. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  3. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  4. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  5. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  6. 基于MFC的一个简单计算器

    写一个简单的计算器并不是什么很难的事,主要目的是要通过这个程序来学习和分析其中的核心算法.这个简易计算器的核心部分就是对输入的表达式的正确性判断与求值,其中包括对表达式的解析.中缀表达式转后缀表达式. ...

  7. php+js实现一个简单的用户管理系统

    php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...

  8. 用JS,做一个简单的计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8">   <title&g ...

  9. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

随机推荐

  1. 从零开始编写自己的C#框架（19）——Web层后端权限模块

    不知不觉本系统写了快三个月了,最近写页面的具体功能时感觉到有点吃力,很多地方如果张嘴来讲的话可以说得很细,很全面,可写成文字的话,就不太会写了,有些地方想讲得清晰的话,得用多几倍的文字+实例+变化中的 ...

  2. Core Java 总结（字符和字符串类问题）

    所有代码均在本地编译运行测试,环境为 Windows7 32位机器 + eclipse Mars.2 Release (4.5.2) 2016-10-17 整理 字符,字符串类问题 正则表达式问题 J ...

  3. 读书笔记--SQL必知必会06--用通配符进行过滤

    6.1 LIKE操作符 通配符(wildcard),用来匹配某些值的的特殊字符. 在搜索子句中必须通过LIKE操作符使用通配符. 通配符搜索只能用于文本字段(字符串),非文本数据类型字段不能使用通配符 ...

  4. 读书笔记--SQL必知必会14--组合查询

    14.1 组合查询 复合查询(compound query)或并(union),SQL允许执行多个查询(多条SELECT语句),并将结果作为一个查询结果集返回. 应用场景: 在一个查询中从不同的表返回 ...

  5. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  6. Apworks框架实战

    Apworks框架实战(一):Apworks到底是什么? Apworks框架实战(二):开始使用 Apworks框架实战(三):单元测试与持续集成 Apworks框架实战(四):使用Visual St ...

  7. Node.js 给前端带来了什么

    在软件开发领域,前端工程师曾经是一个比较纠结的职业.在Web技术真正发展起来之前的相当长一段时间里,由于技术门槛很低,前端工程师行业一直是鱼龙混杂的状态.其中很多号称是Web开发者的人实际上并没有什么 ...

  8. C#限速下载网络文件

    代码: using System; using System.Collections.Concurrent; using System.Collections.Generic; using Syste ...

  9. agsXMPP

    agsXMPP使用 agsXMPP中的例子已经有注册.登录.添加好友.接收好友添加请求.发送消息.接收消息等功能. 修改用户密码 登录后可用以下方法修改密码 IQ iq = new IQ(IqType ...

  10. (学习笔记)laravel 中间件

    (学习笔记)laravel 中间件 laravel的请求在进入逻辑处理之前会通过http中间件进行处理. 也就是说http请求的逻辑是这样的: 建立中间件 首先,通过Artisan命令建立一个中间件. ...