首页 > 代码库 > 简易计算器实现优化
简易计算器实现优化
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>calculator-小太阳</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
#counter {width: 500px; height: 420px; position: relative; }
#counter h2 { line-height: 42px; padding-left: 15px; font-size: 14px; font-family: arial; color:#FFF; }
#counter a {font-weight: normal; text-decoration: none; color:#FFF; }
#counter a:hover {text-decoration: underline; }
#bg { width: 280px; height: 200px; border: 3px solid #004f69; background: #FFFFFF; filter: alpha(opacity=80); opacity: 0.8; position: absolute; left: 50%; top: 115px; margin-left:-141px;}
#counter_content { width: 250px; position: absolute; top: 130px; left: 130px; z-index: 1; }
#counter_content h3 { margin-bottom: 10px; }
#counter_content h3 input { width: 223px; height: 30px; line-height: 30px; padding: 0 10px; background: url(images/ico.png) no-repeat; text-align: right; color: #333; font-size: 14px; font-weight: bold; }
#counter_content ul { width: 250px; }
#counter_content li { width: 60px; height: 30px; line-height: 30px; float: left; background: url(images/ico.png) no-repeat -303px 0; text-align: center; color: #fff; cursor: pointer; margin: 0 1px 4px 0; }
#counter_content .active { background: url(images/ico.png) no-repeat -244px 0; }
#counter p { width: 500px; position: absolute; bottom: 20px; left: 0; color: #FFF; text-align: center; font-size: 12px; }
</style>
<body>
<div id="counter">
<div id="counter_content">
<h3><input id="input1" type="text" value="http://www.mamicode.com/0" /></h3>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
<li>+</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>-</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>×</li>
<li>0</li>
<li>C</li>
<li>=</li>
<li>÷</li>
</ul>
</div>
<div id="bg"></div>
<p>power by dingyue </p>
</div>
</body>
</html>
<script type="text/javascript">
/* andy Ding */
var counter =(function(){
var sNum1=‘‘;
var val=‘‘;
//是否需要清除输入框中已有的内容
var bNeedClear=false;
var count = function(iNum1, iNum2, val){
var iResult=0;
switch(val){
case ‘ב:
iResult=iNum1*iNum2;
break;
case ‘+‘:
iResult=iNum1+iNum2;
break;
case ‘-‘:
iResult=iNum1-iNum2;
break;
case ‘÷‘:
iResult=iNum1/iNum2;
break;
default:
iResult=iNum2;
}
return iResult;
};
var doInput= function(){
var oInput=document.getElementById(‘input1‘);
//alert(""+this.innerHTML);
var sHtml=this.innerHTML.replace(‘ ‘,‘‘);
switch(sHtml){
case ‘=‘:
oInput.value=count(parseInt(sNum1), parseInt(oInput.value), val);
sNum1=‘‘;
val=‘‘;
bNeedClear=true;
break;
case ‘+‘:
case ‘-‘:
case ‘ב:
case ‘÷‘:
bNeedClear=true;
if(sNum1.length!=0){
oInput.value=count(parseInt(sNum1), parseInt(oInput.value), val);
}
val=sHtml;
sNum1=oInput.value;
break;
case ‘C‘:
oInput.value=‘0‘;
sNum1=‘‘;
val=‘‘;
break;
default: //数字
if(bNeedClear){
oInput.value=parseInt(sHtml, 10);
bNeedClear=false;
}
else{
oInput.value=parseInt(oInput.value+sHtml, 10);
}
break;
}
};
var init = function(){
var aLi=document.getElementsByTagName(‘li‘);
var i=0;
for(i=0;i<aLi.length;i++){
aLi[i].onmousedown=doInput;
aLi[i].onmouseover=function ()
{
this.className=‘active‘;
};
aLi[i].onmouseout=function ()
{
this.className=‘‘;
};
}
};
return {
init:init
}
})();
counter.init();
</script>
<!-- 计算器原生写法 -->
简易计算器实现优化
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。