<!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背景色更改,移开再改回来的,结果不会。。。