说明:
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 = "";
}
运行界面如下: