Web实验三：计算器-CSDN博客

本文链接：https://blog.csdn.net/landexiangmz/article/details/138358208

该篇文章详细描述了一个使用HTML、CSS和JavaScript编写的计算器程序，包括按钮交互、数字输入、运算符处理以及百分比转换等功能。

摘要由CSDN通过智能技术生成

效果：

HTML代码（index.html）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="cal.css">
    <script type="text/javascript" src="cal.js"></script>
</head>

<body>
    <div id="mainBody">
        <h1 id="res">0</h1>
        <form action="">
            <input type="button" id="AC" onclick="cal(this)" name="AC" value="AC" class="btn1">
            <input type="button" id="⁺/-" name="⁺/-" onclick="switchFlag()" value="⁺/-" class="btn1">
            <input type="button" id="%" name="%" onclick="toPercent()" value="%" class="btn1">
            <input type="button" id="÷" onclick="cal(this)" name="÷" value="÷" class="btn2">
            <input type="button" id="7" onclick="cal(this)" name="7" value="7" class="btn">
            <input type="button" id="8" onclick="cal(this)" name="8" value="8" class="btn">
            <input type="button" id="9" onclick="cal(this)" name="9" value="9" class="btn">
            <input type="button" id="×" onclick="cal(this)" name="×" value="×" class="btn2">
            <input type="button" id="4" onclick="cal(this)" name="4" value="4" class="btn">
            <input type="button" id="5" onclick="cal(this)" name="5" value="5" class="btn">
            <input type="button" id="6" onclick="cal(this)" name="6" value="6" class="btn">
            <input type="button" id="-" onclick="cal(this)" name="-" value="-" class="btn2">
            <input type="button" id="1" onclick="cal(this)" name="1" value="1" class="btn">
            <input type="button" id="2" onclick="cal(this)" name="2" value="2" class="btn">
            <input type="button" id="3" onclick="cal(this)" name="3" value="3" class="btn">
            <input type="button" id="+" onclick="cal(this)" name="+" value="+" class="btn2">
            <input type="button" id="0" onclick="cal(this)" name="0" value="  0" class="btn0">
            <input type="button" id="." onclick="cal(this)" name="." value="." class="btn">
            <input type="button" id="=" onclick="cal(this)" name="=" value="=" class="btn2">
        </form>
    </div>
</body>

</html>

CSS(cal.css)

.btn{
    width: 70px;
    height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 4px;
    color: rgba(12, 12, 12, 0.915);
    background-color: #ffffff;
    border: 1px solid black;
}
.btn2{
    width: 70px;
    height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 4px;
    color: rgba(12, 12, 12, 0.915);
    background-color: #f6f5f996;
    border: 1px solid black;
}
.btn0{
    width: 155px;
    height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 4px;
    color: rgba(12, 12, 12, 0.915);
    background-color: #ffffff;
    border: 1px solid black;
    text-align: left;
}
#mainBody{
    border-radius: 10px;
    border: solid 2px;
    width: 360px;
    height: 590px;
    margin: 50px auto auto;
    background-color: #e7ecf0ee;
}

form{
    margin-left: 10px;
}

.btn1{
    width: 70px;
    height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 25px;
    border-radius: 4px;
    background-color:  #f6f5f996;
    border: 1px solid black;
}
#res{
    color: rgb(12, 12, 12);
    text-align: right;
    clear: left;
    font-size: 50px;
    margin-right: 38px;
    margin-bottom: -15px;
    margin-top: 130px;
}

#topic{
    color: white;
    text-align: center;
}

cal.js

var flag = 1;

function cal(btn) {
    const obj = document.getElementById("res");
    const num = btn.value;
    switch (num) {
        case "AC":
            obj.innerHTML = "0";
            flag = 1;
            break;
        case "=":
            obj.innerHTML = eval(document.getElementById("res").innerHTML);
            flag = 1;
            break;
        case "×":
            if (flag) {
                obj.innerHTML = "*";
                flag = 0;
                break;
            } else {
                if (obj.innerHTML.length < 8){
                    obj.innerHTML += "*";
                }
                flag = 0;
                break;
            }
        case "÷":
            if (flag) {
                obj.innerHTML = "/";
                flag = 0;
                break;
            } else {
                if (obj.innerHTML.length < 8){
                    obj.innerHTML += "/";
                }
                flag = 0;
                break;
            }
        case " 0":
            if (flag) {
                obj.innerHTML = "0";
                flag = 0;
                break;
            } else {
                if (obj.innerHTML.length < 8) {
                    obj.innerHTML += "0";
                }
                flag = 0;
                break;
            }
        default:
            if (flag) {
                obj.innerHTML = num;
                flag = 0;
                break;
            } else {
                if (obj.innerHTML.length < 8) {
                    obj.innerHTML += num;
                }
                flag = 0;
                break;
            }
    }
}

function toPercent() {
    const obj = document.getElementById("res");
    obj.innerHTML = parseFloat(obj.innerHTML) / 100;
}

function switchFlag() {
    const obj = document.getElementById("res");
    if (obj.innerHTML[0] === "-") {
        obj.innerHTML = obj.innerHTML.slice(1);
    } else {
        obj.innerHTML = "-" + obj.innerHTML;
    }
}