JS 计算器

本文介绍了一个简单的网页计算器的实现过程,包括HTML结构布局、JavaScript逻辑处理等关键步骤。该计算器支持基本的数学运算,如加减乘除及百分比计算。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


<div id="warp">


   <p> By- FireBird_one </p>
   
   <input class="f-text" type="text" readonly = "readonly" maxlength="9" value="0"/>
   
   <ul class="clearfix">
     <li class="btu-1"><a href="javascript:;">c</a></li>
     <li class="btu-1"><a href="javascript:;">%</a></li>
     <li class="btu-1"><a href="javascript:;">÷</a></li>
     <li class="btu-1"><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="btu-1"><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="btu-1"><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="btu-2"><a href="javascript:;">=</a></li>
     <li class="btu-3"><a href="javascript:;">0</a></li>
     <li><a href="javascript:;">.</a></li>
   </ul>
   
 <input id="formula" type="text" readonly value="">
 

</div>


window.onload = function(){
 
 var warp = document.getElementById("warp");
 var aA = warp.getElementsByTagName("a");
 var aInput = warp.getElementsByTagName("input")[0];
 var oFormula = document.getElementById("formula");
 var s = false;
 var i = 0;

 for (i = 0; i < aA.length; i++){

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
}
       }
 
     };




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值