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="Content-Type" content="text/html; charset=utf-8" />

<title>计算器2.2</title>

</head>

<body>

<input id="a1" disabled="disabled" />

<input id="a2" disabled="disabled" />

<input id="a3" disabled="disabled" />

<p id="counter"></p>

<script type="text/javascript">

function addnum(id)

{

	b2 = document.getElementById("a2").value;

	if(!b2){

		document.getElementById("a1").value += id;

	}else{

		document.getElementById("a3").value += id;

	}

}

function addtype(id)

{

	b1 = document.getElementById("a1").value;

	if(!b1){

		alert("请输入数字1");

		return false;

	}

	if(id=='*'){

		type = '×';

	}else if(id=='/'){

		type = '÷';

	}else{

		type = id;

	}

	document.getElementById("a2").value = type;

}

function backspace()

{

	b1 = document.getElementById("a1").value;

	b2 = document.getElementById("a2").value;

	b3 = document.getElementById("a3").value;

	if(b3){

		b3 = b3.substring(0,b3.length-1);

		document.getElementById("a3").value = b3;

	}else if(b2){

		b2 = b2.substring(0,b2.length-1);

		document.getElementById("a2").value = b2;

	}else if(b1){

		b1 = b1.substring(0,b1.length-1);

		document.getElementById("a1").value = b1;

	}

}

function clean()

{

	document.getElementById("a1").value="";

	document.getElementById("a2").value="";

	document.getElementById("a3").value="";

}

function suan()

{

	var b1 = document.getElementById("a1").value;

	var b2 = document.getElementById("a2").value;

	if(b2=="×"){

		b2 = "*";

	}else if(b2=="÷"){

		b2 = '/';

	}

	var b3 = document.getElementById("a3").value;

	var bbb = new Array(["+"],["-"],["*"],["/"]);

	if(!b1){

		alert("请输入数字1");

		return false;

	}

	if(b2!=bbb[0] && b2!=bbb[1] && b2!=bbb[2] && b2!=bbb[3]){

		alert("请输入运算符");

		return false;

	}

	if(!b3){

		alert("请输入数字2");

		return false;

	}

	if(b2==bbb[0]){

		var b4=Number(b1)+Number(b3);

	}

	else if(b2==bbb[1]){

		var b4=Number(b1)-Number(b3);

	}

	else if(b2==bbb[2]){

		//js乘法不精确会有很多小数点，整体乘一个数再除去它

		b1 = Number(b1)*10000;

		b3 = Number(b3)*10000;

		b4=b1*b3/100000000;

		b1 = b1/10000;

		b3 = b3/10000;

	}

	else if(b2==bbb[3]){

		if(b3==0){

			b4="[除数不能为零]";

		}else{

			b4 = Math.round(Number(b1)/Number(b3));

			var b5=Number(b1)%Number(b3);

			b4=b4+" 余数"+b5;

		}

	}

	if(b2=="*"){

		b2 = "×";

	}else if(b2=="/"){

		b2 = '÷';

	}

	document.getElementById("counter").innerHTML = b1+b2+b3+"="+b4;

	document.getElementById("a1").value="";

	document.getElementById("a2").value="";

	document.getElementById("a3").value="";

}

//keyCode对应键位

keyarr = new Array()

//数字

keyarr[48] = keyarr[96] = "0";

keyarr[49] = keyarr[97] = 1;

keyarr[50] = keyarr[98] = 2;

keyarr[51] = keyarr[99] = 3;

keyarr[52] = keyarr[100] = 4;

keyarr[53] = keyarr[101] = 5;

keyarr[54] = keyarr[102] = 6;

keyarr[55] = keyarr[103] = 7;

keyarr[56] = keyarr[104] = 8;

keyarr[57] = keyarr[105] = 9;

keyarr[110] = keyarr[190] = ".";

//运算符

keyarr[107] = "+";

keyarr[109] = "-";

keyarr[106] = "*";

keyarr[111] = "/";

//退格

keyarr[8] = "backspace";

//结果

keyarr[13] = "=";

/*键盘事件*/

var isPiss = 0;

document.onkeydown = function(event) {

    var e = event || window.event || arguments.callee.caller.arguments[0];

	id = keyarr[e.keyCode];

	if(id){

		if(id=="+" || id=="-" || id=="*" || id=="/"){ //运算

			addtype(id);

		}else if(id=="backspace"){ //退格

			backspace();

		}else if(id=="="){ //结果

			suan();

		}else{ //输入数字

			addnum(id);

		}

	}

};

</script>

<style>

.clear {clear:both; height:0 !important; width:0 !important; overflow:hidden; font-size:0;}

.jisuanqi {width:303px; height:450px; background:#000; overflow:hidden; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; font-family:"Microsoft Yahei";}

.jrow {padding-bottom:5px;}

.num, .type {width:72px; height:86px; overflow:hidden; line-height:86px; text-align:center; float:left; color:#fff; font-size:38px; cursor:pointer;}

.num {background:#343432; margin-right:5px;}

.num:active {background:#181818;}

.type {background:#181818;}

.type:active {background:#343432;}

.clean, .backspace {width:149px; height:86px; overflow:hidden; line-height:86px; text-align:center; color:#fff; font-size:38px; cursor:pointer;}

.clean {background:#343432; float:left;}

.clean:active {background:#181818;}

.backspace {background:#181818; float:right;}

.backspace:active {background:#343432;}

</style>

<div class="jisuanqi">

  <div class="jrow">

    <div class="num" onclick="addnum(7)">7</div>

    <div class="num" onclick="addnum(8)">8</div>

    <div class="num" onclick="addnum(9)">9</div>

    <div class="type" onclick="addtype('/')">÷</div>

    <div class="clear"></div>

  </div>

  <div class="jrow">

    <div class="num" onclick="addnum(4)">4</div>

    <div class="num" onclick="addnum(5)">5</div>

    <div class="num" onclick="addnum(6)">6</div>

    <div class="type" onclick="addtype('*')">×</div>

    <div class="clear"></div>

  </div>

  <div class="jrow">

    <div class="num" onclick="addnum(1)">1</div>

    <div class="num" onclick="addnum(2)">2</div>

    <div class="num" onclick="addnum(3)">3</div>

    <div class="type" onclick="addtype('-')">-</div>

    <div class="clear"></div>

  </div>

  <div class="jrow">

    <div class="num" onclick="addnum('.')">.</div>

    <div class="num" onclick="addnum(0)">0</div>

    <div class="num" onclick="suan()">=</div>

    <div class="type" onclick="addtype('+')">+</div>

    <div class="clear"></div>

  </div>

  <div class="jrow">

    <div class="clean" onclick="clean()">C</div>

    <div class="backspace" onclick="backspace()">←</div>

    <div class="clear"></div>

  </div>

</div>

</body>

</html>

　　

js练习计算器的更多相关文章

  1. 使用html+css+js实现计算器

    使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...

  2. JS中 计算器的简单制作

    今天学习的是JS中的if语句,除此之外老师还教给我们switch语句的用法, 我们用来写了简单计算器的算法,如下: <script> var a=prompt("请输入一个数字& ...

  3. 纯js房贷计算器开源

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS简易计算器的实现，以及代码的优化

    用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. JS实现计算器，带三角函数，根号

    极简主义网页计算器. 实现了按键特效,可响应键盘按键,实时显示计算结果. 可切换模式,拓展高级功能,包括根号.三角函数.括号等. 效果如下: 代码如下: html: <!DOCTYPE html ...

  6. js做计算器

    js文档: function count(){ var a var txt1=document.getElementById("txt1").value;//获取第一个输入框的值 ...

  7. js存款计算器原生小demo

    大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...

  8. JS作计算器

    JavaScript制作计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. js jq计算器

    <html><head><meta http-equiv="Content-type" content="text/html; charse ...

随机推荐

  1. gradle windows上面安装配置

    本文转载自: http://blog.csdn.net/u011546806/article/details/44806513 前提条件 安装jvm,并配置好了java环境变量 安装步骤 1.下载gr ...

  2. Oracle 查询历史数据（转帖）

    回复误删除数据信息. 1.执行 alter table table_name enable row movement; 2.执行 FlashBack table table_name to times ...

  3. C关系运算结果及逻辑运算结果保存

    http://service.exmail.qq.com/

  4. upstream prematurely closed connection while reading response header from upstream

    upstream prematurely closed connection while reading response header from upstream nginx配置uwsgi的时候  ...

  5. LeetCode之链表

    2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The digits ...

  6. spring mvc请求参数中文乱码解决方案

    POST 请求 在web.xml中加上增加过滤器 <filter> <filter-name>encodingFilter</filter-name> <fi ...

  7. python's try&except&else

    [python's try&except&else] python的try&catch有个好用的东西,else,即try&except&else可以共用,els ...

  8. varchar和Nvarchar区别(转)

    Unicode字符集就是为了解决字符集这种不兼容的问题而产生的,它所有的字符都用两个字节表示,即英文字符也是用两个字节表示 如果还为了这个纠结,就直接看看后面的解说,做决定吧. 一般如果用到中文或者其 ...

  9. Python 入门学习（贰）文件/文件夹正则表达式批量重命名工具

    基于 Udacity 的 Python 入门课程 Programming Foundations with Python 基于 Python 2.7 思路 Project 2 是一个去除文件名中所有数 ...

  10. 二叉树垂直遍历 · Binary Tree Vertical Order Traversal

    ［抄题］: 给定二叉树,返回其节点值的垂直遍历顺序. (即逐列从上到下).如果两个节点在同一行和同一列中,则顺序应 从左到右. 给定一个二叉树 {3,9,20,#,#,15,7} 3 /\ / \ 9 ...