第三十三天：js写的一个计算器

最新推荐文章于 2022-01-03 18:54:56 发布

迷失的夜行者

最新推荐文章于 2022-01-03 18:54:56 发布

阅读量474

点赞数

分类专栏： javaScript技术

本文链接：https://blog.csdn.net/java_wht/article/details/72939965

版权

javaScript技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<!--
    	作者：57403859@qq.cosm
    	时间：2017-06-08
    	描述：计算器的实现方法
    -->
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			.out{
				width:300px;
				height:400px;
				background-color: whitesmoke;
				border: 1px solid black;
				margin-left: 33%;
			}
			.inTop{
				width: 240px;
				height: 75px;
				background-color: darkgrey;
				border: 1px solid grey;
				margin-top:20px ;
				
			}
			.inBottom{
				width: 240px;
				height: 280px;
				background-color: darkgrey;
				margin-top: 10px;
			}			
			.input{
				margin-top:9px ;
				width:200px;
				height:50px;
				font-size: 24px;
			}
			.table{
				width: 200px;
				height: 95%;
				margin-top: 20px ;
				padding-top: 20px;
				border-color:#DB7093;
				font-size: 24px;
			}
		</style>
		<script>
			//寄存数值
			var num1;
			var char;
			//改变显示值
			function jia(){
				num1=document.getElementById("input").value;
				char="jia";
				document.getElementById("input").value="";
			}
			function jian(){
				num1=document.getElementById("input").value;
				char="jian";
				document.getElementById("input").value="";
				
			}
			function cheng(){
			    num1=document.getElementById("input").value;
				char="cheng";
				document.getElementById("input").value="";
				
			}
			function chu(){
				num1=document.getElementById("input").value;
				char="chu";
				document.getElementById("input").value="";
				
			}
			function yu(){
				num1=document.getElementById("input").value;
				char="yu";
				document.getElementById("input").value="";
			}	
			function shan(){
				document.getElementById("input").value="";
			}
			//这里面进行计算结果的显示
			function deng(){
				if(char=="jia"){
					var num2=document.getElementById("input").value;
					document.getElementById("input").value=parseFloat(num1)+parseFloat(num2);
				}
				if(char=="jian"){
					var num2=document.getElementById("input").value;
					document.getElementById("input").value=parseFloat(num1)-parseFloat(num2);
				}
				if(char=="cheng"){
					var num2=document.getElementById("input").value;
					document.getElementById("input").value=parseFloat(num1)*parseFloat(num2);
				}
				if(char=="chu"){
					var num2=document.getElementById("input").value;
					document.getElementById("input").value=parseFloat(num1)/parseFloat(num2);
				}
				if(char=="yu"){
					var num2=document.getElementById("input").value;
					document.getElementById("input").value=parseFloat(num1)%parseFloat(num2);
				}
			}
			//0,1,2,3,4,5,7,8,9,.数值的显示
			function one(){
				document.getElementById("input").value=document.getElementById("input").value+1;
			}
			function two(){
				document.getElementById("input").value=document.getElementById("input").value+2;
			}
			function three(){
				document.getElementById("input").value=document.getElementById("input").value+3;
			}
			function four(){
				document.getElementById("input").value=document.getElementById("input").value+4;
			}
			function five(){
				document.getElementById("input").value=document.getElementById("input").value+5;	
			}
			function six(){
				document.getElementById("input").value=document.getElementById("input").value+6;	
			}
			function seven(){
				document.getElementById("input").value=document.getElementById("input").value+7;	
			}
			function eight(){
				document.getElementById("input").value=document.getElementById("input").value+8;	
			}
			function nine(){
				document.getElementById("input").value=document.getElementById("input").value+9;	
			}
			function point(){
					document.getElementById("input").value=document.getElementById("input").value+".";
			}
			function zero(){
				document.getElementById("input").value=document.getElementById("input").value+0;	
			}
		</script>
	</head>
	<body>
		<div class="out" align="center">
			<div class="inTop"  align="center">
					<input  id="input"  class="input"  type="text" value="" />					
			</div>
			<div class="inBottom">
				<div class="table" >
					<table border="1" width="100%" height="90%">
						<tr align="center">
							<td οnclick="shan()">C</td>
							<td οnclick="yu()">%</td>
							<td οnclick="chu()">÷</td>
							<td οnclick="cheng()">×</td>
						</tr>
						
						<tr align="center">
							<td οnclick="seven()">7</td>
							<td οnclick="eight()">8</td>
							<td οnclick="nine()">9</td>
							<td οnclick="jian()">-</td>
						</tr>

						<tr align="center">
							<td οnclick="four()">4</td>
							<td οnclick="five()">5</td>
							<td οnclick="six()">6</td>
							<td οnclick="jia()">+</td>
						</tr>

						<tr  align="center">
							<td οnclick="one()">1</td>
							<td οnclick="two()">2</td>
							<td οnclick="three()">3</td>
							<td rowspan="2" οnclick="deng()">=</td>
						</tr>

						<tr align="center">
							<td colspan="2" οnclick="zero()">0</td>
							<td οnclick="point()">.</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

迷失的夜行者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第三十三天：js写的一个计算器

 .out{ width:300px; height:400px; background-color: whitesmoke; border: 1px solid black; margin-
复制链接

扫一扫

专栏目录