Jquery实现简易计算器

最新推荐文章于 2022-11-09 20:26:08 发布

程序员先生error

最新推荐文章于 2022-11-09 20:26:08 发布

阅读量1k

点赞数 4

分类专栏： demo实例文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_45355510/article/details/112210883

版权

demo实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Jquery实现简易计算器

效果图如下
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 50px;
			}

			#box {
				border: 1px solid #ccc;
				border-radius: 4px;
				width: 175px;
				height: 285px;
				padding: 10px;
			}

			#result {
				width: 161px;
				margin-bottom: 10px;
				height: 30px;
				border: 1px solid #cccccc;
				border-radius: 2px;
				background-color: white;
				color: #666666;
				padding: 0 5px;
				text-align: right;
			}

			#box>.btn {
				width: 40px;
				height: 40px;
				border: 1px solid #cccccc;
				border-radius: 2px;
				cursor: pointer;
				background-color: white;
				font-weight: bold;
				color: #666;
				margin-bottom: 10px;
			}
			#box>.btn:hover{
				color: white;
				background-color: #666;
			}
			#box>.btn:last-of-type{
				width: 85px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<input type="text" value="0" id="result" readonly="readonly" />
			<button class="btn" onclick="clean()">C</button>
			<button class="btn" onclick="negation()">+/-</button>
			<button class="btn" onclick="symbol('x')">x</button>
			<button class="btn" onclick="symbol('÷')">÷</button>
			<button class="btn" onclick="input('1')">1</button>
			<button class="btn" onclick="input('2')">2</button>
			<button class="btn" onclick="input('3')">3</button>
			<button class="btn" onclick="symbol('-')">-</button>
			<button class="btn" onclick="input('4')">4</button>
			<button class="btn" onclick="input('5')">5</button>
			<button class="btn" onclick="input('6')">6</button>
			<button class="btn" onclick="symbol('+')">+</button>
			<button class="btn" onclick="input('7')">7</button>
			<button class="btn" onclick="input('8')">8</button>
			<button class="btn" onclick="input('9')">9</button>
			<button class="btn" onclick="symbol('%')">%</button>
			<button class="btn" onclick="input('0')">0</button>
			<button class="btn" onclick="point()">.</button>
			<button class="btn" onclick="sum()">=</button>
		</div>
		<script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//输入数值
			function input(param){
				let inputVal = $("#result").val();
				let lastNum = getlastNum(inputVal);
				if (parseInt(lastNum)===0 && !/0\./.test(lastNum)) {//第一个数是0，替代,但是要排除0.的情况
					$("#result").val(inputVal.length>1?(inputVal.substring(0,inputVal.length-1)+param):param);
				} else{//第一个数不是0，拼接
					$("#result").val(inputVal+param);
				}
			}
			//输入运算符
			function symbol(param){
				let inputVal = $("#result").val();
				$("#result").val(inputVal + " " + param + " ");
			}
			//清空
			function clean(){
				$("#result").val("0")
			}
			//取到输入的最后一个数
			function getlastNum(str){
				return str.substring(str.lastIndexOf(" "));;
			}
			//输入.
			function point(){
				let inputVal = $("#result").val();
				let lastNum = getlastNum(inputVal);
				if (lastNum.indexOf('.')>-1) {//不允许存在多个点
					return
				} else{
					$("#result").val(inputVal+'.');
				}
			}
			//正负号
			function negation(){
				let inputVal = $("#result").val();
				let lastNum = getlastNum(inputVal).trim();
				let prevNum = inputVal.substring(0,inputVal.lastIndexOf(" "));
				if (lastNum.indexOf('-')==-1) {
					lastNum = " -"+lastNum;
				} else{
					lastNum = " "+lastNum.trim().substring(1);
				}
				$("#result").val(prevNum+lastNum);
			}
			//计算结果
			function sum(){
				try{
					//将x÷运算符转换成*/
					let inputVal = $("#result").val().replace("x","*").replace("÷","/");
					let result = eval(inputVal);
					$("#result").val(result);
				}catch(e){
					alert("运算异常");
					$("#result").val("0");
				}
				
			}
		</script>
	</body>
</html>