混合计算器

最新推荐文章于 2021-03-27 07:22:43 发布

原创最新推荐文章于 2021-03-27 07:22:43 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用CSS进行样式设计的虚拟键盘布局方案，包括键盘的尺寸、按钮样式和交互效果。通过灵活运用Flex布局，实现了按钮的整齐排列，并对按钮的点击事件进行了JavaScript处理，以实现计算器的基本功能。

css：

<style type="text/css">
	*{margin: 0px auto;padding: 0px;user-select:none}
	.keyboard{
		width: 400px;
		height: 600px;
		border: 1px solid black;
		display: flex;
		flex-flow: row wrap;
	}
	.txt{
		text-align: right;
		display: block;
		width: 400px;
		height: 100px;
		line-height: 100px;
		font-weight: 900;
		font-size:32px;
		border: none;
	}
	.keyboard div{
		cursor: pointer;
		text-align: center;
		line-height: 100px;
		font-weight: 900;
		font-size:26px;
		width: 100px;
		height: 100px;
		box-sizing: border-box;
		border: 1px solid black;
	}
	.keyboard button{
		cursor: pointer;
		text-align: center;
		line-height: 100px;
		font-weight: 900;
		font-size:26px;
		width: 100px;
		height: 100px;
		/*border: none;*/
		outline:none;
	}
</style>

body：

<div class="keyboard">
	<input type="text" class="txt" readonly="true">
	<button>AC</button>
	<button>Del</button>
	<button>%</button>
	<button>÷</button>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<button>×</button>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<button>-</button>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<button>+</button>
	<div>.</div>
	<div>0</div>
	<button>()</button>
	<button>=</button>
</div>

script：

<script type="text/javascript">
	var tt = /^[\%\÷\×\-\+]/g;
	var ts = /[0-9]{1,}[\+\-][0-9]{1,}/g ;
	var tc = /[0-9]{1,}[\%\÷\×][0-9]{1,}/g ;
	var keybd = document.querySelector(".keyboard");
	var keytxt = document.querySelector(".txt");
	keybd.addEventListener("click",function(e){
		var event = e || window.event;
		var target = event.target || event.srcElement;
		if(target.childNodes.length===1){
			if(target.childNodes[0].nodeType === 3){
				if(target.tagName.toLocaleLowerCase() === "div"){
					keytxt.value += target.innerText;
				}else if(target.tagName.toLocaleLowerCase() === "button"){
					switch(target.innerText){
						case "AC":
						keytxt.value = "";
						break;
						
						case "=":
						ff(keytxt.value);
						break;
						
						case "Del":
						keytxt.value = keytxt.value.substring(0,keytxt.value.length-1)	
						break;
						
						default:
						keytxt.value += target.innerText;
						if(tt.test(keytxt.value)){
							keytxt.value = "0"+keytxt.value;
						}
						break;
					}
				}
			}
		}
	},false)
	var arr;
	var brr;
	
	function ff(str){
		var att;
		
		if(str.match(tc)){
			console.log(str.match(tc),str.match(tc)[0])
			var fir = str.match(tc)[0];
			console.log(fir)
			if(fir.indexOf("×") !== -1){
				arr = parseInt(fir.substring(0,fir.indexOf("×")))*parseInt(fir.substring(fir.indexOf("×")+1,fir.length));
			}
			if(fir.indexOf("÷") !== -1){
				arr = parseInt(fir.substring(0,fir.indexOf("÷")))/parseInt(fir.substring(fir.indexOf("÷")+1,fir.length));
			}
			if(fir.indexOf("%") !== -1){
				arr = parseInt(fir.substring(0,fir.indexOf("%")))%parseInt(fir.substring(fir.indexOf("%")+1,fir.length));
			}	
			att = str.replace(new RegExp(fir),arr);
			
			if(/[\%\÷\×]/g.test(att)){
				ff(att)
			}else if(/[\+\-]/g.test(att)){
				fn(att)
			}else{
				keytxt.value = att;
			}
		}else{
			fn(str)
		}
	}	
	function fn(sac){
		var acc;
		if(sac.match(ts)){
			var fic = sac.match(ts)[0];
			console.log(fic)
			if(fic.indexOf("+") !== -1){
				brr = parseInt(fic.substring(0,fic.indexOf("+")))+parseInt(fic.substring(fic.indexOf("+")+1,fic.length));
			}else if(fic.indexOf("-") !== -1){
				brr = parseInt(fic.substring(0,fic.indexOf("-")))-parseInt(fic.substring(fic.indexOf("-")+1,fic.length));
			}
			if(brr<0){
				keytxt.value = "无法计算负数"
			}else{
				acc = brr + sac.split(fic).join("");
				if(/[\+\-]/g.test(acc)){
					fn(acc)
				}else{
					keytxt.value = acc
				}
			}
			
		}
	}
</script>