整个计算器分为四部分：
1.构建计算器的框架；
2.为计算器添加样式；
3.实现计算、回删、清零功能；
4.为计算器添加日期及时间。
构建计算器的框架
1.利用<input>、
来搭建计算器的框架；
2.为所有的按钮添加btn类，用于构建样式；
3.为功能键单独添加类名，用于绑定函数；
<body>
<h1>HTML,CSS,JavaScript计算器</h1>
<form>
<input type="button" value="C" class="btn zero" onclick="zero()">
<input type="button" value="D" class="btn del" onclick="numdel()">
<input type="text" id="rel">
<br>
<input type="button" value="7" class="btn" onclick="getValue(this.value)">
<input type="button" value="8" class="btn" onclick="getValue(this.value)">
<input type="button" value="9" class="btn" onclick="getValue(this.value)">
<input type="button" value="/" class="btn cal_btn" onclick="getValue(this.value)">
<br>
<input type="button" value="4" class="btn" onclick="getValue(this.value)">
<input type="button" value="5" class="btn" onclick="getValue(this.value)">
<input type="button" value="6" class="btn" onclick="getValue(this.value)">
<input type="button" value="*" class="btn cal_btn" onclick="getValue(this.value)">
<br>
<input type="button" value="1" class="btn" onclick="getValue(this.value)">
<input type="button" value="2" class="btn" onclick="getValue(this.value)">
<input type="button" value="3" class="btn" onclick="getValue(this.value)">
<input type="button" value="-" class="btn cal_btn" onclick="getValue(this.value)">
<br>
<input type="button" value="." class="btn cal_btn" onclick="getValue(this.value)">
<input type="button" value="0" class="btn" onclick="getValue(this.value)">
<input type="button" value="+" class="btn cal_btn" onclick="getValue(this.value)">
<input type="button" value="=" class="btn equal" onclick="getResult()">
</form>
<p id="nowTime"></p>
</body>
为计算器添加样式
body{
margin: 0px;
border: none;
}
h1{
color: rgb(60, 112, 156);
text-align: center;
}
form{
width: 300px;
margin: 0 auto;
padding: 40px 0 30px 50px;
background-color: rgb(44, 78, 109);
border-radius: 40px;
}
input{
outline: none;
border-radius: 75px;
font-size: 20px;
box-shadow: inset 0px 4px 4px rgb(52, 104, 153);
}
.btn{
width: 45px;
height: 45px;
margin: 5px;
background-color: rgb(64, 130, 192);
}
#rel{
width: 120px;
height: 35px;
color: black;
text-align: right;
padding-right: 10px;
background-color: azure;
}
.zero,.del,.equal{
background-color: rgb(238, 103, 25);
box-shadow: inset 0px 4px 4px rgb(247, 163, 6);
}
.cal_btn{
background-color: rgb(206, 203, 200);
box-shadow: inset 0px 4px 4px rgb(224, 228, 221);
}
p{
text-align: center;
}
实现计算、回删、清零功能
1.获取、更新输入框中的值，并与数字键绑定点击事件：与数字键绑定后，只要单击数字键就会获取并更新输入框中的值；
2.编写回删函数，与回删按钮绑定点击事件：获取到输入框中的值number.value并用substring方法清除值的最后一位，最后将新的值赋给number.value；
3.编写清零函数，与清零按钮绑定点击事件：获取到输入框中的值number.value，并赋给其空字符串，达到清零效果；
4.编写计算函数，与计算按钮绑定点击事件：获取输入框中的值number.value，用eval方法进行计算。
//获取值
function getValue(num){
/*var number=document.getElementById("rel").value;
var sum=0;
sum=sum+number;*/
var number=document.getElementById("rel");
number.value=number.value+num;
a=number.value;
}
//回删
function numdel(){
var number=document.getElementById("rel");
//当a的值变化时，number.value并没有变化，因为数组是按值传递的，所以a的变化之后，需要将其重新赋值给number.value
var a=number.value;
//substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
a=a.substring(0,a.length-1);
number.value=a;
/*也可以用下列方法改变number.value的值。
number.value=number.value.substring(0,number.value.length-1);*/
}
//清零
function zero(){
var number=document.getElementById("rel");
number.value="";
}
//计算
function getResult(){
var number=document.getElementById("rel");
number.value=eval(number.value);
}
为计算器添加日期及时间
1.获取年、月、日、时、分、秒、星期；
2.用innerHTML为计算器添加时间；
3.利用setTimeout方法使时间每隔一秒更新一次；
4.将时间函数showTime添加到onload中。
注：setTimeout方法要设置在时间函数中，再将时间函数绑定到onload中，这样才能使时间达到动态更新。若直接将setTimeout方法绑定到onload中，则会导致刷新页面才能更新时间。
//显示时间
function showTime(){
var time=new Date();
var y=time.getFullYear();
var M=time.getMonth()+1;
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
var w=time.getDay();
var week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
function changeMonth(x){
if(x<10){
x="0"+x;
}
return x;
}
M=changeMonth(M);
d=changeMonth(d);
h=changeMonth(h);
m=changeMonth(m);
s=changeMonth(s);
var text=document.getElementById("nowTime");
text.innerHTML=y+"年"+M+"月"+d+"日"+"<br>"+h+":"+m+":"+s+" "+week[w];
setTimeout("showTime()",1000);
}
window.onload=function(){
showTime();
}
总结
在整个编写代码的过程中，稍微花了点时间的就是在js部分中的计算函数与时间函数的编写。计算函数最初是对加减乘除运算进行逐个编写函数，后面学到了eval方法，就换掉了原先的15行代码，整个计算函数也因此变得更加清爽。编写时间函数时纠结了下setTimeout方法到底要放在函数内还是外面，通过查阅资料了解到onload事件的原理，这才有了现在的代码。
整个代码其实并不难，重点是要弄清楚什么函数与什么键绑定，以及setTimeout方法的位置。
网友评论