✿✿✿JavaScript --- 网页版计算器

naoguaziteng

已于 2022-12-21 17:16:59 修改

阅读量404

点赞数

分类专栏：前端基础知识(HTML/CSS/JS) 文章标签： css html

于 2022-12-21 17:06:11 首次发布

本文链接：https://blog.csdn.net/naoguoteng/article/details/128398665

版权

前端基础知识(HTML/CSS/JS) 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

友友们好呀，这是小编自己写的一个网页版计算器。可以更换计算器的背景，还可以进行简单的计算，可能还存在很多不足与小BUG。欢迎大家进一步的更行和完善！！！！！

布局以及样式代码如下:

<style>
			body {
				background-image: url(img/2027390.jpg);
			}

			center {
				margin-top: 50px;
				
			}

			table {
				background-color: #D8D9EE;
				opacity:0.6;
			}

			input {
				border: 0px black solid;
				width: 35%;
				height: 60px;
				font-size: 30px;
				color: black;
				border-style: none;
				background-color: #FEF6F4;
				opacity:0.8;
			}

			tr {
				text-align: center;
				font-size: 30px;
				background-color: #FCEAEC;
			}

			td {
				cursor: pointer;
				border-radius: 15px;
			}

			td:hover {
				background-color:#D3B6D2 ;
			}
			* {
			    margin: 0;
			    padding: 0;
			}
					
			li {
			    list-style: none;
			}
					
			.baidu {
				border: 3px white dashed;
			    overflow: hidden;
			    margin: 20px auto;
			   /* background-color: #fff; */
			    width: 410px;
				height: 50px;
			    padding-top: 3px;
			}
			.baidu li {
			    float: left;
			    margin: 0 1px;
			    cursor: pointer;
			}		
			.baidu img {
			    width: 100px;
			}
		</style>

主体代码如下:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul class="baidu">
		        <li id="li1" class="lii"><img src="img/2027390.jpg"></li>
		        <li id="li2" class="lii"><img src="img/beujing2.jpg"></li>
		        <li id="li3" class="lii"><img src="img/beijing1.jpg"></li>
		        <li id="li4" class="lii"><img src="img/bj4.jpg"></li>
		    </ul>
		<center>
			<input type="text" id="showResult" value="0" readonly>
			<table width="35%" height="500px" border="1" cellspacing="4" align="center">
				<tr>
					<td id="clear">清零</td>
					<td id="del">退格</td>
					<td class="ysf">%</td>
					<td class="ysf">/</td>
				</tr>
				<tr>
					<td class="num">7</td>
					<td class="num">8</td>
					<td class="num">9</td>
					<td class="ysf">*</td>
				</tr>
				<tr>
					<td class="num">4</td>
					<td class="num">5</td>
					<td class="num">6</td>
					<td class="ysf">-</td>
				</tr>
				<tr>
					<td class="num">1</td>
					<td class="num">2</td>
					<td class="num">3</td>
					<td class="ysf">+</td>
				</tr>
				<tr>
					<td colspan="2" class="num">0</td>
					<td class="num">.</td>
					<td id="result">=</td>
				</tr>
			</table>
		</center>
		<script>
			var lilist=document.getElementsByClassName('lii');
			for(var i=0;i<lilist.length;i++){
							  lilist[i].onclick=function(event){
								 if(event.target.nodeName=="IMG"){
									 document.body.style.background="url("+ event.target.getAttribute('src')+")";
								 }
							  }
			}
		</script>
	</body>
	<script>
		//思路：
		//1.把所有数字，和小数点归为一类 class="num"
		//2.把运算符归为一类 class="ysf"
		//3.显示框，等号，清零，退格键单独添加id
		//1+2=3
		//4.定义三个变量，来存储，第一个数字，运算符，第二个数字

		var numValue1 = '';
		var numValue2 = '';
		var opr = '';

		var showResult = document.getElementById("showResult");

		//把所有的数字键，要绑定点击事件，点击之后，把数字展示到显示框

		var nums = document.getElementsByClassName("num");
		for (let i = 0; i < nums.length; i++) {
			nums[i].onclick = function() {
				//关于小数点
				if (this.innerHTML == ".") {
					//规定用户不能第一次点击小数点也不能出现两个小数点
					if (numValue1.indexOf(".") == -1 && numValue1.length > 0) {
						//用户没有点击小数点正常拼接
						numValue1 += this.innerHTML;
					} else {
						alert("小数书写不规范!");
						numValue1 = '';
						numValue2 = '';
						opr = '';
						showResult.value = '0';
						r = 0;
					}
				} else {
					//用户没有点小数点正常拼接
					numValue1 += this.innerHTML;
				}
				showResult.value = numValue1;
			}
		}

		//给所有的运算符绑定点击事件
		var oprs = document.getElementsByClassName("ysf");
		for (let i = 0; i < oprs.length; i++) {
			oprs[i].onclick = function() {
				if (numValue2 == '') {
					opr = this.innerText; //+ - * /
					//把第一个数字给第二个变量，把第一个变量清空，用来接收用户第二次输入的数字。
					numValue2 = numValue1;
					numValue1 = '';
				} else {
					resultFun();
					opr = this.innerText; //+ - * /
				}
			}
		}

		//清零
		document.getElementById("clear").onclick = function() {
			numValue1 = '';
			numValue2 = '';
			opr = '';
			showResult.value = '0';
		}

		//退格
		document.getElementById("del").onclick = function() {
			if (numValue1.length > 1) {
				numValue1 = numValue1.substring(0, numValue1.length - 1);
				showResult.value = numValue1;
			}
			/* else if (numValue1.length == 1) {
							numValue1 = '';
							showResult.value = '0';
						} */
		}

		//给=号绑定点击事件
		document.getElementById("result").onclick = function() {
			resultFun();
		}

		function resultFun() {
			var one = Number(numValue2);
			var two = Number(numValue1);
			var r = null;
			switch (opr) {
				case '+':
					r = (one + two).toFixed(5) * 1;
					break;
				case '-':
					r = (one - two).toFixed(5) * 1;
					break;
				case '*':
					r = (one * two).toFixed(5) * 1;
					break;
				case '/':
					if (two == 0) {
						alert("除数不能为0!")
						numValue1 = '';
						numValue2 = '';
						opr = '';
						showResult.value = '0';
						r = 0;
					} else {
						r = (one / two).toFixed(5) * 1;
					}
					break;
				case '%':
					if (two == 0) {
						alert("除数不能为0!")
						numValue1 = '';
						numValue2 = '';
						opr = '';
						showResult.value = '0';
						r = 0;
					} else {
						r = one % two;
					}
					break;
			}
			numValue2 = r;
			numValue1 = '';
			showResult.value = numValue2 * 1;
		}
		//showResult.value = r;

	</script>
</html>