首页 > 代码库 > js---计算器

js---计算器

==========================================================================================
计算器demo1:

<!DOCTYPE html>
<html>
	<style>
		div {
			position: absolute;
			background-color: cornflowerblue;
			left: 30%;
			top: 30%;
			height: 50%;
			width: 60%;
		}
		
		table {
			width: 100%;
			height: 100%;
			border-color: black;
		}
		
		input {
			position: absolute;
			top: 5%;
			left: 5%;
			width: 85%;
			height: 5%;
		}
		
		td {
			cursor: pointer;
			background-color: gold;
			text-align: center;
		}
	</style>

	<head>
		<meta charset="utf-8" />
		<title>计时器</title>
	</head>

	<body>
		<script>

			//自定义函数,实现数字或运算符的输入!
			function inputother(str)
			{
				//获取输入框
				var input = document.getElementById("i1");
				//把输入框的value增加入参的字符串
				input.value=http://www.mamicode.com/input.value+str;"i1");
				input.value = http://www.mamicode.com/eval(input.value);//通过eval方法计算当前输入内容。"1" cellspacing="10" cellpadding="2">

				<tr>
					<td colspan="4">
						<input id="i1" value=""/></td>
				</tr>
				<tr>
					<td onclick="inputother(‘1‘)">1</td>
					<td onclick="inputother(‘2‘)">2</td>
					<td onclick="inputother(‘3‘)">3</td>
					<td onclick="inputother(‘+‘)">+</td>
				</tr>
				<tr>
					<td onclick="inputother(‘4‘)">4</td>
					<td onclick="inputother(‘5‘)">5</td>
					<td onclick="inputother(‘6‘)">6</td>
					<td onclick="inputother(‘-‘)">-</td>
				</tr>
				<tr>
					<td onclick="inputother(‘7‘)">7</td>
					<td onclick="inputother(‘8‘)">8</td>
					<td onclick="inputother(‘9‘)">9</td>
					<td onclick="inputother(‘*‘)">*</td>
				</tr>
				<tr>
					<td onclick="inputother(‘0‘)">0</td>
					<td onclick="inputother(‘.‘)">.</td>
					<td onclick="inputequaler()">=</td>
					<td onclick="inputother(‘/‘)">/</td>
				</tr>
			</table>
			
		</div>
	</body>
</html>
===========================================================================================
计算器:demo2

<!DOCTYPE html>
<html>
	<style>
		div {
			position: absolute;
			background-color: cornflowerblue;
			left: 30%;
			top: 30%;
			height: 50%;
			width: 60%;
		}
		table {
			width: 100%;
			height: 100%;
			border-color: black;
		}
		input {
			position: absolute;
			top: 5%;
			left: 5%;
			width: 85%;
			height: 5%;
		}
		td {
			cursor: pointer;
			background-color: gold;
			text-align: center;
		}
	</style>
	<head>
		<meta charset="utf-8" />
		<title>计时器</title>
	</head>
	<body>
		<script>
			var hasOperator = false; //是否已输入符号
			var a1 = null; //第1个数
			var a2 = null; //第2个数
			var op = null;//当前的运算符号
			//自定义函数,实现数字的输入!
			function inputnumber(str)
			{
				//获取输入框
				var input = document.getElementById("i1");
				//把输入框的value增加入参的字符串
				input.value=http://www.mamicode.com/input.value+str;"i1");
				//如果输入框为空,且非-,则什么都不干 
				if(input.valuehttp://www.mamicode.com/=="")
				{
					if(str!="-")
						return;
					else //如果为空,且输入-号,此时与普通的数字一样
					{
						inputnumber("-");
						return;
					}						
				}			
			
				op = str;//记录当前的运算
				//1 input的value转成a1
				a1 = parseFloat(input.value);
				//2  将input的value右边增加该符号
				input.value=http://www.mamicode.com/input.value+str;"i1");
				//1 将a2转换出来
				//获得符号位在字符串中的位置
				var pos = input.value.indexOf(op);
				//截取该位置往后的字符串,转成a2.
				a2 = parseFloat(input.value.substr(pos+1,input.value.length-pos));

				//2 根据当前的运算符号,计算结果
				var result;
				if(op=="+")
				{
					result = a1+a2;
				}
				else if (op=="-")
				{
					result = a1-a2;
				}
				else if (op=="*")
				{
					result = a1*a2;
				}
				else if (op=="/")
				{
					result = a1/a2;
				}
				//3 将input的value替换成该结果
				input.value = http://www.mamicode.com/result;"1" cellspacing="10" cellpadding="2">

				<tr>
					<td colspan="4">
						<input id="i1" value=""/></td>
				</tr>
				<tr>
					<td onclick="inputnumber(‘1‘)">1</td>
					<td onclick="inputnumber(‘2‘)">2</td>
					<td onclick="inputnumber(‘3‘)">3</td>
					<td onclick="inputoperator(‘+‘)">+</td>
				</tr>
				<tr>
					<td onclick="inputnumber(‘4‘)">4</td>
					<td onclick="inputnumber(‘5‘)">5</td>
					<td onclick="inputnumber(‘6‘)">6</td>
					<td onclick="inputoperator(‘-‘)">-</td>
				</tr>
				<tr>
					<td onclick="inputnumber(‘7‘)">7</td>
					<td onclick="inputnumber(‘8‘)">8</td>
					<td onclick="inputnumber(‘9‘)">9</td>
					<td onclick="inputoperator(‘*‘)">*</td>
				</tr>
				<tr>
					<td onclick="inputnumber(‘0‘)">0</td>
					<td onclick="inputnumber(‘.‘)">.</td>
					<td onclick="inputequaler()">=</td>
					<td onclick="inputoperator(‘/‘)">/</td>
				</tr>
			</table>
			
		</div>
	</body>
</html>
==========================================================================================
计算器3:匿名函数绑定

<!DOCTYPE html>
<html>
	<style>
		div {
			position: absolute;
			background-color: cornflowerblue;
			left: 30%;
			top: 30%;
			height: 50%;
			width: 60%;
		}
		
		table {
			width: 100%;
			height: 100%;
			border-color: black;
		}
		
		input {
			position: absolute;
			top: 5%;
			left: 5%;
			width: 85%;
			height: 5%;
		}
		
		td {
			cursor: pointer;
			background-color: gold;
			text-align: center;
		}
	</style>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<script>
		
		//给计算器的按钮添加点击事件
		function add_click_func()
		{
			//1 按标签名获取所有td的元素
			var tds = document.getElementsByTagName("td");
			
			//2 通过for循环,遍历该数组,逐个添加行为
			for(var i=0;i<tds.length;i++)
			{
				//如果td标签的id不是first或equlizer,则添加点击行为
				if (tds[i].id!="first"&&tds[i].id!="equlizer")
				{
					//绑定匿名函数,不允许入参!
					
					tds[i].onclick = function()
					{
					//匿名函数中,允许通过this关键字,访问被绑定的本对象
						//获取输入框
						var input = document.getElementById("i1");
						//当前按钮的文本,添加到输入框的value字符串中
						input.value=http://www.mamicode.com/input.value+this.innerText;"equlizer");
			eq.onclick = function()
			{
				var input = document.getElementById("i1");
				input.value = http://www.mamicode.com/eval(input.value);//通过eval方法计算当前输入内容。"add_click_func()">  <!--onload是当浏览器加载完html所有内容后,执行-->
		<div>

			<table border="1" cellspacing="10" cellpadding="2">

				<tr>
					<td colspan="4" id="first">
						<input id="i1" value=""/></td>
				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>+</td>
				</tr>
				<tr>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>-</td>
				</tr>
				<tr>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>*</td>
				</tr>
				<tr>
					<td>0</td>
					<td>.</td>
					<td id="equlizer">=</td>
					<td>/</td>
				</tr>
			</table>
			
		</div>
	</body>
</html>
================================================================================================

  

js---计算器