代码如下，仅支持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. 一个技术汪的开源梦 —— 基于 .Net Core 的公共组件之序列化

    一个技术汪的开源梦 —— 目录 想必大家在项目中都接触过 JSON 或者 XML 吧,为了将对象在网络上传输或者将其持久化必须将其序列化为一个字符串然后进行后续操作.常见的就是将其序列化成 JSON ...

  2. geotrellis使用（二十三）动态加载时间序列数据

    目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

  3. 【NLP】基于机器学习角度谈谈CRF（三）

    基于机器学习角度谈谈CRF 作者:白宁超 2016年8月3日08:39:14 [摘要]:条件随机场用于序列标注,数据分割等自然语言处理中,表现出很好的效果.在中文分词.中文人名识别和歧义消解等任务中都 ...

  4. niginx代理配置

    常用关键词:rewrite.proxy_pass location ^~ /address/ { proxy_set_header Host xx.sohu.com; #设置header proxy_ ...

  5. 基础笔记（一）：C#编程要点

    前言 来源于手中日常摘录的资料和书籍,算是对看过的东西的总结,部分注有阅读心得,也有部分只提出大纲或结论.(备注:本篇文章中大部分要点需要有实际的开发经验,有助于阅读理解.)     目录 const ...

  6. 【python常用函数1】

    ## 1 ##获取输入值 a = raw_input("请输入:") if a == str(1): print "success" else: print & ...

  7. SVNKit支持SSH连接

    SVNKit这个开源工具,用于Java语言访问SVN库,咋看的时候很方便,其实坑特别多.我在这里只想跟大家说一句,如果你还没有用过,请不要在生产环境使用这个东西了,兼容性问题搞死你(替换方案是直接用s ...

  8. wnmp环境搭建

    windows下配置nginx+php环境 刚看到nginx这个词,我很好奇它的读法(engine x),我的直译是“引擎x”,一般引“擎代”表了性能,而“x”大多出现是表示“xtras(额外的效果) ...

  9. Javaweb项目框架搭建-准备篇

    前言Java从大二开始学习到现在大四也有差不多两年了,但是由于之前一直在玩,没有认真学过,直到现在才开始重新学习.也是很凑巧,看到了黄勇老师的<架构探险>,于是便开始学习写Java Web ...

  10. FreeMarker的基础语法

    FreeMarker语言 FreeMarker语言概述 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写. FreeMarker被设计用来生成HTML Web ...