• 周日. 5月 26th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

JavaScript-简易计算器

admin

11月 28, 2021

方法一:使用if else实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
	.box{
		position: absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		text-align:center;
		500px;
		height:600px;
		background-color:#aaa;
		/*background:linear-gradient(to bottom,red,orange,yellow,green,cyan,blue,purple);*/
		padding:10px 20px;
		
	}
	h1{
		-webkit-text-stroke:2px pink;
		-webkit-text-fill-color:lightblue;
		font-size:40px;
		text-shadow:20px -5px 5px pink;
		
	}
	div{
		display: inline-block;
	}
	#num1,#num2{
		margin:20px 5px;
		200px;
		height:100px;
		background-color:pink;
		text-align:center;
		border-radius:20px;
	}
	#mark{
		60px;
		height:60px;
		border:1px solid #aaa;
		border-radius:60px;
		font-size:50px;
	}
	#sign span{
		margin:20px 20px;
		display:inline-block;
		50px;
		height:50px;
		border:1px solid #aaa;
		border-radius:50px;
		background-color:pink;
		font-size:30px;

	}
	button{
		100px;
		height:50px;
		font-size:30px;
		border:1px solid #aaa;
		border-radius:25px;
		background-color:lightblue;
	}
	#result{
		margin:20px 0px;
		500px;
		height:100px;
		background-color:pink;
		text-align:center;
		line-height:100px;
		border-radius:25px;
	}
</style>
</head>
<body>
<div class="box">
	<h1>简易计算器</h1>
	<div id="result"></div>
	<div>
		<button onclick="counter()">=</button>
	</div>
	<br>
	<div><input type="text" id="num1"></div>
	<div id="mark">+</div>
	<div><input type="text" id="num2"></div>
	<br>
	<div id="sign">
		<span onclick="clear()"><-</span>
		<span onclick="plus()">+</span>
		<span onclick="minus()">-</span>
		<span onclick="times()">&times;</span>
		<span onclick="divide()">&divide;</span>
	</div>	
</div>

<script>
	//获取元素及元素值
	var num1=document.getElementById("num1");
	var num2=document.getElementById("num2");
	var mark=document.getElementById("mark");
	var result=document.getElementById("result");

	//计算器运算函数
	function counter(){

		//获取输入值
		var num1Value=Number(num1.value);
		var num2Value=Number(num2.value);
		// 对输入值进行判断
		if(num1.value=="" || num2.value==""){
			alert("请输入运算值");
			return;
		}
		else if(isNaN(num1Value)){
			alert("请在第一个输入框中输入正确的数字");
			return;
		}
		else if(isNaN(num2Value)){
			alert("请在第二个输入框中输入正确的数字");
			return;
		}


		//判断进行哪种运算			
		//加法
		if(mark.innerHTML=="+"){
			var plus=num1Value+num2Value;
			result.innerHTML=plus;
		}
		//减法
		else if(mark.innerHTML=="-"){
			var minus=num1Value-num2Value;
			result.innerHTML=minus;
		}
		//乘法
		else if(mark.innerHTML=="x"){
			var times=num1Value * num2Value;
			result.innerHTML=times;
		}
		//除法
		else if(mark.innerHTML=="÷"){
			var divide=num1Value/num2Value;
			result.innerHTML=divide;
		}
		
		
	}		
	// 运算符转换
	
	//选择<-清除数据
	function clear(){
		num1.innerHTML="";
		num2.innerHTML="";
		result.innerHTML="";
	}
	//1.选择+运算符号
	function plus(){
		mark.innerHTML="+";
	}

	//2.选择-运算符号
	function minus(){
		mark.innerHTML="-";
	}

	//3.选择x运算符号
	function times(){
		mark.innerHTML="x";
	}

	//4.选择÷运算符号
	function divide(){
		mark.innerHTML="÷";
	}
</script>
</body>
</html>

方法二:使用switch函数实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算器-switch</title>
</head>
<body>
	<!-- autofocus自动获取焦点,tabindex按tab键跳到下一个输入框 -->
	<div><input type="text" id="num1" autofocus="" tabindex="1"></div>
	<br>
	<div><input type="text" id="num2" ></div>
	<br>
	<div>
		<button onclick="show(1)">+</button>
		<button onclick="show(2)">-</button>
		<button onclick="show(3)">&times;</button>
		<button onclick="show(4)">&divide;</button>
		<button onclick="show(5)">AC</button>
	</div>
	<br>
	<textarea name="" id="result" cols="30" rows="10"></textarea>
	<!-- JS定义函数 -->
	<script>
		function show(n){
			//获取元素
			var num1=document.getElementById("num1");
			var num2=document.getElementById("num2");
			var result=document.getElementById("result");

			//获取元素值
			num1Value=num1.value;
			num2Value=num2.value;

			//判断输入是否合法
			if(num1.value==""||num2.value==""){
				alert("请输入运算值!");
				return;
			}
			else if(isNaN(num1.value)){
				alert("请在第一个输入框输入合法的数字!");
				return;
			}
			else if(isNaN(num2.value)){
				alert("请在第二个输入框输入合法的数字!");
				return;
			}

			//switch判断哪种运算
			switch(n){
				//加法
				case 1:
				result.innerHTML=Number(num1Value)+Number(num2Value);
				break;
				//减法
				case 2:
				result.innerHTML=Number(num1Value)-Number(num2Value);
				break;
				//乘法
				case 3:
				result.innerHTML=Number(num1Value)*Number(num2Value);
				break;
				//除法
				case 4:
				result.innerHTML=Number(num1Value)/Number(num2Value);
				break;
				//归零-清空
				case 5:
				result.innerHTML="";
				num1.value="";
				num2.value="";
				break;
			}
		}
	</script>
</body>
</html>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注