网页计算器

（1）功能描述：

　　在网页上实现一个计算器

（2）实现代码：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
    <div id="box">
        <p>By-白小虫</p>
        <input type="text" class="f-text" readonly="readonly" value="0" maxlength="9" />
        <ul>
            <li class="btn1"><a href="javascript:;">C</a></li>
            <li class="btn1"><a href="javascript:;">%</a></li>
            <li class="btn1"><a href="javascript:;">÷</a></li>
            <li class="btn1"><a href="javascript:;">×</a></li>
            <li><a href="javascript:;">7</a></li>
            <li><a href="javascript:;">8</a></li>
            <li><a href="javascript:;">9</a></li>
            <li class="btn1"><a href="javascript:;">-</a></li>
            <li><a href="javascript:;">4</a></li>
            <li><a href="javascript:;">5</a></li>
            <li><a href="javascript:;">6</a></li>
            <li class="btn1"><a href="javascript:;">+</a></li>
            <li><a href="javascript:;">1</a></li>
            <li><a href="javascript:;">2</a></li>
            <li><a href="javascript:;">3</a></li>
            <li class="btn2"><a href="javascript:;">=</a></li>
            <li class="btn3"><a href="javascript:;">0</a></li>
            <li><a href="javascript:;">.</a></li>
        </ul>
        <input type="text" id="formula" readonly="readonly" value="" />
    </div>
</body>
</html>

CSS:

<style>
    *{margin: 0px;padding: 0px;}
    li{list-style: none;}
    body{font: 700 24px/1.5 Arial;}
    a{text-decoration: none;color: #fff;}
    #box{width: 300px;background-color: #000;margin: 20px auto;position: relative;overflow: hidden;}
    #box p{color: #fff;font-size: 12px;text-align: right;padding: 0 5px;}
    #box .f-text{height: 84px;padding: 0 5px;width: 290px;background: url(inputBg.jpg) repeat-x;font: 700 50px/84px Arial;text-align: right;border: none;}
    #box ul{overflow: hidden;background: url(bg.jpg) repeat;position: relative;padding: 0 0 17px 8px}
    #box ul li{float: left;width: 63px;height: 41px;margin: 17px 10px 0 0;}
    #box ul li a{display: block;height: 41px;line-height: 41px;width: 63px;background: url(btn.png) no-repeat;text-align: center;}
    #box ul li a:hover{background-position: -63px 0;}
    #box ul li.btn1 a{background-position: 0 -41px;}
    #box ul li.btn1 a:hover{background-position: -63px -41px;}
    #box ul li.btn2{height: 99px;position: absolute;top: 174px;right: 0;}
    #box ul li.btn2 a{height: 99px;line-height: 99px;background-position: 0 -164px;}
    #box ul li.btn2 a:hover{background-position: -63px -164px;}
    #box ul li.btn3{width: 136px;}
    #box ul li.btn3 a{width: 136px;background-position: 0 -82px;}
    #box ul li.btn3 a:hover{background-position: 0 -123px;}
    #formula{position: absolute;top: 20px;left: 0;height: 20px;line-height: 20px;background: none;border: none;text-align: right;font: 700 12px/1.5 Arial;padding: 3px 15px 0 5px;width: 280px;}
</style>

JS:

<script>
    window.onload=function(){
        var oBox = document.getElementById('box');
        var aA = oBox.getElementsByTagName('a');
        var aInput = document.getElementsByTagName('input')[0];
        var oFormula = document.getElementById('formula');
        var s = false;
        var i =0;

        for(var i=0;i<aA.length;i++){
            aA[i].onfocus=function(){
                this.blur();
            };
            aA[i].onclick=function(){
                switch(this.innerHTML){
                    case 'C':
                            aInput.value=0;
                            oFormula.value='';
                            break;
                    case '%':
                            count('%');
                            break;
                    case '÷':
                            count("/")
                            break;
                    case '×':
                            count("*")
                            break;
                    case '-':
                            count("-")
                            break;
                    case '+':
                            count("+")
                            break;
                    case '=':
                            s || (oFormula.value += aInput.value);
                            aInput.value = eval(oFormula.value.replace(/\%/*-+/,''));
                            aInput.value = aInput.value.substr(0,10).replace("NaN",0);
                            s = true;
                            break;
                    case ".":
                            if(aInput.value.search(/[.\%/*-+]/) != -1)
                            break;
                    default:
                            s && (aInput.value = 0, oFormula.value = "", s = false);
                            aInput.value.length < 10 && (aInput.value = (aInput.value + this.innerHTML).replace(/^[0\%/*-+](d)/,"$1"));

                }
            };
        };

        function count(a){
            if(s){
                oFormula.value = aInput.value+a;
                aInput.value = a;
                s = false;
            }else{
                /[\%/*-+]$/.test(aInput.value) || (oFormula.value += aInput.value);
                aInput.value = a;
                /[\%/*-+]$/.test(oFormula.value) || (oFormula.value += aInput.value);
                oFormula.value = oFormula.value.slice(-1) != a ? oFormula.value.replace(/.$/,a) : oFormula.value
            }
        };


    }
</script>

(3)效果图如下所示：

素材图片如下：

1、 2、 3、

高否？富否？帅否？否？滚去学习！