JavaScript (to make a simple calculator)

Note: This calculator can only perform single-digit addition, subtraction, multiplication and division

Points of thought: (1) When reading the number of the button, it is obtained through the collection under the :for loop [i].onclick=function(){variable=this.innerHTML} , and "this" must be used instead of " The collection [i]" is taken, otherwise the value cannot be obtained, it should be because the onclick=function function is set to the "collection [i]".

(2) Then judge the number of keystrokes while getting the key number, and create a variable to receive the characters obtained the first, second, and third times. At the same time, judge the addition, subtraction, multiplication and division signs obtained for the second time, and calculate according to the situation.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Simple calculator</title>
		<style type="text/css">
			*{
				margin: 0 auto;
				padding: 0;
			}
			#bigk{
				width: 320px;
				height: 450px;
				background-color: gainsboro;
				border-radius: 8px;
				box-shadow: 5px 5px 5px darkgray;
				margin-top: 30px;
				border: 1px solid black;
				overflow: hidden;
			}
			#sck {
				width: 312px;
				height: 30px;
				border: 1px solid black;
				margin-top: 10px;
				background-color: gainsboro;
				border-radius: 4px;
			}
			.hengk {
				width: 312px;
				height:100px ;
			}
			.xiaok{
				float: left;
				width: 70px;
				height: 90px;
				border: 1px solid black;
				margin-top: 5px;
				margin-left: 5px;
				font-size: 24px;
				font-weight: bolder;
				text-align: center;
				line-height: 90px;
				border-radius: 4px;
			}
			.xiaok:hover{
				cursor: pointer;
				box-shadow: 3px 3px darkgray;
			}
		</style>
	</head>
	<body>
		<div id="bigk">
			<div id="sck">
				<input type="text" value="" style="width: 312px;height: 30px;border: none;background-color:gainsboro ;"/>
			</div>
			<div class="hengk">
				<div class="xiaok">7</div>
				<div class="xiaok">8</div>
				<div class="xiaok">9</div>
				<div class="xiaok">/</div>
			</div>
			<div class="hengk">
				<div class="xiaok">4</div>
				<div class="xiaok">5</div>
				<div class="xiaok">6</div>
				<div class="xiaok">*</div>
			</div>
			<div class="hengk">
				<div class="xiaok">1</div>
				<div class="xiaok">2</div>
				<div class="xiaok">3</div>
				<div class="xiaok">-</div>
			</div>
			<div class="hengk">
				<div class="xiaok">0</div>
				<div class="xiaok">.</div>
				<div class="xiaok">=</div>
				<div class="xiaok">+</div>
			</div>
		</div>
	</body>
</html>

<script type="text/javascript">
	var num = document.getElementsByClassName("xiaok");
	var a = 0;
	var b = 0;
	var c = 0;
	var biao = 0
	for(var i = 0 ;i<num.length;i++){
		num[i].onclick=function(){
			biao++;
			document.getElementsByTagName("input")[0].value+=this.innerHTML;
			if(biao ==1){
				a =Number(this.innerHTML) ;
			}else if(biao==2){
				b= this.innerHTML;
			}else if(biao==3){
				c = Number(this.innerHTML);
			}
			if(this.innerHTML=="="){
			switch (b) {
				case"+":document.getElementsByTagName("input")[0].value=a+c;break;
				case"-":document.getElementsByTagName("input")[0].value=a-c;break;
				case"*":document.getElementsByTagName("input")[0].value=a*c;break;
				case"/":document.getElementsByTagName("input")[0].value=a/c;break;
			
		}
			}
	     }
	}
	
		
</script>

JavaScript (to make a simple calculator)

Guess you like