说明：
1、这个计算器的功能比较简单，包括加减乘除，小数点，退格，清除以及等于。
2、首先写出html，即界面主要框架；再写出css，即属性，使框架看起来美观一些；最后就是javascript，就是功能的实现，主要有计算（调用js内置强大的eval() 函数）、退格、清除、等于四个功能。
3、html和css两部分不难，javascript会麻烦一点。
推荐一篇不错的博客：
js中的eval方法详解（一）–eval方法的初级应用
HTML代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>网页版计算器</title><link href="css/new_file.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/new_file.js"></script></head><body><div id="calculator"><div id="head"><h3>网页版简单计算器</h3></div><div id="show" align="center"><input type="text" id="text" ></div><div id="cuttom"><table align="center"><tr><td><input type="button" value="7" onclick="display(7)"></td><td><input type="button" value="8" onclick="display(8)"></td><td><input type="button" value="9" onclick="display(9)"></td><td><input type="button" value="+" onclick="display('+')"></td><td><input type="button" value="-" onclick="display('-')"></td></tr><tr><td><input type="button" value="4" onclick="display(4)"></td><td><input type="button" value="5" onclick="display(5)"></td><td><input type="button" value="6" onclick="display(6)"></td><td><input type="button" value="*" onclick="display('*')"></td><td><input type="button" value="/" onclick="display('/')"></td></tr><tr><td><input type="button" value="1" onclick="display(1)"></td><td><input type="button" value="2" onclick="display(2)"></td><td><input type="button" value="3" onclick="display(3)"></td><td><input type="button" value="(" onclick="display('(')"></td><td><input type="button" value=")" onclick="display(')')"></td></tr><tr><td><input type="button" value="." onclick="display('.')"></td><td><input type="button" value="0" onclick="display(0)"></td><td><input type="button" value="←" onclick="back()"></td><td><input type="button" value="c" onclick="reset()"></td><td><input type="button" value="=" onclick="equals()"></td></tr></table></div></div></body></html>
CSS代码如下：
body{background:#CDC673;}h3{font-family:微软雅黑;font-size: 35px;text-align: center;}#show input{width:511px;height:60px;font-size:30px;}#cuttom input{width: 100px;height: 70px;font-size: 28px;}#cuttom input:hover{background: lightgray;}
JS代码如下：
function $(id){return document.getElementById(id);}var str;var result;function display(str0)//显示到文本框{str = document.getElementById("text");str.value = str.value + str0;}function equals()//等于{str = document.getElementById("text");result = eval(str.value);str.value = result;}function back()//退格{str = document.getElementById("text");str.value = str.value.substring(0,str.value.length-1);}function reset()//清除{str = document.getElementById("text");str.value = "";}
运行界面如下：
