学习前端已有两月有余，去掉寒假划水也学了一个多月了，
还是弱的可以。写个计算器遇到了一堆问题，我真是个弟弟...
把问题和解决方法都塞在注释里了，小林要常回来看看
css样式我真的8想写了，就先这样丑丑的放着吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
width: 100%;
}
#container{
margin: 0 auto;
/* position: absolute; */
/* puzzle1:绝对定位与外边距？ */
height: 40%;
width: 35%;
/* puzzle2:如何使用百分比？ 成了！给html与body均设置宽高100%*/
border: 2px solid aqua;
background-color: antiquewhite;
}
input{
/* margin-top: 5%; */
display: inline-block;
/* margin:0 auto; */
/* margin：auto可以做到水平居中，但是有个前提条件就是，这个
标签必须是块状元素，并且有个确定的宽度，百分比的宽度也行； */
margin-top: 3%;
margin-left: 1.5%;
/* 百分比是相对于宽度的 */
height: 13%;
width: 80%;
/* 其实这里用px比较好，因为如果缩放网页到一定程度输入框就消失了
还是要去橙旭园咨询下 */
}
/*input:focus{
box-shadow: 1px 1px ;
}自带focus？？*/
#clear{
display: inline-block;
/* display是不继承的 */
background-color: aquamarine;
/* position: absolute;再做一些修改就可以无论怎么样缩放网页，清除按钮都和输入框在同一行上 */
padding: 2px;
border: 1px solid #dddddd;
height: 14%;
margin-left: 1px;
margin-top: 3%;
width: 15%;
font-size: 18px;
margin-bottom: 3%;
}
#clear:hover{
border: 1px solid seagreen;
box-shadow: 1px 1px sandybrown;
/* 注意有两个必须有的值 */
}
#btn{
background-color:turquoise;
padding-left: 5%;
/* ???为什么会导致btn这个div向右膨胀5%？？？ */
/* width: 100%; */
/* 为什么把宽度注释掉就可以了欸 */
/* 如果设置了100%，再加上边距，就会变成105%的宽度~ */
/* html元素宽度不具有继承特性，块级元素(block)的宽度会占据一整行（一整行父元素的宽度），
所以看似继承了，实则不是。
要让一个元素的宽度根据内容撑开，只要设置其display不为块级元素，不设置宽度就可以了 */
height: 65%;
/* 百分比？？？？ */
/* 百分比是父元素内容的百分比，去掉内边距等之后的部分！ */
padding-top: 5%;
}
#btn .num,.calc,.result{
display: inline-block;
height: 20%;
width: 20%;
background-color: white;
border: 1px solid seagreen;
}
/* .num,.calc,.result:hover{
box-shadow: 3px 3px orange;
border: 1px solid darkorange;
} 错误写法，会解析为“为num类”和“calc”类添加新的常规样式，并（只）为“result类”添加伪类 */
.num:hover{
box-shadow: 2px 2px orange;
border: 1px solid darkorange;
}
.calc:hover{
box-shadow: 2px 2px orange;
/* 用inset制造内嵌阴影 */
border: 1px solid darkorange;
}
.result:hover{
box-shadow: 2px 2px orange;
border: 1px solid darkorange;
}
</style>
</head>
<body>
<div id="container">
<input id="input" placeholder="在此输入数字">
<button id="clear" value="clear" onclick="cle()">清除</button>
<br>
<div id="btn">
<button value="7" class="num" onclick="get(this.value)">7</button>
<button value="8" class="num" onclick="get(this.value)">8</button>
<button value="9" class="num" onclick="get(this.value)">9</button>
<button value="+" class="calc" id="add" onclick="get(this.value)">+</button>
<br>
<button value="4" class="num" onclick="get(this.value)">4</button>
<button value="5" class="num" onclick="get(this.value)">5</button>
<button value="6" class="num" onclick="get(this.value)">6</button>
<button value="-" class="calc" id="sub" onclick="get(this.value)">-</button>
<br>
<button value="1" class="num" onclick="get(this.value)">1</button>
<button value="2" class="num" onclick="get(this.value)">2</button>
<button value="3" class="num" onclick="get(this.value)">3</button>
<button value="*" class="calc" id="mul" onclick="get(this.value)">*</button>
<br>
<button value="." class="num" onclick="get(this.value)">.</button>
<button value="0" class="num" onclick="get(this.value)">0</button>
<button value="/" class="calc" id="div" onclick="get(this.value)">/</button>
<button value="=" class="result" id="re" >=</button>
</div>
</div>
<script>
// console.log(eval(2+1));
//获取运算符元素
function get(num){
var show = document.getElementById("input");
show.value += num;
}
var clear_btn = document.getElementById("clear");
// clear_btn.onclick = clear;
// 如果把点击事件绑定在清除按钮的HTML中会失效：在script中使用事件绑定或事件监听器方可
//原因：...clear是保留字...，也就是说这三种方式都可以，打扰了，我是弟弟
function cle(){
var show = document.getElementById("input");
show.value = "";
}
//
var result_btn = document.getElementById("re");
function calculates(){
var result = 0;
var temp;
var show = document.getElementById("input");
temp = show.value;
result = eval(temp);
show.value = result;
}
result_btn.addEventListener("click",calculates,false);
</script>
</body>
</html>
原文：https://www.cnblogs.com/linbudu/p/10448288.html