<!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:#ccc;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;}
#calc?ul?li?a:hover{background:red;}
#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:blue;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>網頁計算器</title>
</head>
<body>
<div?id="calc">
????<p>By?-?Ferris?QQ:21314130</p>
????<input?class="f-text"?type="text"?readonly="readonly"?maxlength="9"?value="0"?/>
????<ul>
????????<li?class="btn-1"><a?href="javascript:void(0)">c</a></li>
????????<li?class="btn-1"><a?href="javascript:void(0)">%</a></li>
????????<li?class="btn-1"><a?href="javascript:void(0)">÷</a></li>
????????<li?class="btn-1"><a?href="javascript:void(0)">×</a></li>
????????<li><a?href="javascript:void(0)">7</a></li>
????????<li><a?href="javascript:void(0)">8</a></li>
????????<li><a?href="javascript:void(0)">9</a></li>
????????<li?class="btn-1"><a?href="javascript:void(0)">-</a></li>
????????<li><a?href="javascript:void(0)">4</a></li>
????????<li><a?href="javascript:void(0)">5</a></li>
????????<li><a?href="javascript:void(0)">6</a></li>
????????<li?class="btn-1"><a?href="javascript:void(0)">+</a></li>
????????<li><a?href="javascript:void(0)">1</a></li>
????????<li><a?href="javascript:void(0)">2</a></li>
????????<li><a?href="javascript:void(0)">3</a></li>
????????<li?class="btn-2"><a?href="javascript:void(0)">=</a></li>
????????<li?class="btn-3"><a?href="javascript:void(0)">0</a></li>
????????<li><a?href="javascript:void(0)">.</a></li>
????</ul>
????<input?id="formula"?type="text"?readonly="readonly"?value=""?/>
</div>
</body>
</html>這個switch? case函數中的cunt是用來干嘛的？還有可以詳解一下這個js代碼函數嗎？謝謝！
麻煩大神幫我解釋一下這個js計算器的代碼？
慕粉3686312
2016-10-23 00:35:49
