用js绘制简易计算器

最新推荐文章于 2023-10-25 12:37:33 发布

哼,小呀么小胖子

最新推荐文章于 2023-10-25 12:37:33 发布

阅读量108

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/101557840

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

最终样式:
在这里插入图片描述
代码及解释如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        .box{
            width:100%;
            height: 100%;      
            background:rgb(170, 212, 157);
            overflow: hidden;
        }
        .b_center{
            width: 400px;
            height: 400px;
            margin:80px auto 0 auto;
            background: rgb(141, 199, 216);
        }
        .b_center p{
            font-size:28px;
            color: bisque;
            line-height: 40px;
        }
        .calc{
            width: 260px;
            height: 180px;
            margin: 80px auto 0 auto;
        }
        #result{
            width: 260px;
            height: 28px;
            font-size: 24px;
            line-height: 28px;
            color: black;
        }
        #btn{
            padding: 0;
            border:0;
            box-sizing:border-box; 
            width: 59px;
            height: 36px;
            margin: 4px 2px 4px 0px;
            font-size: 20px;
            color: #fff;
            background: rgb(93, 145, 158);
        }
         #btn:nth-of-type(4n){
            width: 62px;
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="b_center">
            <p>我的计算器</p>
            <div class="calc">
            <!-- 将结果输出的文本框,也可以在其他标签中输出,但当用到h5中的各种标签时,
            传入数字不能用value传入,而应该用innerHtml传入 -->
            <input id="result" value="0"> 
            <!-- 计算器上的所有数字都通过按钮进行输入,并设置其对应的value值,方便以后的操作,
            当发生onclick点击事件时,调用say()函数 -->
            <button id="btn" value="7" onclick="say('7')">7</button>
            <button id="btn" value="8" onclick="say('8')">8</button>
            <button id="btn" value="9" onclick="say('9')">9</button>
            <button id="btn" value="+" onclick="say('+')">+</button>
            <button id="btn" value="4" onclick="say('4')">4</button>
            <button id="btn" value="5" onclick="say('5')">5</button>
            <button id="btn" value="6" onclick="say('6')">6</button>
            <button id="btn" value="-" onclick="say('-')">-</button>
            <button id="btn" value="1" onclick="say('1')">1</button>
            <button id="btn" value="2" onclick="say('2')">2</button>
            <button id="btn" value="3" onclick="say('3')">3</button>
            <button id="btn" value="*" onclick="say('*')">*</button>
            <button id="btn" value="0" onclick="say('0')">0</button>
            <button id="btn" value="C" onclick="say('C')">C</button>
            <button id="btn" value="=" onclick="say('=')">=</button>
            <button id="btn" value="/" onclick="say('/')">/</button>
        </div>
    </div>
</body>
<script>
    //在js中找到id名为result的标签,方便以后通过value对其赋值
        var resultInput=document.getElementById("result")
        //立一个旗帜用于使数字可以连续输入,所以应当只有当键入为0-9时起作用
        var isContinue=false;
        //用来接收计算时运算符之前的值
        var beforeName="";
        //用来接收运算符
        var opt="";
    function say(value){
        //根据所按按钮的value值,找到switch对应的case值,并进行相应操作
        switch(value){
            case "+":
            case "-":
            case "*":
            case "/":
        //当所按的是运算符时,opt接收运算符,并将之前的键入的数字值resultInput.value
        //传到beforeName中接收
                opt=value;
                beforeName=resultInput.value;
                isContinue=false;
                break;
            case "=":
         //当所按的是=时,调用calc函数进行计算,参数分别为第一次传入的数,第二次传入的数和运算符,
         //并将结果通过value使文本框获取最终结果
                resultInput.value=calc(beforeName,resultInput.value,opt);
                isContinue=false;
                break;
            case "C":
        //当所按的是清零时,之前传入的数,运算符,第二次传入的数都应该进行清空
                beforeName="";
                opt="";
                resultInput.value="";
                isContinue=false;
                break;
            default:
        //default代表其他情况,此时只剩下0-9
        //当第一次进入此处时,flag一定为false,所以一定进入else语句中,使
        //其通过赋值使文本框传入当前的value值,然后 isContinue旗帜为true
        //如果下一次再次按数字进入此处,则进入isContinue==true语句,进行字
        //符的拼接,并显现出来
                if(isContinue==true){
                    resultInput.value+=value;
                }else{
                    resultInput.value=value;
                }
                isContinue=true;
                break;
        }
    }

    //两数进行计算的函数
    function calc(num1,num2,opt){
        var result=0;
    //因为计算的值都是从h5标签中传入的,所以得到的都是字符串类型的数字,
    //可以通过Number进行强制转换变成数字型.-,/,*可以不用强制转化,因为
    //它们具有隐式装换,使其自动变为数字型,而+却不行
        switch(opt){
            case "+":
                result= Number(num1)+Number(num2);
                break;
            case "-":
                result= Number(num1)-Number(num2);
                break;
            case "*":
                result= Number(num1)*Number(num2);
                break;
            case "/":
                result=  Number(num1)/Number(num2);
                break;
        }
        return result;
    }
</script>
</html>

哼,小呀么小胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js绘制简易计算器

最终样式:代码及解释如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫

专栏目录