[JavaScript]JS初学者:实现html简易计算器的方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<style type="text/css">
	table{
		font-family:"微软雅黑";
		font-size:40px;
		font-weight:bold;
		text-align:center;
	}

	td{
		border:solid 1px #000000;
	}
	td:hover{
		background-color:#99F;
		color:#C3F;
	}
</style>
</head>

<body>
<table width="452" height="464" border="0" id="tab">
  <tr>
    <td height="71" colspan="4" id="result"></td>
  </tr>
  <tr onClick="getValue()">
    <td width="117">C</td>
    <td width="127">.</td>
    <td width="112">←</td>
    <td width="78" bgcolor="#FF9966">÷</td>
  </tr>
  <tr onClick="getValue()">
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td bgcolor="#FF9966">×</td>
  </tr>
  <tr onClick="getValue()">
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td bgcolor="#FF9966">-</td>
  </tr>
  <tr onClick="getValue()">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td bgcolor="#FF9966">+</td>
  </tr>
  <tr>
    <td colspan="3" onClick="getValue()">0</td>
    <td bgcolor="#FF9966" onClick="getResult()">=</td>
  </tr>
</table>
</body>
<script type="text/javascript">
	var num1,num2,Result;//记录数字
	var calculate;//记录运算符
	var already_result = false;

	function getValue(){
       var text = event.srcElement.innerHTML;//获取点击的td的值
	   var result = document.getElementById("result");//最顶部的计算框
		
	   //alert(text);
	   //result.innerHTML += text;
	   if(already_result == true && text!="C"){
			alert("请先按C重置后再进行运算操作");
			return false;  
	   }
	   switch(text){
		   case "C":{
			   result.innerHTML = "";
			   already_result = false;
			   calculate = null;
			   num1 = null;
			   num2 = null;
			   result = null;
			   break;
		   }
		   case "←":{
			   var temp = result.innerHTML.substring(0,result.innerHTML.length-1);
			   result.innerHTML = temp;
			   break;
		   }
		   case "÷":{
			   num1 = result.innerHTML;
			   if(num1 == 0){
				   alert("除数不可为0!");
				   return false;
			   }
			   result.innerHTML = "÷";
			   alert("num1值为:"+num1);
			   calculate = "÷";
			   break;
		   }
		   case "×":{
			   num1 = result.innerHTML;
			   result.innerHTML = "×";
			   alert("num1值为:"+num1);
			   calculate = "×";
			   break;
		   }
		   case "+":{
			   num1 = result.innerHTML;
			   result.innerHTML = "+";
			   alert("num1值为:"+num1);
			   calculate = "+";
			   break;
		   }
		   case "-":{
			   num1 = result.innerHTML;
			   result.innerHTML = "-";
			   alert("num1值为:"+num1);
			   calculate = "-";
			   break;
		   }
		   default:{
			   if(result.innerHTML == "×" || result.innerHTML == "÷" || result.innerHTML == "-" || result.innerHTML == "+" || already_result == true){
				   result.innerHTML = "";
				   result.innerHTML += text;
			   }
			   else{
				   result.innerHTML += text;
			   }
			   break;
		   }
	   }
	}

	function getResult(){
		num2 = result.innerHTML;
		switch(calculate){
			case "÷":{
				Result = num1 / num2;
				document.getElementById("result").innerHTML = Result;
				already_result = true;
				break;
			}
			case "×":{
				Result = num1 * num2;
				document.getElementById("result").innerHTML = Result;
				already_result = true;
				break;
			}
			case "-":{
				Result = num1 - num2;
				document.getElementById("result").innerHTML = Result;
				already_result = true;
				break;
			}
			case "+":{
				Result = num1 + num2;
				document.getElementById("result").innerHTML = Result;
				already_result = true;
				break;
			}
		}
	}
</script>
</html>

就是没有美化,想尝试做一个鼠标经过时把td背景色更改,移开再改回来的,结果不会。。。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值