用HTML5制作一个简易计算器

用H5制作一个简易计算器

最近刚学JavaScript,之后紧接着做了一个简易的计算器,能够实现数字的加减乘除运算。
用HTML5制作一个简易计算器_第1张图片
首先,先用HTML5搭建好计算器大体框架。我这里用了两个表格,一个充当显示器,另一个表格就做成计算器按键部分。

<body>
		
	<table border="5px" align="center">
		<tr height="80px"><td width="312px"><div id="end">div>td>tr>
	table>
		
		
	<table border="5px" cellspacing="0" align="center" onclick="show()">	
		<tr height="54px">
			<td><button class="butt">7button>td>
			<td><button class="butt">8button>td>
			<td><button class="butt">9button>td>
			<td><button class="butt">+button>td>
				
			<td><button class="butt" onclick="clearly()">Cbutton>td>
		tr>
		<tr height="54px">
			<td><button class="butt">4button>td>
			<td><button class="butt">5button>td>
			<td><button class="butt">6button>td>
			<td><button class="butt">-button>td>
				
			<td rowspan="3">
				<button class="butt" id="is" onclick="Calculate()">=button>
			td>
		tr>
		<tr height="54px">
			<td><button class="butt">1button>td>
			<td><button class="butt">2button>td>
			<td><button class="butt">3button>td>
			<td><button class="butt">*button>td>
		tr>
		<tr height="54px">
			<td><button class="butt">0button>td>
			<td><button class="butt">.button>td>
			<td><button class="butt">00button>td>
			<td><button class="butt">/button>td>
		tr>
	table>
body>

下面是效果

7 8 9 + C
4 5 6 - =
1 2 3 *
0 . 00 /
有点丑,丑是必然的,这时候再用CSS处理一下,就出现了刚刚第一张图片的效果。
	

最后就是嵌入脚本啦,

	<script type="text/javascript">
				//定义a储存算式,
				//bool记录上一次按完运算符后是否按过等于号
		var a="";
		var bool=false;
				//按按钮后触发事件,将按过的按钮显示在显示器上
		function show(){
			element=event.srcElement.innerText;
			if (element=="="||element=="C") {
				return;
			}
			if (bool&&(element!="+" && element!="/" && element!="*" && element!="-")) {			
					a="";
			}
			bool=false;
			a+=element;
			document.getElementById('end').innerText=a;
		}
				//按等于号后触发事件,计算显示器中的式子
		function Calculate(){
			bool=true;
			document.getElementById('end').innerText=eval(a);
			a=eval(a);
			if(a>=999999){
				a="Err";
			}
		}
				//按归零键后触发事件,将显示器归零
		function clearly(){
			alert("Cleared!!!");
			a="";
			document.getElementById('end').innerText="0";
		}
	</script>

OK!计算器大功告成。
下面是全部代码,有不足的地方还希望大家指正。


<html>
<head>
	
	<title>Calculatortitle>
	<meta charset="utf-8"/>
	<style type="text/css">
				/*这里是调节等于号按钮*/
		#is{height: 166px;}
				/*这里是调节所有的按钮*/
		.butt{
			height:52px;
			width: 60px;
			background: #ff00ff;
			border-width: 0;
			cursor: pointer;
			color: white;
			font-size: 30px;
			border-color: blue;}
				/*这里是调节计算器的显示器*/
				/*让超出范围的数字显示为...*/
		#end{
			font-size: 40px;
			max-width: 316px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;}
	style>
	<script type="text/javascript">
				//定义a储存算式,
				//bool记录上一次按完运算符后是否按过等于号
		var a="";
		var bool=false;
				//按按钮后触发事件,将按过的按钮显示在显示器上
		function show(){
			element=event.srcElement.innerText;
			if (element=="="||element=="C") {
				return;
			}
			if (bool&&(element!="+" && element!="/" && element!="*" && element!="-")) {			
					a="";
			}
			bool=false;
			a+=element;
			document.getElementById('end').innerText=a;
		}
				//按等于号后触发事件,计算显示器中的式子
		function Calculate(){
			bool=true;
			document.getElementById('end').innerText=eval(a);
			a=eval(a);
			if(a>=999999){
				a="Err";
			}
		}
				//按归零键后触发事件,将显示器归零
		function clearly(){
			alert("Cleared!!!");
			a="";
			document.getElementById('end').innerText="0";
		}
	script>
head>
<body>
	
	<table border="5px" align="center">
		<tr height="80px"><td width="312px"><div id="end">div>td>tr>
	table>
	
	
	<table border="5px" cellspacing="0" align="center" onclick="show()">	
		<tr height="54px">
			<td><button class="butt">7button>td>
			<td><button class="butt">8button>td>
			<td><button class="butt">9button>td>
			<td><button class="butt">+button>td>
		
			<td><button class="butt" onclick="clearly()">Cbutton>td>
		tr>
		<tr height="54px">
			<td><button class="butt">4button>td>
			<td><button class="butt">5button>td>
			<td><button class="butt">6button>td>
			<td><button class="butt">-button>td>
		
			<td rowspan="3">
				<button class="butt" id="is" onclick="Calculate()">=button>
			td>
		tr>
		<tr height="54px">
			<td><button class="butt">1button>td>
			<td><button class="butt">2button>td>
			<td><button class="butt">3button>td>
			<td><button class="butt">*button>td>
		tr>
		<tr height="54px">
			<td><button class="butt">0button>td>
			<td><button class="butt">.button>td>
			<td><button class="butt">00button>td>
			<td><button class="butt">/button>td>
		tr>
	table>
body>
html>

你可能感兴趣的:(HTML,HTML,Javascript,计算器)