功能描述：
+-*/、平方、开方、退格-清零、求余、另一累赘换肤器
功能实现概述
主要分四部分：头部<计算器>、上面<显示屏和清零>、主体<数字键和其余功能键>、结尾<版权>
主要是通过在整个主体和清零功能键上设置onclick事件,方法的实现步骤：
得到点击的节点(IE:srcElement,FF:target<这个顺序不知道对不对>)
判断节点类型(只考虑并接收按钮<input type="button">)
"="---计算出结果
"sqrt"--计算开方结果
"^2"--计算平方结果
"<="--退格
"c"---清零
其他的键就直接将该键的value追加到显示屏的末尾即可
另加一个换肤的功能：点击右上角的皮肤符号，可以变换主体区的按钮的边角弧度
此计算器模板由老师讲解,但是是用公用电脑敲的,所以没有保存，此版本由自己完成。
具体参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精简计算器</title>
<script type="text/javascript">
function cal(e){
var sqrt=Math.sqrt;
var abs=Math.abs;
var exeprice=document.getElementById("screen");
var obj=event.srcElement;
if(obj==null){
obj=event.target;
}
if(obj.nodeName=="INPUT" && obj.type=="button"){//确认是按钮
var objNum=obj.value;
if(objNum=="="){
exeprice.value=eval("("+exeprice.value+")");
}else if(objNum=="sqrt"){
if(isNaN(eval(exeprice.value))){
alert("请输入数字计算");
return;
}
exeprice.value=eval("sqrt("+exeprice.value+")");
}else if(objNum=="^2"){
if(isNaN(eval(exeprice.value))){
alert("请输入数字计算");
return;
}
exeprice.value=eval("("+(exeprice.value*exeprice.value)+")");
}else if(objNum=="<="){
exeprice.value=Math.floor(exeprice.value/10);
}else if(objNum=="c"){
exeprice.value="";
}else{
exeprice.value+=obj.value;
}
}
}
var radius=0;
var rarr=["0px","3px","8px","12px"];
function changeradius(){
var key=document.getElementById("key");
var node=key.getElementsByTagName("input");
radius+=4;
for(var i=0;i<node.length;i++){
node[i].style.borderRadius=radius%21+"px";
}
}
</script>
<style type="text/css">
#header p{
float:left;
margin-left:7px;
}
.cls{
margin-top: 16px;
margin-left: 15px;
}
#header p input{
width: 188px;
display: block;
height:35px;
}
#cal{
width: 260px;
margin: 0 auto;
background-color: #ccc;
border-radius:10px;
border:4px solid #ddd;
}
#header .cls,#key input{
height: 40px;
width: 40px;
border-radius:30px;
}
#key input{
display: block;
float:left;
padding:7px;
margin:6px;
}
h1{
display: block;
margin: 0 auto;
text-align: center;
border-radius:6px 6px 0px 0px;
background-color: #000;
color:#fff;
padding: 6px;
}
#info{
margin-top: 15px;
display: block;
margin-bottom: 0px;
text-align: center;
border-radius:0px 0px 6px 6px;
background-color: #eee;
}
img{
float:right;
}
</style>
</head>
<body>
<div id="cal">
<h1>计算器<img src="bg.png" onclick="changeradius();"></h1>
<div id="header">
<p><input type="text" id="screen"></p>
<input type="button" value="c" class="cls" onclick="cal(event);">
<div style="clear: both;"></div>
</div>
<div id="key" onclick="cal(event);">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">
<input type="button" value="sqrt">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">
<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="^2">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="-">
<input type="button" value="<=">
<div style="clear: both;"></div>
<p id="info"><span>right reserved ©jams</span></p>
</div>
</div>
</body>
</html>
截图如下
时间： 2024-11-07 22:45:07