javascript写的简单的计算器，内容很多，方法实用，推荐
最近用javascript写了一个简单的计算器，自己测试感觉还好，先给大家观赏下界面：
界面就是这样了，但是功能如何呢？
现在只是个简单的标准计算器，能进行加减乘除连续运算，以及求余运算。如果发生被除数为零的错误，下面会给出提示，就像这样：
自己不知道写的怎么样，但是对于新手来说，这肯定是一份大餐，里面可以接触到的东西不少，可以拿来学习。如果有高手看出里面的疏漏、错误等望不吝赐教，给予指点。
下面贴上代码，希望里面的注释足够多了。
js部分：
var num=0,result=0,numshow="0";
var operate=0; //判断输入状态的标志
var calcul=0; //判断计算状态的标志
var quit=0; //防止重复按键的标志
function command(num){
var str=String(document.calculator.numScreen.value); //获得当前显示数据
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str + String(num); //给当前值追加字符
document.calculator.numScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志
}
function dzero(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
document.calculator.numScreen.value=str;
operate=0;
}
function dot(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
document.calculator.numScreen.value=str;
operate=0;
}
function del(){ //退格
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? str : "";
str=str.substr(0,str.length-1);
str=(str!="") ? str : "0";
document.calculator.numScreen.value=str;
}
function clearscreen(){ //清除数据
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";
}
function plus(){ //加法
calculate(); //调用计算函数
operate=1; //更改输入状态
calcul=1; //更改计算状态为加
}
function minus(){ //减法
calculate();
operate=1;
calcul=2;
}
function times(){ //乘法
calculate();
operate=1;
calcul=3;
}
function divide(){ //除法
calculate();
operate=1;
calcul=4;
}
function persent(){ //求余
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul){ //判断要输入状态
case 1:result=num+numshow;break; //计算"+"
case 2:result=num-numshow;break; //计算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零！"; setTimeout(clearnote,4000)} break;
case 5:result=num%numshow;break;
}
quit=1; //避免重复按键
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存储当前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML="";
}
html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>写给新手：js表单操作（四） 简单计算器（二）</title>
<style type="text/css">
body {
font-size:12px;
font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#e2e2e2;
}
h6{
margin:0;
font-size:12px;
}
#calculator {
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#f2f2f2;
}
#calculator div {
clear:both;
}
#calculator ul{
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden
}
#calculator li{
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#eaeaea;
}
#calculator li.tool{
background-color:#e2e2e2;
}
#calculator li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
#calculator li:active{
background-color:#fc0;
cursor:pointer;
}
#calculator li.tool:active{
background-color:#d8e8ff;
cursor:pointer;
}
#calcu-head {
text-align:left;
padding:10px 15px 5px;
}
span.imyeah {
float:right;
color:#ccc;
}
span.imyeah a{
color:#ccc;
}
.screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#999;
}
#calcu-foot{
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;
}
span#note{
float:left;
width:210px;
height:auto;
overflow:hidden;
color:red;
}
span.welcome{
clear:both;
color:#999;
}
span.welcome a{
float:right;
color:#999;
}
</style>
<script language="javascript">
//此处插入上面的js代码
</script>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="imyeah">© <a href="http://www.cnblogs.com/imyeah/" target="_blank">I'm Yeah!</a></span><h6>简单的计算器</h6></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
</div>
<div id="calcu-btn">
<ul> <!--配置按钮-->
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()">←</li>
<li class="tool" onclick="clearscreen()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="times()">×</li>
<li class="tool" onclick="divide()">÷</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="plus()">+</li>
<li class="tool" onclick="minus()">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li class="tool" onclick="persent()">%</li>
<li class="tool" onclick="equal()">=</li>
</ul>
</div>
<div id="calcu-foot">
<span id="note"></span>
<span class="welcome">欢迎使用javascript计算器！<a href="http://www.cnblogs.com/imyeah" target="_blank">反馈</a></span>
</div>
</form>
</div>
</body>
</html>
PS：这里再为大家推荐两款本站的在线计算器，都是采用js实现，且功能强大，相信对于大家深入了解JavaScript数学运算及web设计会有所帮助：
在线标准计算器：http://tools.jb51.net/jisuanqi/jsq
在线科学计算器：http://tools.jb51.net/jisuanqi/jsqkexue
相关推荐
-
网页计算器 一个JS计算器
一个挺小的JavaScript网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算,点击"运行代码"可以运行一下看效果. 计算器 button {width:40; border: 1 solid #808080;background-color: #FFFFFF}   ← 1 2 3 + 4 5 6 - 7 8 9 × C 0 = ÷ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js实现简单计算器
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html
-
简易js代码实现计算器操作
复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--
-
使用jsp调用javabean实现超简单网页计算器示例
以下是代码: Calculator.java 复制代码 代码如下: package com.amos.model; import java.math.BigDecimal; /** * @ClassName: Calculator * @Description: 计算器 * @author: amosli * @email:amosli@infomorrow.com * @date Mar 20, 2014 1:04:59 AM */ public class Calculator {
-
纯javascript代码实现计算器功能(三种方法)
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q
-
功能很全的精品JS计算器
网页特效|XFBBS.Com|---功能很全的精品计算器 P { FONT-SIZE: 9pt; FONT-FAMILY: "Verdana" } TD { FONT-SIZE: 9pt; LINE-HEIGHT: normal } A { FONT-SIZE: 9pt; TEXT-TRANSFORM: none; COLOR: #326969; TEXT-DECORATION: none } A:hover { FONT-SIZE: 9pt; LEFT: 1px; COLOR: #0
-
javascript-简单的计算器实现步骤分解(附图)
知识点: 1.数学运算"+,-,*,/"的使用 2.输入内容的判断,对于事件对象的来源的判断 效果: 代码: 复制代码 代码如下: <style> #calculate { line-height: 60px; text-align: center; background: #ccc; font-size: 16px; font-weight: bold; } #calculate tbody input{ width: 100%; height: 60px; back
-
js网页版计算器的简单实现
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&
-
简单快速的实现js计算器功能
在js的全局方法中有一个eval()方法,由于平时不怎么用,所以到关键时候就没想起来它 想写一个简易的计算器,本来以为要不了多久就能写出来的,谁知道愣是花费了我近两个小时的时间来写,但结果还是不能令我满意.想找一个更好的方法来写,不想写的那么麻烦,用什么方法呢?想了一个遍,后来猛然看到屏幕上有一个eval(),当时我的电脑正打开着网页.福星来了,对啊,我浪费了这么长时间写出来的东西还不能令我满意,一个eval()不就搞定了么,下面就给大家看一下我写的代码,写的很粗糙,还请大家多多指正. <!DO
-
用JS写的简单的计算器实现代码
1.本页效果图片 2.美化后的效果 Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i 0){ del = 1; this.tmp = this.register[0]; } if(_sign == '-'){ this.tmp = -this.tmp; }else{ this.tmp = Math.abs(this.