【web】模仿苹果计算器「html」「css」「javascript」

Khalil三省

已于 2022-06-09 22:02:53 修改

阅读量4.2k

点赞数 16

分类专栏：浙江师范大学ZJNU 文章标签： css javascript 前端 html 计算器

于 2022-06-01 09:23:46 首次发布

本文链接：https://blog.csdn.net/qq_33884853/article/details/125013609

版权

浙江师范大学ZJNU 专栏收录该内容

63 篇文章 95 订阅

订阅专栏

文章目录

上web前端的课,老师布置了一个使用 html,css,javascript来完成一个 计算器的作业
作为一个资深的果粉,当然是选择做一个 苹果计算器啦!
话不多说 ,先先贴一张成品图
在这里插入图片描述

然后我们再来看看苹果的原计算器图
请添加图片描述

是不是和苹果自带的计算器不能说完全一样,可以说一模一样()嘿嘿

然后我们再来进行一些简单的计算展示:
在这里插入图片描述

OK!可以计算成功.
其他更多的操作我就不展示了,你们有兴趣的可以去试试看.

遇到的一些问题以及解决方法

输出栏我是用h1标签来实现的,然后使用input中的button来当作每一个按钮,再使用css美化就出了图片上这个效果
为了实现按钮中数字是白色的,只需要在css中设置按钮color为white就可以了.这里的color就代表的是字体的颜色.
为了按钮的边框不显示来影响视觉效果,所以需要把border给设置为0.
因为输出栏和按钮之间会有挺大的一个空隙,所以将h1的margin-bottom设置为负数就可以贴近了.
为了将数字输出在右边,所以设置为向右对齐text-align: right;
因为eval函数是不会识别我们的×和÷的,所以我们需要在js代码中进行特殊的设置,将其替换为*和/就可以了
为了输出框输入的时候不超过边界会变成很丑(苹果原生是通过随着长度增加缩小数字来实现了,但是本人太菜不会,就偷巧了,强制限制为8位长度)
因为初始会有一个0,所以为了避免再输入数字的时候会带上这个0,需要进行特殊的判断,设置一个flag变量来记录是否是第一次输入,然后来进行是否对innerHTML属性+=,还是=.
＋/-按钮是实现改变数字的符号的,当有负号时就删除负号,没有负号就加个负号,我是通过slice方法来进行切片实现的.
转化位百分比的按钮因为需要涉及到小数,所以要用parseFloat方法来将innerHTML转化为浮点数再来进行计算.

html部分

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>
<h1 id="topic">模拟苹果自带计算器</h1>
<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部分

css代码:

.btn{
    width: 60px;
    height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 40px;
    background-color: #2f3b44;
    color: white;
    border: 0;
}
.btn2{
    width: 60px;
    height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 40px;
    background-color: #dcae18;
    color: white;
    border: 0;
}
.btn0{
    width: 135px;
    height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 30px;
    font-weight: bold;
    border-radius: 40px;
    background-color: #2f3b44;
    color: white;
    text-align: left;
    border: 0;
}
#mainBody{
    border-radius: 10px;
    border: solid 2px;
    width: 320px;
    height: 590px;
    margin: 50px auto auto;
    background-color: #1c1616;
}
form{
    margin-left: 10px;
}
.btn1{
    width: 60px;
    height: 60px;
    margin-top: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 25px;
    border-radius: 40px;
    background-color: #7992a2;
    border: 0;
}
#res{
    color: white;
    text-align: right;
    clear: left;
    font-size: 50px;
    margin-right: 38px;
    margin-bottom: -20px;
    margin-top: 130px;
}
body{
    background-image: url(https://www.cdnjson.com/images/2022/05/27/43317.jpg);
}
#topic{
    color: white;
    text-align: center;
}

javascript部分

javascript代码:

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

Khalil三省

关注

16
点赞
踩
71

收藏

觉得还不错? 一键收藏
打赏
11
评论
【web】模仿苹果计算器「html」「css」「javascript」

上web前端的课,老师布置了一个使用**html,css,javascript**来完成一个**计算器**的作业作为一个资深的果粉,当然是选择做一个**苹果计算器**啦!**话不多说 ,先先贴一张成品图**是不是和苹果自带的计算器不能说完全一样,可以说一模一样()嘿嘿...
复制链接

扫一扫