Tip: you can modify some code before running
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>body,div,p,ul,li,input{margin:0;padding:0;}ul{list-style-type:none;}a{color:#fff;outline:none;text-decoration:none;}body{font:700 24px/1.5 Arial;}#calc{position:relative;width:300px;background:#000;margin:10px auto;}#calc p{color:#fff;text-align:right;font:12px/20px Arial;padding:0 5px;}#calc .f-text{border:0;width:290px;height:84px;text-align:right;font:700 50px/84px Arial;background:url(img/inputBg.jpg) repeat-x;padding:0 5px;}#calc ul{position:relative;overflow:hidden;zoom:1;background:url(img/bg.jpg);padding:0 0 17px 8px;}#calc ul li{float:left;width:63px;height:41px;margin:17px 10px 0 0;}#calc ul li a{display:block;width:63px;height:41px;line-height:41px;text-align:center;background:url(img/btn.png) no-repeat;}#calc ul li a:hover{background-position:-63px 0;}#calc ul li.btn-1 a{background-position:0 -41px;}#calc ul li.btn-1 a:hover{background-position:-63px -41px;}#calc ul li.btn-2{position:absolute;top:174px;right:0;height:99px;}#calc ul li.btn-2 a{height:99px;line-height:99px;background-position:0 -164px;}#calc ul li.btn-2 a:hover{background-position:-63px -164px;}#calc ul li.btn-3{width:136px;}#calc ul li.btn-3 a{width:136px;background-position:0 -82px;}#calc ul li.btn-3 a:hover{background-position:0 -123px;}#formula{position:absolute;top:20px;background:none;border:0;font:700 12px/1.5 Arial;width:280px;padding:3px 15px 0 5px;text-align:right;}</style><script>window.onload = function (){var oCalc = document.getElementById("calc");var aA = oCalc.getElementsByTagName("a");var aInput = oCalc.getElementsByTagName("input")[0];var oFormula = document.getElementById("formula");var s = false;var i = 0;for (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><title>Web calculator</title></head><body><div id="calc"> <p>By-Ferris QQ: 173045138</p> <input class="f-text" type="text" readonly="readonly" maxlength="9" value="0" /> <ul> <li class="btn-1">C</li> <li class="btn-1">%</li> <li class="btn-1">Bytes</li> <li class="btn-1">×</li> <li>7</li> <li>8</li> <li>9</li> <li class="btn-1">-</li> <li>4</li> <li>5</li> <li>6</li> <li class="btn-1">+</li> <li>1</li> <li>2</li> <li>3</li> <li class="btn-2">=</li> <li class="btn-3">0</li> <li>.</li> </ul> <input id="formula" type="text" readonly="readonly" value="" /></div></body></html></td> </tr></table>
Tip: you can modify some code before running