VSCode建立一个简易版的计算器

最新推荐文章于 2024-05-30 14:01:48 发布

琳狼满月

最新推荐文章于 2024-05-30 14:01:48 发布

阅读量723

点赞数

文章标签： vscode css 编辑器

本文链接：https://blog.csdn.net/weixin_64452747/article/details/133620985

版权

做一个简易版的计算器按钮包括0-9，实现+-*/和AC（归0）。

按钮部分如下，并分别引用.css文件和.js文件：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <link rel="stylesheet" href="css/calc.css">
</head>

<body>
    <center>
        <div id="calc">
            <h1>欢迎使用计算器</h1>
            <table>
                <tr>
                    <th colspan="4"><input type="text" id="res" readonly></th>
                </tr>
                <tr>
                    <td><button class="shuzi">7</button></td>
                    <td><button class="shuzi">8</button></td>
                    <td><button class="shuzi">9</button></td>
                    <td><button class="fuhao">+</button></td>
                </tr>
                <tr>
                    <td><button class="shuzi">4</button></td>
                    <td><button class="shuzi">5</button></td>
                    <td><button class="shuzi">6</button></td>
                    <td><button class="fuhao">-</button></td>
                </tr>
                <tr>
                    <td><button class="shuzi">1</button></td>
                    <td><button class="shuzi">2</button></td>
                    <td><button class="shuzi">3</button></td>
                    <td><button class="fuhao">*</button></td>
                </tr>
                <tr>
                    <td><button class="shuzi">AC</button></td>
                    <td> <button class="shuzi">0</button></td>
                    <td><button id="denghao" class="fuhao">=</button></td>
                    <td><button class="fuhao">/</button></td>
                </tr>
            </table>
        </div>
    </center>
    <script src="js/my.js"></script>
</body>

</html>

以下是通过CSS对计算器的外形的改造：

table{
    border-collapse: collapse;
}
table td,
table th{
    height: 50px;
    width: 100px;
    border-width: 5px;
    background-color: coral;
    border-radius: 15px;
}
input{
   height: 100px;
   width: 500px;
   font-size: 40px;
   background-color:rgb(253, 148, 148);
   text-align: right;
   border-radius: 90px;
}
button{
    height: 70px;
    width: 120px;
    font-size: 50px;
    color: white;
    border-radius: 80px;
}
input[style=text]{
    height: 70px;
    width: 100px;
    font-size: 50pxs;
}   
.fuhao{
    background-color: orange;
}
.shuzi{
    background-color: rgb(245, 233, 75);
}
/* button:hover{
    background-color: crimson;
    color: lime;
} */
.dianji{
    background-color: cornflowerblue;
    color: palegreen;
}

具体颜色、大小如下（可自行调整计算器的颜色、大小、弧度等各因素）：

对计算器的具体要求如下：

1.去掉文本框中的0

2.怎样计算结果。

3.运算符号的连续问题以及符号可以替换的问题。例如点完+按钮，再点-按钮不能在文本框中输出+-，并且要用-号替换掉+好。

4.计算结果展示以后，如果按下符号，则继续计算。如果按下数字，则重新计算。

5.除数不能为0。

通过js对计算器的功能进行编写。

window.onload = function () {

let btns = document.querySelectorAll("button")

let res = document.querySelector("#res")

let body = document.querySelector("body")

let flag = false

//设置文本框里的默认值为0

if (res.value == "") {

res.value = 0;

}

for (let i in btns) {

btns[i].onclick = function () {

this.classList.add("dianji")

let bv = this.innerText

common(bv)

}

btns[i].onmouseup = function () {

this.classList.remove("dianji");

}

btns[i].onmouseleave = function () {

this.classList.remove("dianji");

}

}

body.addEventListener("keydown", function (event) {

let bv = event.key

common(bv)

})

function common(bv) {

let arr = ["+", "-", "*", "/"]

if (!isNaN(bv) || arr.indexOf(bv) != -1) {

}

else if (bv == "AC") {

res.value = 0

return

} else if (bv == "=") {

let rv = eval(res.value)

res.value = rv

//除数不能为0

if (rv === Infinity) {

res.value = "错误，除数不能够为0"

} else {

res.value = eval(res.value)

}

flag = true

return

}

//去掉文本框中的0

if (res.value == 0) {

if (!isNaN(bv)) {

res.value = Number(eval(res.value) + bv)

} else {

res.value += bv

}

flag = false

}

//计算结果展示以后，如果按下符号，则继续计算。如果按下数字，则重新计算。

else if (res.value != 0) {

res.value += bv

if ((flag === true) && (bv != "-" && bv != "+" && bv != "*" && bv != "/")) {

res.value = bv

flag = false

} else {

res.valuen += bv

flag = false

}

}

//运算符号的连续问题以及符号可以替换的问题

if (arr.indexOf(last_one) != -1) { //如果文本框里最后一个是符号

if (bv != res_string[last_one] && arr.indexOf(bv) != -1) { //如果输入的和文本框里最后一个字符不同并且输入的也是运算符

res.value = res_string.replace(last_one, bv) //文本框内容 = 原本文本框最后一个字符被新输入的字符替换掉

bv="" // 清空输入

console.log(value) //打印出内容

}

else if (bv == last_one) { //或者如果输入的和最后一个字符相同

bv = "" // 清空输入

}

}

}

}

如果有问题或别的方法，我们可以交流一下。

琳狼满月

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
VSCode建立一个简易版的计算器

实现计算器的基本功能 1.去掉文本框中的0 2.怎样计算结果。 3.运算符号的连续问题以及符号可以替换的问题。例如点完+按钮，再点-按钮不能在文本框中输出+-，并且要用-号替换掉+好。 4.计算结果展示以后，如果按下符号，则继续计算。如果按下数字，则重新计算。 5.除数不能为0。
复制链接

扫一扫