网页计算器代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>计算器</title>
<style type="text/css">
body{padding:0;margin:0;}
#eq{margin:10px 3px 3px 9px;width:40px;height:24px;}
input{width:130px;height:20px;margin:3px;}
.cal{width:200px;border:2px solid #999;background:#eee;margin:0 auto;}
.cal div{width:186px;padding:6px;}
.cal div button{display:block;float:right;width:40px;height:24px;margin:3px;} </style>
<script type="text/javascript">
function action(e){
//计算器动作处理；
//检查到底按下了那个按钮；
var node = e.srcElement || e.target;//只有按下button时候才处理事件；
if(node.nodeName!= "BUTTON"){
return;
}
var btn = node.innerHTML;
console.log(btn + "动作！");
var screen = document.getElementById("screen");
if(btn == "="){
var exp = screen.value;
try{
var r =eval("("+exp+")");
screen.value=r;
}catch(e){
console.log(e);
screen.innerHTML("真遗憾(T_T)");
}
}else if(btn == "c"){
screen.value = "" ;
}else{
screen.value += btn ;
}
}
</script>
</head>
<body>
<h2>计算器</h2>
<div class="cal" onclick="action(event);">
<button id="eq">=</button><input type="text" id="screen" readonly>
<div>
<button>/</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>*</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button>0</button>
<button>.</button>
<button>c</button>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>。