[javascript]代码库 |
<!DOCTYPE html> |
<html> |
<head> |
<title>计算器</title> |
<meta charset= "utf-8" /> |
<style type= "text/css" > |
.panel { |
border: 4px solid #ddd; |
width: 192px; |
margin: 100px auto; |
/*border-radius: 6px;*/ |
} |
.panel p, .panel input { |
font-family: "微软雅黑" ; |
font-size: 20px; |
margin: 4px; |
float: left; |
/*border-radius: 4px;*/ |
} |
.panel p { |
width: 122px; |
height: 26px; |
border: 1px solid #ddd; |
padding: 6px; |
overflow: hidden; |
} |
.panel input { |
width: 40px; |
height: 40px; |
border:1px solid #ddd; |
} |
</style> |
<script type= "text/javascript" > |
window.onload= function (){ |
//给div绑定单击事件 |
var div = document.getElementById( "jsq" ); |
div.onclick = function (e){ |
//获取事件源 |
var obj = e.srcElement || e.target; |
//从中找出按钮 |
console.log(1); |
if (obj.nodeName == "INPUT" ){ |
var p = document.getElementById( "screen" ); |
//对不同的按钮做不同的处理 |
if (obj.value== "C" ){ |
p.innerHTML = "" ; |
} else if (obj.value== "=" ){ |
try { |
p.innerHTML = eval(p.innerHTML); |
} catch (ex){ |
p.innerHTML = "Error" ; |
} |
} else { |
p.innerHTML +=obj.value; |
} |
} |
} |
} |
</script> |
</head> |
<body> |
<div class= "panel" id= "jsq" > |
<div> |
<p id= "screen" ></p> |
<input type= "button" value= "C" > |
<div style= "clear:both" ></div> |
</div> |
<div> |
<input type= "button" value= "7" > |
<input type= "button" value= "8" > |
<input type= "button" value= "9" > |
<input type= "button" value= "/" > |
|
<input type= "button" value= "4" > |
<input type= "button" value= "5" > |
<input type= "button" value= "6" > |
<input type= "button" value= "*" > |
|
<input type= "button" value= "1" > |
<input type= "button" value= "2" > |
<input type= "button" value= "3" > |
<input type= "button" value= "-" > |
|
<input type= "button" value= "0" > |
<input type= "button" value= "." > |
<input type= "button" value= "=" > |
<input type= "button" value= "+" > |
|
<div style= "clear:both" ></div> |
</div> |
</div> |
</body> |
</html> |
初级程序员
by: lbq 发表于:2017-09-13 19:19:23 顶(0) | 踩(0) 回复
厉害
回复评论