学习HTML，CSS，JS一个月后，想着能自己是否能写出一个简单的东西，故编写了简易的计算器，之前也写过一个坦克大战，坦克大战的有些基本功能没有实现，
故也没有记录下来，想来，对这行初来咋到的，还是需要留下些东西供自己日后回忆，于是写下这篇随笔；因第一次写博客，不知道怎么上传源代码，也不知道怎么在博客页面实现计算效果。
下面是完成后计算器页面：
该计算器只是实现了简易的计算功能，很多其他功能没有实现，如运算的优先级功能，在后面的学习中再慢慢改进吧！
因计算器布局比较规整，故用table表格布局，也可以用div或列表来布局；单元格里加入button标签，整体上大的table里含三列两行，在单元格里再插入表格；
下面代码是：大的table里的第一行，包括时间、计算结果、清零和退格。
以下是HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="计算器.css" rel="external nofollow" />
<script src="计算器.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="" id='main'>
<tr>
<th id='time'>
</th>
<th >
<input type="text" name="" id="result" value="0" />
</th>
<th>
<input type="button" name="" id="" value="清零" onclick="clean()"/>
<input type="button" name="" id="" value="退格" onclick='backspace()'/>
</th>
</tr>
下面代码是：大的table里的第二行的第一个单元格（左边的计算板块），单元格内加入table表格
<tr>
<td>
<table id="table1">
<tr>
<td>
<input type="button" name="" id="" value="sin" onclick="calc1('sin')"/>
</td>
<td>
<input type="button" name="" id="" value="cos" onclick="calc1('cos')"/>
</td>
<td>
<input type="button" name="" id="" value="tan" onclick="calc1('tan')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="asin" onclick="calc1('asin')"/>
</td>
<td>
<input type="button" name="" id="" value="acos" onclick="calc1('acos')"/>
</td>
<td>
<input type="button" name="" id="" value="atan" onclick="calc1('atan')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="PI" onclick="calc1('PI')"/>
</td>
<td>
<input type="button" name="" id="" value="1/X" onclick="calc1('1/x')"/>
</td>
<td>
<input type="button" name="" id="" value="exp" onclick="calc1('exp')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="Inx" onclick="calc1('Inx')"/>
</td>
<td>
<input type="button" name="" id="" value="lgx" onclick="calc1('lgx')"/>
</td>
<td>
<input type="button" name="" id="" value="n!" onclick="calc1('n!')"/>
</td>
</tr>
</table>
</td>
下面代码是：大的table里的第二行的第二个单元格（数字板块），单元格内加入table表格
<td>
<table id="table2">
<tr>
<td>
<input type="button" name="" id="" value="7" onclick="num(7)"/>
</td>
<td>
<input type="button" name="" id="" value="8" onclick="num(8)"/>
</td>
<td>
<input type="button" name="" id="" value="9" onclick="num(9)"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="4" onclick="num(4)"/>
</td>
<td>
<input type="button" name="" id="" value="5" onclick="num(5)"/>
</td>
<td>
<input type="button" name="" id="" value="6" onclick="num(6)"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="1" onclick="num(1)"/>
</td>
<td>
<input type="button" name="" id="" value="2" onclick="num(2)"/>
</td>
<td>
<input type="button" name="" id="" value="3" onclick="num(3)"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="0" onclick="num(0)"/>
</td>
<td>
<input type="button" name="" id="" value="." onclick="dian()"/>
</td>
<td>
<input type="button" name="" id="" value="=" onclick="calc('=')"/>
</td>
</tr>
</table>
</td>
下面代码是：大的table里的第二行的第三个单元格（右边板块），单元格内加入table表格
<td>
<table id="table3">
<tr>
<td>
<input type="button" name="" id="" value="+" onclick="calc('+')"/>
</td>
<td>
<input type="button" name="" id="" value="取整" onclick="calc('取整')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="-" onclick="calc('-')"/>
</td>
<td>
<input type="button" name="" id="" value="取余" onclick="calc('%')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="*" onclick="calc('*')"/>
</td>
<td>
<input type="button" name="" id="" value="x^y" onclick="calc('x^y')"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" id="" value="/" onclick="calc('/')"/>
</td>
<td>
<input type="button" name="" id="" value="+/-" onclick="calc('+/-')"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
编写完HTML部分后，对计算器按钮进行布局和美化，可以根据个人想法设置
以下是CSS部分：
#main{
border: 10px outset orange;
margin: 30px auto;
background: #ABABAB;
box-shadow: 5px 5px #CCCCCC inset;
padding-top: 20px;
}/*设置最外层表格样式*/
th{
height: 40px;
border: 2px outset #CCCCCC;
}
#result{
width: 100%;
height: 100%;
box-shadow: 3px 3px #CCCCCC inset;
text-align: right;
font-size: 20px;
}
[type=button]{
width: 60px;
height: 40px;
box-shadow: 3px 3px #CCCCCC,3px 3px #CCCCCC inset;
background-image:linear-gradient(to top right,#000,#fff);/*设置按钮渐变色*/
color: #00FFFF;
font-weight: bold;
margin: 5px;
border-radius: 10px/6px;
}/*设置所有butto的样式*/
#table1,#table2,#table3{
margin-top: 20px;
border: 2px outset #CCCCCC;
}
[type=button]:hover{
background-image:linear-gradient(to top right,#fff,#000);
}
#time{
margin:;
padding:;
color:#00FFFF;
}
样式设置好后，开始JS部分，实现简易计算功能
首先定义几个全局变量，后面实现计算功能时会用上
var sum=0;
var Boo=false;//判断是否按下计算符号
var ope;//存储计算符号的变量
当我们按下数字键的时候，数字会显示出来，所以先获取数字
//获取数字
function num(Num) {
var result=document.getElementById('result');
if (Boo) {
result.value=Num;
Boo=false;//若接受过运算符，文本框清零
}else{
if (result.value=='0') {
result.value=Num;
} else{
result.value+=Num;
}
}
}
这个时候，在测试的时候，多次点击小数点，小数点会出现多次，需要避免出现这种情况，indexOf检索字符，没有检索到时，返回-1
//避免出现两个小数点
function dian () {
var result=document.getElementById('result');
if (result.value.indexOf('.')==-1) {
result.value+='.';
}
}
清零，可以是重新加载页面，也可以将默认值设为零没，这里设置为重新加载；
退格，没点一次按钮，字符长度减1，当为空时，设置默认值为0；
//清零，重新加载页面
function clean() {
location.replace(location)
}
//退格
function backspace() {
var result=document.getElementById('result');
result.value=result.value.substring(0,result.value.length-1);
if (result.value=='') {
result.value=0;
}
}
实现这些功能后，进入简易计算功能，需要用到之前定义的全局变量
首先实现二元运算，如加减乘除等 ，涉及到两个数字的：
function calc(op){
var result=document.getElementById('result').value*1;
if (result=='') {
result=0;
}
Boo=true;
switch (ope){
case '+':
sum=sum+result;
break;
case '-':
sum=sum-result;
break;
case '*':
sum=sum*result;
break;
case '/':
sum=sum/result;
break;
case '取整':
sum=Math.floor(sum/result);
break;
case '%':
sum=sum%result;
break;
case 'x^y':
sum=Math.pow(sum,result);
break;
case '+/-':
sum=result*(-1);
break;
case '=':
document.getElementById('result').value=sum;
break;
default:sum=parseFloat(result);
break;
}
document.getElementById('result').value=sum;
ope=op;
}
接着实现一元运算，首先进行角度与弧度的转换，且需要对浮点数的计算进行一点简单处理：
function calc1(op){
var result=document.getElementById('result').value*1;
var π=Math.PI*2/360;//角度转换成弧度
var deg=360/(Math.PI*2);//弧度转换成角度
if (result=='') {
result=0;
}
Boo=true;
switch (op){
case 'sin':
sum=Math.round(Math.sin(result* π)*100000000000000)/100000000000000; //sum=Math.sin(result* π);Math.round()解决浮点数运算问题
break; //程序处理浮点数的时候，每一次运算都会取一次近似值，所以最终的结果，总是近似值，而不是我们通过代数得出的结果。
case 'cos':
sum=Math.round(Math.cos(result* π)*100000000000000)/100000000000000;
break;
case 'tan':
sum=Math.round(Math.tan(result* π)*100000000000000)/100000000000000;
break;
case 'asin':
sum=Math.round(Math.asin(result)*deg*100000000000000)/100000000000000+'°';
break;
case 'acos':
sum=Math.round(Math.acos(result)*deg*100000000000000)/100000000000000+'°';
break;
case 'atan':
sum=Math.round(Math.atan(result)*deg*100000000000000)/100000000000000+'°';
break;
case 'PI':
sum=Math.PI;
break;
case '1/x':
sum=1/parseFloat(result);
break;
case 'exp':
sum=Math.exp(result);
break;
case 'Inx':
sum=Math.log(result);
break;
case 'lgx':
sum=Math.log10(result);
break;
case 'n!':
for (var i=1;i<result;i++) {
sum=sum*i;
}
break;
default:sum=parseFloat(result);
break;
}
document.getElementById('result').value=sum;
}
这样计算器的简易功能基本就实现了，最后我们加上时间，当打开页面的时候，出现时钟：
//设置时间
window.onload=function(){
showTime();
}
function showTime(){
var today=new Date();
var y=today.getFullYear();
var M=today.getMonth()+1;
var d=today.getDate();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
var week=today.getDay();
var w=new Array('星期天','星期一','星期二','星期三','星期四','星期五','星期六');
for (var i=0;i<w.length;i++) {
document.getElementById('time').innerHTML=y+'年'+M+'月'+d+'日'+'</br>'+h+":"+m+":"+s+' '+w[week];
}
setTimeout('showTime()',500);
}
//数字小于10时，前面添加一个0
function checkTime(i){
if (i<10) {
i="0" + i;
}
return i
}
