计算器（html+css+js）

最新推荐文章于 2024-05-10 11:30:24 发布

一起去爬山？

最新推荐文章于 2024-05-10 11:30:24 发布

阅读量1.4k

点赞数 5

分类专栏：笔记文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_41850612/article/details/111564050

版权

文章目录

- 计算器

计算器

先上个效果图 :
（是不是有点眼熟？没错就是win10上的计算器）

原版的：
在这里插入图片描述
我的：

可以看出，还是有不少区别的，不仅仅是样式上，还有功能上。
_{（实在是懒得调了，功能的话有点小复杂就少些了几个…）}

计算器的操作（运算）逻辑：

直接按数字、小数点、正负切换、等号、运算符……；
先按数字，再按小数点、正负切换、运算符、等号……；
先按数字，再按运算符，再按正负切换，再按等号；例如：1+(-1)=0
先按数字，再按运算符，再按等号；例如：1+=1 -> 1+1=2
先按数字，再按运算符，再按数字，再按等号；例如：1+2=3
先按数字，再按运算符，再按数字，再按等号，再按数字……；
1. 先按数字，再按运算符，再按数字，再按等号，再按数字，再按运算符，再按数字，再按等号；例如：1+2=3 5+6=11
2. 先按数字，再按运算符，再按数字，再按等号，再按运算符，再按等号；
…
…
这东西不知道怎样去描述……所以只罗列了一部分情境……
_{（总的来说，现在看到的版本，已经是更新过（修复bug）数次后的成品。)}

1. html

html:

<!DOCTYPE html>
<!-- 此处省略一部分标签 -->
<body>
	<div class="body">
        <!-- 计算器的头部 -->
        <div class="top">
            <!-- 1.顶部栏 -->
            <span class="title">计算器</span>
            <p>
                <!-- 关闭计算器(页面) -->
                <span class="close" onclick="window.close()">&#10005;</span>
            </p>
            <!-- 2.内容栏 -->
            <p>
                <!-- 用作显示数字及结果的区域 -->
                <span id="show" class="show-view">0</span>
            </p>
        </div>
        <!-- 计算器的按钮 -->
        <div class="content">
            <!--  第一行   +    -    *    /   -->
            <p>
                <span id="+" class="util symbol">+</span>
                <span id="-" class="util symbol">-</span>
                <span id="*" class="util symbol">*</span>
                <span id="/" class="util symbol">/</span>
            </p>
            <!--  第二行   7    8    9    %   -->
            <p>
                <span id="7" class="number">7</span>
                <span id="8" class="number">8</span>
                <span id="9" class="number">9</span>
                <span id="%" class="util symbol">%</span>
            </p>
            <!--  第三行   4    5    6  <[X]  -->
            <p>
                <span id="4" class="number">4</span>
                <span id="5" class="number">5</span>
                <span id="6" class="number">6</span>
                <span id="Backspace" class="util">➨</span>
            </p>
            <!--  第四行   1    2    3    C   -->
            <p>
                <span id="1" class="number">1</span>
                <span id="2" class="number"

最低0.47元/天解锁文章

一起去爬山？

关注

5
点赞
踩
27

收藏

觉得还不错? 一键收藏
4
评论
计算器（html+css+js）

计算器先上个效果图 :（是不是有点眼熟？没错就是win10上的计算器）原版的：我的：可以看出，还是有不少区别的，不仅仅是样式上，还有功能上。（实在是懒得调了，功能的话有点小复杂就少些了几个…）这里先贴个html的格式和css的样式html:<!DOCTYPE html><body> <div class="body"> 
复制链接

扫一扫