js实现计算器效果

<!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>
效果图：