js版本计算器第三版

最新推荐文章于 2024-07-16 15:41:31 发布

ihelloworld

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量693

点赞数

分类专栏： js 文章标签： button function input html border table

本文链接：https://blog.csdn.net/ihelloworld/article/details/7761648

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>计算器</title>
  <style type="text/css">
		input {
			width:50px;
		}

		#Backspace {
			width:120px;
		}
		#CE {
			width:110px;
		}
		#result {
			width:300px;
		}
  </style>
  <script type="text/javascript">
	function Calculator() {
		this.value = '';
		this.current = '';
		this.operator = '';

		this.process = function (code) {
			switch (code.toString()) {
				case '.' :
				case '0' :
				case '1' :
				case '2' :
				case '3' :
				case '4' :
				case '5' :
				case '6' :
				case '7' :
				case '8' :
				case '9' :
					this.setNum(code);
					break;
				case '+/-' :
					this.setSymbol();
					break;
				case 'CE' :
					this.clearResult();
					break;
				case 'C' :
					this.clearAll();
					break;
				case 'Backspace' : 
					this.deleteOne();
					break;
				case 'sqrt' :
				case '+' :
				case '-' :
				case '*' :
				case '/' :
				case '=' :
					this.calculator(code);
					break;
				}
		}

			
		// 设置数字
		this.setNum = function(num) {
			var result = document.getElementById("result");
			
			var pointIndex = this.current.toString().indexOf('.');
			if (pointIndex >= 0 && num == '.') {// 己经包含小数点,不再添加
				return;
			}

			var maxLength = 32;
			if (pointIndex) {// 包含小数点时,最大位数为33
				maxLength = 33;
			}
			// 超出最大位数限制
			if (this.current.toString().length >= maxLength) {
				return;
			}
			
			if (this.current.toString() == '0' && num != '.') {// 输入的数非小数，去掉前面的0
				this.current = num;
			} else {	
				this.current += "" + num;
			}

			result.value = this.current;
		}
		
		// 设置符号位
		this.setSymbol = function() {
			var result = document.getElementById("result");
			var num = new Number(result.value);
			var tmp = -num.valueOf();

			result.value = tmp;
		}

		// 清除结果,恢复为0
		this.clearResult = function() {
			var result = document.getElementById("result");
			result.value = '0';

			this.current = '';
		}

		// 清除结果,恢复为0，不清除符号
		this.clearAll = function() {
			var result = document.getElementById("result");
			result.value = '0';

			this.value = '';
			this.current = '';
			this.operator = '';
		}
		
		// 删除一位数
		this.deleteOne = function() {
			var result = document.getElementById("result");
			var tmp = result.value.length > 1 ? result.value.substr(0, result.value.length - 1) : 0;
			tmp = tmp == '-' ? 0 : tmp;

			result.value = tmp;
			this.current = tmp;
		}
		
		// 计算
		this.calculator = function(operator) {
			var result = document.getElementById("result");
			
			if (operator == 'sqrt') {
				if (result.value != "") {
					this.value = Math.sqrt(result.value);
					
					result.value = this.value;

					this.current = result.value;
				}
			} else {
				if (this.value != "" && this.current != "" && this.operator != '') {
					var firstNum = new Number(this.value).valueOf();
					var secondNum = new Number(this.current).valueOf();
					
					var value = 0;
					switch (this.operator) {
						case '+' :
							value = firstNum + secondNum;
							break;
						case '-' :
							value = firstNum - secondNum;
							break;
						case '*' :
							value = firstNum * secondNum;
							break;
						case '/' :
							value = firstNum / secondNum;
							break;
					}

					this.value = value;

					result.value = this.value.toString();
				} else {
					this.value = this.current == '' ? this.value : this.current;
				}

				if (operator == "=") {
					result.value = this.value == '' ? '0' : this.value;
					this.operator = '';
				} else {
					this.operator = operator;
				}
				this.current = '';
			}
		}
	}

	var c = new Calculator();


	document.onkeyup = function(e)
	{
		var evt = (typeof e == "undefined") ? window.event : e;
		if ((evt.keyCode >= 48 && evt.keyCode <= 57 && !evt.shiftKey) ||
			(evt.keyCode >= 96 && evt.keyCode <= 105 && !evt.shiftKey))
		{
		  if (evt.keyCode > 57)
		  {
			c.process(evt.keyCode - 96);
		  }
		  else
		  {
			c.process(evt.keyCode - 48);
		  }
		}
		else if ((evt.keyCode == 107 && !evt.shiftKey) || (evt.keyCode == 61 && evt.shiftKey) || (evt.keyCode == 187 && evt.shiftKey))
		{
		  c.process('+');
		}
		else if ((evt.keyCode == 109 && !evt.shiftKey) || (evt.keyCode == 189 && !evt.shiftKey))
		{
		  c.process('-');
		}
		else if ((evt.keyCode == 106 && !evt.shiftKey) || (evt.keyCode == 56 && evt.shiftKey))
		{
		  c.process('*');
		}
		else if ((evt.keyCode == 111 && !evt.shiftKey) || (evt.keyCode == 191 && !evt.shiftKey))
		{
		  c.process('/');
		}
		else if (evt.keyCode == 13 || (evt.keyCode == 61 && !evt.shiftKey) || (evt.keyCode == 187 && !evt.shiftKey))
		{
		  c.process('=');
		}
		else if ((evt.keyCode == 110 && !evt.shiftKey) || (evt.keyCode == 190 && !evt.shiftKey))
		{
			c.process('.');
		}
		else if (evt.keyCode == 27)
		{
		  c.process('C');
		}
		else if (evt.keyCode == 8)
		{
			c.process('Backspace');
		}

		return false;

		//alert(evt.keyCode);
	}
  </script>
 </head>

<body >
	<table border="0" width="300px">
	   <tr>
			<td colspan="5"><input type="text" id="result" value="0" style="text-align:right;" readonly="readonly" /></td>
		</tr>
		<tr>
			<td colspan="2"><input id="Backspace" type="button" value="Backspace" οnclick="c.process(this.value)" /></td>
			<td colspan="2"><input id="CE" type="button" value="CE" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="C" οnclick="c.process(this.value)" /></td>
		</tr>
		<tr>
			<td><input type="button" value="7" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="8" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="9" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="/" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="sqrt" οnclick="c.process(this.value)" /></td>
		</tr>
		<tr>
			<td><input type="button" value="4" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="5" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="6" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="*" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="%" οnclick="c.process(this.value)" /></td>
		</tr>
		<tr>
			<td><input type="button" value="1" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="2" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="3" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="-" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="1/x" οnclick="c.process(this.value)" /></td>
		</tr>
		<tr>
			<td><input type="button" value="0" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="+/-" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="." οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="+" οnclick="c.process(this.value)" /></td>
			<td><input type="button" value="=" οnclick="c.process(this.value)" /></td>
		</tr>
		</table>
</body>
</html>

ihelloworld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js版本计算器第三版

计算器 input { width:50px; } #Backspace { width:120px; } #CE { width:110px; } #result { width:300px; } function Calculator() { this.value = ''; this.current = '
复制链接

扫一扫