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

最新推荐文章于 2024-06-06 09:46:18 发布

王康伯巴奇

最新推荐文章于 2024-06-06 09:46:18 发布

阅读量562

点赞数 1

分类专栏： JS 文章标签： HTML JS CSS

本文链接：https://blog.csdn.net/David_C_Java/article/details/83759445

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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
评论
[JavaScript]JS初学者：实现html简易计算器的方法

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;简易计算器&lt;/title&gt;&lt;style type="text/css"&gt; table{ font-family:"微软雅黑";
复制链接

扫一扫

专栏目录