计算器案例

最新推荐文章于 2023-03-05 07:00:00 发布

m0_55600187

最新推荐文章于 2023-03-05 07:00:00 发布

阅读量118

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_55600187/article/details/115091726

版权

计算器案例

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>

m0_55600187

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
计算器案例

计算器案例1.声明变量-添加事件监听-绑定事件2.函数用条件语句来写：（1）先判断是数字或小数点①屏幕上的数字是否为0（若为0，输入的是“.”，则显示“0.”，输入的不是点则显示此文本）②屏幕上是否有点-如果再次输入的是点（有点不给-没点给点）；否则拼接此文本（2）除数字和小数点以外的按钮：考略n*：（设置布尔类型的值来切换数字和符号）如果输入的最后一个字符是“=”，截取符号前面的数字做运算，取最后一个字符，拼接起来做运算；否则直接拼接；（3）其他符号(+ - * / = AC DEL
复制链接

扫一扫