JavaScript + HTML的表格 实现简单计算器
首先看效果图
有点小bug,就是点击表格外会把不想出现的东西显现到input里
一，写出HTML的主体布局
<body>
<div id="main" οnclick="cal(event);">
<table id="numb">
<tr>
<td colspan="4" ><input id="result"> </td>
</tr>
<tr >
<td colspan="2" >clear</td>
<td colspan="2" >back</td>
</tr>
<tr>
<td >1</td>
<td >2</td>
<td >3</td>
<td >4</td>
</tr>
<tr>
<td >5</td>
<td >6</td>
<td >7</td>
<td >8</td>
</tr>
<tr>
<td >9</td>
<td >0</td>
<td >.</td>
<td >=</td>
</tr>
<tr>
<td >+</td>
<td >-</td>
<td >*</td>
<td >/</td>
</tr>
</table>
</div>
</body>
为了使效果更好，加入CSS
大家可以写出更好的CSS，我这比较喜欢酷黑，简单哈哈哈
<style type="text/css">
#main{
width: 80%;
height: auto;
margin-left: 10%;
margin-top: 10%;
}
#numb{
table-layout: fixed;
word-break: break-all;
width:60% ;
height: 100%;
margin-top: 20px;
margin-left: 20px;
background: black;
border: 1px solid white;
border-collapse: collapse;
}
#numb tr td{
text-align: center;
color: white;
width: 10px;
height: 10px;
font-size: 20px;
border-collapse: collapse;
border: 1px solid white;
padding: 2px;
}
#result{
margin: 1px;
width: 90%;
height: 100%;
padding-left: 10px;
position: relative;
}
</style>
最后JavaScript
<script>
function cal(e){
var obj = e.target||e.srcElement;//得到事件
var v = obj.innerHTML; //得到点击控件的内容
var result = document.getElementById("result"); //得到显示的控件
if(v=="clear"){
result.value="";//清零
}
else if(v=="="){
var exp = result.value;//保存得到的字符串
try{
var lresult= eval("("+exp+")");//计算结果
result.value=lresult;//显示结果
}catch (e) {
console.log(e);
result.value="error";
}
}else if(v=="back"){
result.value=result.value.slice(0,result.value.length-1);//使输入的回滚，运用slice函数，截取字符串
} else {
if(result.value==0){//判断第一个输入的是否为0
result.value="";
}
result.value+=v;//拼接点击事件获得的内容
}
}
</script>
最主要的是JavaScript的eval函数，外加逻辑判断，其中有个back功能需要用到slice函数，具体功能见JavaScript基础介绍
最后完结，贴出完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
#main{
width: 80%;
height: auto;
margin-left: 10%;
margin-top: 10%;
}
#numb{
table-layout: fixed;
word-break: break-all;
width:60% ;
height: 100%;
margin-top: 20px;
margin-left: 20px;
background: black;
border: 1px solid white;
border-collapse: collapse;
}
#numb tr td{
text-align: center;
color: white;
width: 10px;
height: 10px;
font-size: 20px;
border-collapse: collapse;
border: 1px solid white;
padding: 2px;
}
#result{
margin: 1px;
width: 90%;
height: 100%;
padding-left: 10px;
position: relative;
}
</style>
<script>
function cal(e){
var obj = e.target||e.srcElement;
var v = obj.innerHTML;
var result = document.getElementById("result");
if(v=="clear"){
result.value="";
}
else if(v=="="){
var exp = result.value;
try{
var lresult= eval("("+exp+")");
result.value=lresult;
}catch (e) {
console.log(e);
result.value="error";
}
}else if(v=="back"){
result.value=result.value.slice(0,result.value.length-1);
} else {
if(result.value==0){
result.value="";
}
result.value+=v;
}
}
</script>
</head>
<body>
<div id="main" οnclick="cal(event);">
<table id="numb">
<tr>
<td colspan="4" ><input id="result"> </td>
</tr>
<tr >
<td colspan="2" >clear</td>
<td colspan="2" >back</td>
</tr>
<tr>
<td >1</td>
<td >2</td>
<td >3</td>
<td >4</td>
</tr>
<tr>
<td >5</td>
<td >6</td>
<td >7</td>
<td >8</td>
</tr>
<tr>
<td >9</td>
<td >0</td>
<td >.</td>
<td >=</td>
</tr>
<tr>
<td >+</td>
<td >-</td>
<td >*</td>
<td >/</td>
</tr>
</table>
</div>
</body>
</html>
