HTML 计算器

最新推荐文章于 2023-03-24 09:53:26 发布

RainbowCat#0925

最新推荐文章于 2023-03-24 09:53:26 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/qq_40907669/article/details/119868056

版权

效果图

css部分

.jsq{
						width: 298px;
						padding: 5px 5px;
						background-color:#F3F0E5;
						border: 2px #D1D1D1 solid;
						margin: 0px auto;
					}
					#header{
						font-size: 14px;
						margin-left: 10px;
					}
					.js{
					padding: 0px 10px;
					}
					.js div{
						text-align: right;
						background-color:#F3F0E5 ;
						border: 0px;
						width: 100%;
						
					}
					#txt1{
						height: 28px;
						line-height: 28px;
						color: #666;
						font-size: 16px;
						
					}
					#txt2{
						padding-bottom: 10px;
						color: #000000;
						font-size: 45px;
						font-weight: bold;
						height: 65px;
					}
					
					
					.but{
						
					}
					.but td{
						display: inline-block;
						width: 72px;
						height: 51px;
						line-height: 51px;
						text-align: center;
						padding: 0px;
						margin: 1px;
						background-color:white;
						font-weight: bold;
						box-sizing: border-box;
					}
					.but td:hover{
						border:rgb(168,165,159)  solid 2px;
						background-color: #E1DFD8;
					}
					tr:nth-child(1) td{
						background-color: #F8F7F0;
					}
					tr td:nth-child(4){
						background-color: #F8F7F0;
					}
					tr:nth-last-child(1) td:nth-last-child(1){
						background-color:#ADABA5 ;
					}
					tr:nth-last-child(1) td:nth-last-child(1):hover{
						background-color:#767572 ;
					}

JS部分

	var flag = true;
					function num(txt){
						var a = parseFloat(txt.innerText);
						var t2 =document.getElementById("txt2");
						var b = t2.innerText;
						
							if(b.substr(0,1)==0||flag){
								t2.innerHTML=a;
							}else{
								b = b.concat(a);
								t2.innerText=b;
							}
							flag=false;
					}
					
					function js(txt){
						var a = txt.innerText;
						var t1 =document.getElementById("txt1");
						var t2 =document.getElementById("txt2").innerText;
						var b = t2+a;
						t1.innerText=b
						flag=true;
					}
					
					
					function jg(){
						var t1 =document.getElementById("txt1");
						var t2 =document.getElementById("txt2");
						
						var t11 = t1.innerText;
						var t22 = t2.innerText;
						
						var a = parseFloat(t11.substr(0,t11.length));
						var b = parseFloat(t22);
						var c = t11.substr(t11.length-1,t11.length);
						t1.innerText = (t11.concat(t22)).concat("=");
						switch(c){
							case '+':
							t2.innerText=a+b
							break;
							
							case '-':
							t2.innerText=a-b
							break;
							
							case '✖':
							t2.innerText=a*b
							break;
							
							case '/':
							t2.innerText=a/b
							break;
							
							case '%':
							t2.innerText=a%b
							break;
						}
						
						}
						function ce(){
							var t2 =document.getElementById("txt2");
							t2.innerText=0;
						}
						function c(){
							var t1 =document.getElementById("txt1");
							t1.innerText=null;
							ce();
						}
						
						function rmove(){
							var t2 =document.getElementById("txt2");
							t2.innerText	= (t2.innerText).substr(0,(t2.innerText).length-1);
							
						}

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1">
				<title>计算器</title>
			</head>
			<body>
				
				
				<div class="jsq">
					<div id="header">
						计算器
					</div>
					
					<div class="js">
						<div id="txt1">
						
						</div>
						<div id="txt2">
							0
						</div>
						
					</div>
					
					<div class="but">
						<table  cellspacing="0" cellpadding="0">
							<tr id="#top">
								<td onclick="js(this)">%</td>
								<td onclick="ce()">CE</td>
								<td onclick="c()">C</td>
								<td onclick="rmove()">⇦</td>
							</tr>
							
							
							<tr>
								<td onmouseover="f(this)" onclick="num(this)">7</td>
								<td onclick="num(this)">8</td>
								<td onclick="num(this)">9</td>
								<td onclick="js(this)">✖</td>
							</tr>
							
							<tr >
								<td onclick="num(this)">4</td>
								<td onclick="num(this)">5</td>
								<td onclick="num(this)">6</td>
								<td onclick="js(this)">-</td>
							</tr>
							<tr >
								<td onclick="num(this)">1</td>
								<td onclick="num(this)">2</td>
								<td onclick="num(this)"onclick="js()">3</td>
								<td onclick="js(this)">+</td>
							</tr>
							<tr >
								<td onclick="js()">±</td>
								<td onclick="num(this)">0</td>
								<td onclick="num(this)">.</td>
								<td onclick="jg()">=</td>
							</tr>
						</table>
						
						
						
					</div>
				
				</div>
			</body>
		</html>
	</body>
</html>

未完善

RainbowCat#0925

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 计算器

效果图css部分.jsq{ width: 298px; padding: 5px 5px; background-color:#F3F0E5; border: 2px #D1D1D1 solid; margin: 0px auto; } #header{ font-size: 14px; margin-left: 10px; } .js{ padd...
复制链接

扫一扫