JS实现简单计算器

效果如上图:

CSS代码:


HTML 代码:


JS代码:

<script>
        var sNum1='';//储存
        var sOpr='';

        var bNeedClear=false;    //是否需要清除输入框中已有的内容
       //计算函数传参 输入得数字 和 运算符号
        function calc(iNum1, iNum2, sOpr)
        {
            var iResult=0;
            switch(sOpr)
            {
                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;
        }
       //获得输入的值 和 符号
        function doInput()
        {
            var oInput=document.getElementById('input1');
            var sHtml=this.innerHTML.replace(' ','');

            switch(sHtml)
            {
                case '=':
                    oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);

                    sNum1='';
                    sOpr='';
                    bNeedClear=true;
                    break;
                case '+':
                case '-':
                case '×':
                case '÷':
                    bNeedClear=true;

                    if(sNum1.length!=0)
                    {
                        oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);
                    }

                    sOpr=sHtml;

                    sNum1=oInput.value;
                    break;
                case 'C':
                    oInput.value='0';
                    sNum1='';
                    sOpr='';
                    break;
                default:    //数字
                    if(bNeedClear)
                    {
                        oInput.value=parseInt(sHtml, 10);
                        bNeedClear=false;
                    }
                    else
                    {
                        oInput.value=parseInt(oInput.value+sHtml, 10);
                    }
                    break;
            }
        }

        window.οnlοad=function ()
        {
            var aLi=document.getElementsByTagName('li');
            var i=0;

            for(i=0;i<aLi.length;i++)
            {
                aLi[i].οnmοusedοwn=doInput;
                aLi[i].οnmοuseοver=function ()
                {
                    this.className='active';
                };

                aLi[i].οnmοuseοut=function ()
                {
                    this.className='';
                };
            }
        };
    </script>



  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值