当前位置： 移动技术网 > IT编程>网页制作>CSS > js练习计算器

js练习计算器

2019年05月01日  | 移动技术网IT编程  | 我要评论

云南孟连事件,古堡决斗,115网盘提取文件

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>

　　

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网