简单计算器的实现(html+css+javascript)

今天做了一个简单的计算器用HTML+CSS+JavaScript实现的,好了,直接给老哥们上效果图
简单计算器的实现(html+css+javascript)_第1张图片
运算结果
简单计算器的实现(html+css+javascript)_第2张图片
运算失败会报错之后会复位
简单计算器的实现(html+css+javascript)_第3张图片
好了,话不多说直接上源码

//HTML+JS的代码
<!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">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>

</head>

<body>

    <section>
        <input /><br />
        <div class="opt">(</div>
        <div class="opt">)</div>
        <div class="opt">%</div>
        <div class="opt">C</div>
        <div>7</div>
        <div>9</div>
        <div>8</div>
        <div class="opt">/</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div class="opt">*</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div class="opt">-</div>
        <div>0</div>
        <div>.</div>
        <div>=</div>
        <div class="opt">+</div>
        <section>
            <script>
                //第一步:获取输入框的对象
                var ipt = document.querySelector("input");
                //获取所有的div对象nodelist数组
                var divs = document.querySelectorAll("div");
                //第二步:通过循环获取所有的div,然后给他们添加点击事件
                for (let i = 0; i < divs.length; i++) {
     
                    let item = divs[i];    //获取所有的div
                    item.onclick = function () {
         //给div添加点击事件
                        try {
              //这里用try catch抛出异常,针对运算错误的情况
                            if (item.innerHTML != "C" && item.innerHTML != "=") {
         //C和=按下有特殊的情况
                                ipt.value += item.innerHTML;
                            } else if (item.innerHTML == "=") {
          //按下=号执行运算结果
                                ipt.value = eval(ipt.value);        //eval()会将字符串按照公式计算
                            } else if (item.innerHTML == "C") {
          //按下C清空输入
                                ipt.value = "";
                            }
                        }catch(e){
         //运算失败抛出异常
                            alert("你的运算输入有误:" + e.message);
                            ipt.value="";    //复位
                        }
                    }
                }

            </script>
</body>

</html>

这里在for循环里用了let声明变量,let在循环结束的时候,变量会被销毁

//CSS代码
body{
     
    background-color: rgb(231, 216, 216);
}
section{
     
    width: 25rem;
    margin: auto;
 
}
div{
     
    float: left;
    width: 6rem;
    height: 2rem;
    border: 0.01rem rgb(209, 193, 193) solid;
    text-align: center;
    line-height: 2rem;
    cursor: pointer;
    border-left:0;
    border-bottom:0;
    background-color: white;
}
div:active{
     
   background-color: antiquewhite;
   color:rgb(45, 17, 202);
}
.opt{
     
    color: #FE6600;
    background-color:#F9F9F9;
}
input{
     
    width: 23.9rem;
    height: 3rem;
    border: 1px solid rgb(218, 213, 213);
}

希望对老哥们有所帮助,觉得有用可以帮忙点个赞

你可能感兴趣的:(CSS实践)