用 HTML+CSS+Javascript 做的计算器
时间：2009-08-12
来源：互联网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>计算器</title>
<style type="text/css">
<!--
table {
border:2px outset #f5f5f5;
background-color:#d6d3c3;
}
.button_style {
width:37px;
height:27px;
color:#3333FF;
}
.button_style_red {
width:37px;
height:27px;
color:red;
}
td {
height:29px;
}
-->
</style>
<script type="text/javascript">
<!--
var lastCommand='';
var result='0';
var start=false;
function numPress(num){
if(start){
document.form.sum.value="0";
}
if(document.form.sum.value=='0'){
if( num=='00'){
document.form.sum.value='0';
}else{
document.form.sum.value=num;
}
}else{
document.form.sum.value+=num;
}
}
function point(){
if(document.form.sum.value.indexOf(".")==-1){
document.form.sum.value+=".";
}
}
function BackSpace(){
var value=document.form.sum.value;
if(value.length==1){
document.form.sum.value='0';
}else{
document.form.sum.value=value.substr(0,value.length-1);
}
}
function clear_click(){
document.form.sum.value='0';
}
function operation(command){
var v=document.form.sum.value;
calculate(parseFloat(v));
lastCommand=command;
start=true;
}
function calculate(x){
switch(lastCommand){
case '+':
result+=x;
break;
case '-':
result-=x;
break;
case '*':
result*=x;
break;
case '/':
result/=x;
break;
case '%':
result%=x;
break;
case 's':
result=Math.sqrt(x);
break;
default:
result=x;
}
document.form.sum.value=result;
}
function CE(){
document.form.sum.value='0';
result='0';
}
function neg(){
var val=document.form.sum.value;
document.form.sum.value=-1*parseFloat(val);
}
-->
</script>
</head>
<body>
<form name="form" action="" method="post">
<table align="center" border="0px" width="200px" height="129">
<b>
<tr>
<td colspan="5">
<input style="width:196px" type="text" name="sum" value="0" readonly />
</td>
</tr>
<tr>
<td colspan="3">
<input class="button_style_red" style="width:120px;height:27px" type="button" name="" value="BackSpace" onclick="BackSpace()" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="CE" onclick="CE()" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="C" onclick="clear_click()" />
</td>
</tr>
<tr>
<td>
<input class="button_style" type="button" name="" value="7" onclick="numPress('7')" />
</td>
<td>
<input class="button_style" type="button" name="" value="8" onclick="numPress('8')" />
</td>
<td>
<input class="button_style" type="button" name="" value="9" onclick="numPress('9')" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="/" onclick="operation('/')" />
</td>
<td>
<input class="button_style" type="button" name="" value="sqrt" onclick="operation('s')" />
</td>
</tr>
<tr>
<td>
<input class="button_style" type="button" name="" value="4" onclick="numPress('4')" />
</td>
<td>
<input class="button_style" type="button" name="" value="5" onclick="numPress('5')" />
</td>
<td>
<input class="button_style" type="button" name="" value="6" onclick="numPress('6')" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="*" onclick="operation('*')" />
</td>
<td>
<input class="button_style" type="button" name="" value="%" onclick="operation('%')" />
</td>
</tr>
<tr>
<td>
<input class="button_style" type="button" name="" value="1" onclick="numPress('1')" />
</td>
<td>
<input class="button_style" type="button" name="" value="2" onclick="numPress('2')" />
</td>
<td>
<input class="button_style" type="button" name="" value="3" onclick="numPress('3')" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="-" onclick="operation('-')" />
</td>
<td>
<input class="button_style" type="button" name="" value="+/-" onclick="neg()" />
</td>
</tr>
<tr>
<td>
<input class="button_style" type="button" name="" value="0" onclick="numPress('0')" />
</td>
<td>
<input class="button_style" type="button" name="" value="00" onclick="numPress('00')" />
</td>
<td>
<input class="button_style" type="button" name="" value="." onclick="point()" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="+" onclick="operation('+')" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="=" onclick="operation('=')" />
</td>
</tr>
</b>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>计算器</title>
<style type="text/css">
<!--
table {
border:2px outset #f5f5f5;
background-color:#d6d3c3;
}
.button_style {
width:37px;
height:27px;
color:#3333FF;
}
.button_style_red {
width:37px;
height:27px;
color:red;
}
td {
height:29px;
}
-->
</style>
<script type="text/javascript">
<!--
var lastCommand='';
var result='0';
var start=false;
function numPress(num){
if(start){
document.form.sum.value="0";
}
if(document.form.sum.value=='0'){
if( num=='00'){
document.form.sum.value='0';
}else{
document.form.sum.value=num;
}
}else{
document.form.sum.value+=num;
}
}
function point(){
if(document.form.sum.value.indexOf(".")==-1){
document.form.sum.value+=".";
}
}
function BackSpace(){
var value=document.form.sum.value;
if(value.length==1){
document.form.sum.value='0';
}else{
document.form.sum.value=value.substr(0,value.length-1);
}
}
function clear_click(){
document.form.sum.value='0';
}
function operation(command){
var v=document.form.sum.value;
calculate(parseFloat(v));
lastCommand=command;
start=true;
}
function calculate(x){
switch(lastCommand){
case '+':
result+=x;
break;
case '-':
result-=x;
break;
case '*':
result*=x;
break;
case '/':
result/=x;
break;
case '%':
result%=x;
break;
case 's':
result=Math.sqrt(x);
break;
default:
result=x;
}
document.form.sum.value=result;
}
function CE(){
document.form.sum.value='0';
result='0';
}
function neg(){
var val=document.form.sum.value;
document.form.sum.value=-1*parseFloat(val);
}
-->
</script>
</head>
<body>
<form name="form" action="" method="post">
<table align="center" border="0px" width="200px" height="129">
<b>
<tr>
<td colspan="5">
<input style="width:196px" type="text" name="sum" value="0" readonly />
</td>
</tr>
<tr>
<td colspan="3">
<input class="button_style_red" style="width:120px;height:27px" type="button" name="" value="BackSpace" onclick="BackSpace()" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="CE" onclick="CE()" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="C" onclick="clear_click()" />
</td>
</tr>
<tr>
<td>
<input class="button_style" type="button" name="" value="7" onclick="numPress('7')" />
</td>
<td>
<input class="button_style" type="button" name="" value="8" onclick="numPress('8')" />
</td>
<td>
<input class="button_style" type="button" name="" value="9" onclick="numPress('9')" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="/" onclick="operation('/')" />
</td>
<td>
<input class="button_style" type="button" name="" value="sqrt" onclick="operation('s')" />
</td>
</tr>
<tr>
<td>
<input class="button_style" type="button" name="" value="4" onclick="numPress('4')" />
</td>
<td>
<input class="button_style" type="button" name="" value="5" onclick="numPress('5')" />
</td>
<td>
<input class="button_style" type="button" name="" value="6" onclick="numPress('6')" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="*" onclick="operation('*')" />
</td>
<td>
<input class="button_style" type="button" name="" value="%" onclick="operation('%')" />
</td>
</tr>
<tr>
<td>
<input class="button_style" type="button" name="" value="1" onclick="numPress('1')" />
</td>
<td>
<input class="button_style" type="button" name="" value="2" onclick="numPress('2')" />
</td>
<td>
<input class="button_style" type="button" name="" value="3" onclick="numPress('3')" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="-" onclick="operation('-')" />
</td>
<td>
<input class="button_style" type="button" name="" value="+/-" onclick="neg()" />
</td>
</tr>
<tr>
<td>
<input class="button_style" type="button" name="" value="0" onclick="numPress('0')" />
</td>
<td>
<input class="button_style" type="button" name="" value="00" onclick="numPress('00')" />
</td>
<td>
<input class="button_style" type="button" name="" value="." onclick="point()" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="+" onclick="operation('+')" />
</td>
<td>
<input class="button_style_red" type="button" name="" value="=" onclick="operation('=')" />
</td>
</tr>
</b>
</table>
</form>
</body>
</html>
作者: wulongshen 发布时间: 2009-08-12
不错 挺有意思
作者: 3656745 发布时间: 2009-08-12
怎么运行上面的时候有点问题哦，不能正常运算哦！
作者: ouseeker 发布时间: 2009-08-13
很好
作者: fengrui 发布时间: 2009-08-16
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
