使用HTML5实现的漂亮网页计算器
[ 录入者:91ctc | 时间:2015-05-17 14:29:04
| 作者: 91ctc| 来源:本站原创
| 浏览: 次 ]
分享一个使用HTML5编写的漂亮的网页计算器，效果如图。
直接给代码：
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/acurec/123/edit
-->
<head>
<meta charset=utf-8 />
<title>Calculator</title>
<style id="jsbin-css">
div,span{
margin:0;padding:0;
font-weight:bold;
font: bold 16px Arial, sans-serif;
/*禁止选中文本*/
-moz-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
user-select:none;
}
body{
background:radial-gradient(circle,#fff,#aaa);
background:-webkit-radial-gradient(circle,#fff,#aaa);
background:-o-radial-gradient(circle,#fff,#aaa);
background:-moz-radial-gradient(circle,#fff,#aaa);
background-size:cover;
}
#calculator{
width:325px;
height:auto;
margin:100px auto;
padding:20px;
background:linear-gradient(#9dd2ea, #8bceec);
background:-o-linear-gradient(#9dd2ea, #8bceec);
background:-webkit-linear-gradient(#9dd2ea, #8bceec);
background:-moz-linear-gradient(#9dd2ea, #8bceec);
border-radius:5px;
box-shadow:0 7px 8px #0000ff
}
.keys,.head{overflow:hidden;}
.keys span,.clear{
float:left;
width:66px;
height:40px;
margin:0 5px 10px 8px;
text-align:center;
line-height:40px;
border-radius:3px;
background:#eee;
box-shadow:0 5px 1px #999;
cursor:pointer;
transition:all 0.3s ease;
}
.keys span:hover{
background:#87cefa;
box-shadow:0 5px 1px #1e90ff;
color:#fff;
}
.keys .sign{
background:#fffacd;
}
.clear{
float:left;
background:#ffb6c1;
box-shadow:0 5px 1px #ff86c1;
}
.clear:hover{
background:#ff96a1;
box-shadow:0 5px 1px #ff4691;
color:#fff;
}
.show{
width:213px;
height:40px;
float:right;
margin:0 16px 5px 0;
border-radius:3px;
background:#999;
font-size:20px;
line-height:40px;
text-align:right;
padding-right:10px;
box-shadow:inset 0 4px 5px #333;
}
</style>
</head>
<body>
<div id="calculator">
<div class="head">
<span class="clear">c</span>
<div class="show"></div>
</div>
<div class="keys">
<span>7</span>
<span>8</span>
<span>9</span>
<span class="sign">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="sign">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="sign">*</span>
<span>0</span>
<span>.</span>
<span>=</span>
<span class="sign">/</span>
</div>
</div>
<script>
window.onload=function()
{
var oShow=getByClass("calculator","show")[0];
var aNum=document.getElementById("calculator").getElementsByTagName("span");
for(var i=0,iLen=aNum.length;i<iLen;i++)
{
aNum[i].onclick=function()
{
var oShowVal=oShow.innerHTML;
var oNumVal=this.innerHTML;
var num1,num2=null;
num1=oShowVal;
//判断按键
if(oNumVal=="c")
{
oShow.innerHTML="";
}
else if(oNumVal=="=")
{
var oResult=eval(oShowVal);
oShow.innerHTML=oResult;
}
else
{
oShow.innerHTML+=oNumVal;
}
}
}
}
function getByClass(root,sClass)
{
var obj=document.getElementById(root);
var arr=[];
var aItems=obj.getElementsByTagName("*");
for(var i=0;i<aItems.length;i++)
{
if(aItems[i].className==sClass)
{
arr.push(aItems[i]);
}
}
return arr;
}
</script>
</body>
</html>演示效果：
http://www.91ctc.com/onlineShow/20150517/html5Calculator/html5Calculator.html
{xiangguan_list}
推荐文章
热门文章