（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、