jQuery网页计算器

在脱发的路上

于 2022-04-17 22:48:36 发布

阅读量256

点赞数

文章标签： HTML CSS JavaScript 计算器用户交互

本文链接：https://blog.csdn.net/m0_58579855/article/details/124238505

版权

HTML部分

</body>

CSS部分

body {
margin: 50px;
}

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

#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;
}

js部分

//输入数值
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 + " ");
}
//清空，返回为0
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");
   }