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

文章目录

上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代码如下:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>苹果计算器</title><linkrel="stylesheet"href="cal.css"><scripttype="text/javascript"src="cal.js"></script></head><body><h1id="topic">模拟苹果自带计算器</h1><divid="mainBody"><h1id="res">0</h1><formaction=""><inputtype="button"id="AC"onclick="cal(this)"name="AC"value="AC"class="btn1"><inputtype="button"id="⁺/-"name="⁺/-"onclick="switchFlag()"value="⁺/-"class="btn1"><inputtype="button"id="%"name="%"onclick="toPercent()"value="%"class="btn1"><inputtype="button"id="÷"onclick="cal(this)"name="÷"value="÷"class="btn2"><inputtype="button"id="7"onclick="cal(this)"name="7"value="7"class="btn"><inputtype="button"id="8"onclick="cal(this)"name="8"value="8"class="btn"><inputtype="button"id="9"onclick="cal(this)"name="9"value="9"class="btn"><inputtype="button"id="×"onclick="cal(this)"name="×"value="×"class="btn2"><inputtype="button"id="4"onclick="cal(this)"name="4"value="4"class="btn"><inputtype="button"id="5"onclick="cal(this)"name="5"value="5"class="btn"><inputtype="button"id="6"onclick="cal(this)"name="6"value="6"class="btn"><inputtype="button"id="-"onclick="cal(this)"name="-"value="-"class="btn2"><inputtype="button"id="1"onclick="cal(this)"name="1"value="1"class="btn"><inputtype="button"id="2"onclick="cal(this)"name="2"value="2"class="btn"><inputtype="button"id="3"onclick="cal(this)"name="3"value="3"class="btn"><inputtype="button"id="+"onclick="cal(this)"name="+"value="+"class="btn2"><inputtype="button"id="0"onclick="cal(this)"name="0"value="  0"class="btn0"><inputtype="button"id="."onclick="cal(this)"name="."value="."class="btn"><inputtype="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;functioncal(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;}}}functiontoPercent(){const obj = document.getElementById("res");
    obj.innerHTML =parseFloat(obj.innerHTML)/100;}functionswitchFlag(){const obj = document.getElementById("res");if(obj.innerHTML[0]==="-"){
        obj.innerHTML = obj.innerHTML.slice(1);}else{
        obj.innerHTML ="-"+ obj.innerHTML;}}

标签： css javascript 前端

本文转载自: https://blog.csdn.net/qq_33884853/article/details/125013609
版权归原作者 Laurie三省 所有，如有侵权，请联系我们删除。

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

文章目录

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

html部分

css部分

javascript部分

发表评论

“【web】模仿苹果计算器「html」「css」「javascript」”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航