计算器案例

计算器案例

1.声明变量-添加事件监听-绑定事件
2.函数用条件语句来写:
(1)先判断是数字或小数点
①屏幕上的数字是否为0(若为0,输入的是“.”,则显示“0.”,输入的不是点则显示此文本)
②屏幕上是否有点-如果再次输入的是点(有点不给-没点给点);否则拼接此文本
(2)除数字和小数点以外的按钮:
考略n*:(设置布尔类型的值来切换数字和符号)
如果输入的最后一个字符是“=”,截取符号前面的数字做运算,取最后一个字符,拼接起来做运算;否则直接拼接;
(3)其他符号(+ - * / = AC DEL ):记录当前屏幕上的值,实现各符号对应的方法 eval();
3.计算器的页面
在这里插入图片描述
4.代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        table{
            margin:0 auto;
            border: 1px solid #000;
            border-collapse: collapse;
            width:300px;
        }
        td{
            width:70px;
            height:70px;
            border:1px solid #000;
        }
        .btn{
            width:100%;
            height:100%;
            font-size: 20px;
        }
        #scipt{
            width:100%;
            height:100%;
            outline: none;
            border-style: none;
            text-align: right;
            font-size: 25px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td colspan="4">
            <input type="text" id="scipt" value="0" disabled/>
        </td>
    </tr>
    <tr>
        <td colspan="2"><button class="btn clear">AC</button></td>
        <td colspan="2"><button class="btn del">DEL</button></td>
    </tr>
    <tr>
        <td><button class="btn">7</button></td>
        <td><button class="btn">8</button></td>
        <td><button class="btn">9</button></td>
        <td><button class="btn">*</button></td>
    </tr>
    <tr>
        <td><button class="btn">4</button></td>
        <td><button class="btn">5</button></td>
        <td><button class="btn">6</button></td>
        <td><button class="btn">/</button></td>
    </tr>
    <tr>
        <td><button class="btn">1</button></td>
        <td><button class="btn">2</button></td>
        <td><button class="btn">3</button></td>
        <td><button class="btn">-</button></td>
    </tr>
    <tr>
        <td><button class="btn">0</button></td>
        <td><button class="btn">.</button></td>
        <td><button class="btn">+</button></td>
        <td><button class="btn">=</button></td>
    </tr>
</table>
<script>
    //接受所有按钮的变量
    var btnList=null;
    //接收屏幕元素
    var screenIpt=null;
    //设置布尔类型的值实现数字和字符的切换
    var ischange=false;
    //接收屏幕数据
    var result="";
    var clear=null;
    var del=null;
    window.onload=function(){
        btnList=document.getElementsByClassName('btn');
        screenIpt=document.getElementById('scipt');
        clear=document.getElementsByClassName('clear')[0];
        del=document.getElementsByClassName('del')[0];
        //给各个按钮添加事件监听
        for(var i=0;i<btnList.length;i++){
            btnList[i].addEventListener('click',listen);
        }
    }
    function listen(){
        //让数字和小数点显示到屏幕
        if(!isNaN(this.innerText)||this.innerText=="."){
            ischange=false;
            //考虑屏幕的值是否为0
            if(screenIpt.value=='0'){
                screenIpt.value=this.innerText=='.'?'0.':this.innerText;
            }
            else{
                //检测屏幕上是否有点
                if(screenIpt.value.indexOf('.')!=-1){
                    //有点
                    if(this.innerText!=='.'){
                        screenIpt.value+=this.innerText;
                    }
                }
                else{
                    //没点
                    screenIpt.value+=this.innerText;
                }
            }
        }
        else{
            //这里是除数字和小数点外的其他字符
            if(ischange){
                //考虑n* 7*=?
                var bring=result.substring(0,result.length-1);
                if(this.innerText=='='){
                    var res=eval(bring);
                    //取最后一个字符
                    var lastchar=result.substr(result.length-1,1);
                    screenIpt.value=eval(res+lastchar+res);
                }
                else{
                    result=bring+this.innerText;
                }
                //n*执行完之后直接退出此函数  AC和DEL不起作用  在这里添加上AC和DEL的点击事件
                clear.onclick=function(){
                    screenIpt.value=0;
                    result="";
                }
                del.onclick=function(){
                    var len=screenIpt.value;
                    screenIpt.value=len.length>1?len.substr(0,len.length-1):0;
                    result="";
                }
                return;
            }
            //记录屏幕当前值
            result+=screenIpt.value;
            switch (this.innerText){
                case 'AC':
                    //屏幕清零
                    screenIpt.value=0;
                    result="";
                    break;
                case 'DEL':
                    //输入错误 向前删除
                    var len=screenIpt.value;
                    screenIpt.value=len.length>1?len.substr(0,len.length-1):0;
                    result="";
                    break;
                case '=':
                     //计算表达式eval();
                    var res=eval(result);
                    screenIpt.value=res;
                    result="";
                    break;
                default:
                    //+-*/
                    //屏幕清零
                    screenIpt.value=0;
                    ischange=true;
                    result+=this.innerText;
                    break;
            }
        }
    }
</script>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值