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