Web网页版简易计算器


说明:
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 = "";
}


运行界面如下:
Web网页版简易计算器_第1张图片

你可能感兴趣的:(Web)