javascript实现的简单的计算器

最新推荐文章于 2021-05-09 09:03:47 发布

安静的蛐蛐

最新推荐文章于 2021-05-09 09:03:47 发布

阅读量551

点赞数

分类专栏：前端文章标签： javascript html css

本文链接：https://blog.csdn.net/vincent_yuan1991/article/details/52175843

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>计算机练习</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			#showdiv{
				border: solid 1px;
				width: 194px;
				margin: 5px;
			}
			#inp{
				border: solid 1px ;
				width: 184px;
				height: 30px;
				margin: 5px;
				text-align: right;
				padding-right: 5px;
			}
			input[type=button]{
				width: 40px;
				height: 30px;
				margin: 2px;
			}
			
		</style>
		<script type="text/javascript">
	
		/*
		 
		 * 计算器功能：
		 * 1.基本的加减乘除运算
		 * 2.在运算结果的基础上再次运算：
		 * 					当输入为数字，重新开始新的计算；否则在上次结果的基础上继续运算
		 * 3.C按钮的一次清除功能
		 * 4.del按钮的单个字符逐个清除的功能
		 * 
		 * 缺陷：
		 * 当连续多次输入0时，应该只显示一个0；
		 * 思路扩展
		 * 
		 * 
		 * */
			var flag=false;
			function test_jsq(num){
				//alert(num);
				var data=document.getElementById("inp");
				switch (num){
					case "C":
						data.value="";
						flag=false;
						break;
					case "DEL":
						data.value=data.value.substring(0,data.value.length-1);
						break;
					case "=":
						if(data.value.length>0){
							var d=eval(data.value);
						}
						data.value=d;
						flag=true;
						break;
					case "0":
					case "1":
					case "2":
					case "3":
					case "4":
					case "5":
					case "6":
					case "7":
					case "8":
					case "9":
						if(flag){
								data.value=num;
							}else{
								data.value+=num;
							}
						break;
					default:
						data.value+=num;
						flag=false;
						break;
				}
				
			}
			
		</script>
	</head>
	<body>
		<div id="showdiv">
			<input type="text" name="" id="inp" value="" /><br />
			<table id="tab">
				<tr>
					<td><input type="button" name="" id="" value="C" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="DEL" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="/" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="*" οnclick="test_jsq(this.value);"/></td>
				</tr>
				<tr>
					<td><input type="button" name="" id="" value="7" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="8" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="9" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="-" οnclick="test_jsq(this.value);"/></td>
				</tr>
				<tr>
					<td><input type="button" name="" id="" value="4" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="5" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="6" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="+" οnclick="test_jsq(this.value);"/></td>
				</tr>
				<tr>
					<td><input type="button" name="" id="" value="1" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="2" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="3" οnclick="test_jsq(this.value);"/></td>
					<td rowspan="2"><input type="button" name="" id="" value="=" style="height: 66px;" οnclick="test_jsq(this.value);"/></td>
				</tr>
				<tr>
					<td colspan="2"><input type="button" name="" id="" value="0" style="width: 86px;" οnclick="test_jsq(this.value);"/></td>
					<td><input type="button" name="" id="" value="." οnclick="test_jsq(this.value);"/></td>
				</tr>
			</table>
			
		</div>
	</body>
</html>

安静的蛐蛐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript实现的简单的计算器

计算机练习 #showdiv{ border: solid 1px; width: 194px; margin: 5px; } #inp{ border: solid 1px ; width: 184px; height: 30px; margin: 5px; text-align: right;
复制链接

扫一扫