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

最新推荐文章于 2022-08-13 17:53:13 发布

BoomShaKa_S

最新推荐文章于 2022-08-13 17:53:13 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS实践

本文链接：https://blog.youkuaiyun.com/weixin_41350225/article/details/85130528

CSS实践专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一款使用HTML、CSS和JavaScript实现的简易计算器，详细展示了源代码和样式设计，适用于初学者理解基本的网页交互原理。

今天做了一个简单的计算器用HTML+CSS+JavaScript实现的，好了，直接给老哥们上效果图
在这里插入图片描述
运算结果

运算失败会报错之后会复位

好了，话不多说直接上源码

//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);
}