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. MySQL性能调优 – 你必须了解的15个重要变量

    1.DEFAULT_STORAGE_ENGINE 如果你已经在用MySQL 5.6或者5.7,并且你的数据表都是InnoDB,那么表示你已经设置好了.如果没有,确保把你的表转换为InnoDB并且设置d ...

  2. bzoj2505: tickets

    Description          有一位售票员给乘客售票,对于每位乘客,他会卖出多张连续的票,直到已卖出的编号的所有位置上的数的和不小于给定的正数k.然后他会按照相同的规则给下一位乘客售票.初 ...

  3. mac电脑安装selenium 记录

    1.使用终端去命令安装 sudo easy_install selenium 参考:https://www.cnblogs.com/nichoc/p/5543654.html 2.听说驱动放在 /us ...

  4. SpringBoot入门篇--对于JSON数据的返回以及处理二

    我们在进行开发的过程的难免会进行对象的返回,比如一个用户对象User,以及一个集合list,Map等等.在这篇博客中我们就是需要学习一下怎么对一个对象中某些属性的处理.需要补充的一点就是SpringB ...

  5. 并发包学习（一）-Atomic包小记

    此篇是J.U.C学习的第一篇Atomic包相关的内容,希望此篇总结能对自己的基础有所提升.本文总结来源自<Java并发编程的艺术>第七章并配以自己的实践理解.如有错误还请指正. 一.案例分 ...

  6. SQL Server实时同步更新远程数据库遇到的问题

    工作中遇到这样的情况,需要在更新表TableA(位于服务器ServerA 172.16.8.100中的库DatabaseA)同时更新TableB(位于服务器ServerB 172.16.8.101中的 ...

  7. 图片拼接SIFT

    图片拼接 SIFT: 特征点处理:位置插值,去除低对比度点,去除边缘点 方向估计 描述子提取 下面的程序中使用: 第一步: 使用SIFT生成器提取描述子和特征 第二步: 使用KNN检测来自A,B图的S ...

  8. 跨域资源共享/option 请求产生原因

    https://blog.csdn.net/hfahe/article/details/7730944

  9. 迷你MVVM框架 avalonjs 沉思录 第3节 动态模板

    模板的发明是编程史上的一大里程碑,让我们摆脱了烦锁且易出错的字符串拼接,维护性大大提高. 都在JSP,ASP时代,人们已经学会使用include等语句,将多个页面片断拼接成一个页面. 此外,为了将数据 ...

  10. SpringMVC 执行流程