<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>奥里给!</title><style type="text/css">.a {height: 100px;width: 450px;border: 3px solid black;background-color: beige;font-size: 50px;}#b {height: 570px;width: 450px;border: 2px solid black;background-color: pink;font-family: 隶书;font-size: 20px;}.c {height: 90px;width: 100px;border: 1px solid black;background-color: aquamarine;float: left;font-size: 60px;color: brown;margin: 8px;border-radius: 30px;}.d {height: 90px;width: 75px;border: 1px solid black;margin: 8px;float: left;background: sandybrown;font-size: 50px;color: brown;border-radius: 30px;}.e {height: 90px;width: 100px;border: 1px solid black;background-color: sandybrown;float: left;font-size: 45px;color: brown;margin: 8px;border-radius: 30px;}.e:hover {background: skyblue;color: white;transform: scale(1.08, 1.08);}.d:hover {background: skyblue;color: white;transform: scale(1.08, 1.08);}.c:hover {background: plum;color: aliceblue;transform: scale(1.08, 1.08);}</style>
</head><body><center><div class="a" id="resultInput"></div><div id="b"><button class="c" onclick="printResultInput(this)" value="1">1</button><button class="c" onclick="printResultInput(this)" value="2">2</button><button class="c" onclick="printResultInput(this)" value="3">3</button><button class="d" onclick="printResultInput(this)" value="+">+</button><button class="c" onclick="printResultInput(this)" value="4">4</button><button class="c" onclick="printResultInput(this)" value="5">5</button><button class="c" onclick="printResultInput(this)" value="6">6</button><button class="d" onclick="printResultInput(this)" value="-">-</button><button class="c" onclick="printResultInput(this)" value="7">7</button><button class="c" onclick="printResultInput(this)" value="8">8</button><button class="c" onclick="printResultInput(this)" value="9">9</button><button class="d" onclick="printResultInput(this)" value="*">*</button><button class="e" onclick="printResultInput(this)" value=".">.</button><button class="c" onclick="printResultInput(this)" value="0">0</button><button class="e" onclick="count()">=</button><button class="d" onclick="printResultInput(this)" value="/">/</button><button class="e" onclick="tuige()">👈</button><button class="e" onclick="tuige()">👈</button><button class="e" onclick="tuige()">👈 </button><button class="d" onclick="clearNum()">AC</button> 比努力更可怕的是坚持!</div></center><script type="text/javascript">/*printResultInput(this),this可以理解为这个函数在这个按钮的功能 value是赋值*//*将点击的按钮值显示在resultInput上*/function printResultInput(l) { /*??????????????????????????????????????????????????*/document.getElementById("resultInput").innerHTML += l.value;}/* 四则运算方法 */function count() {var countText = document.getElementById("resultInput").innerHTML;var operator, result;if (countText.indexOf("+") !== -1)/*indexOf() 可以显示()里的元素的位置,显示的的是数字。indexOf() 方法对大小写敏感!注释:如果要检索的字符串值没有出现,则该方法返回 -1。。。。。。。在这里用indexof搜索,如果找到了indexof就会是
一个正数如果没有早到的话就是-1,countText.indexOf代表的是cunttext的indexof意思实在这里寻找,给indexof
定义一个区域,如果不是-1的话operator就保存了一个加号*/{operator = "+";} else if (countText.indexOf("-") !== -1) {operator = "-";} else if (countText.indexOf("*") !== -1) {operator = "*";} else if (countText.indexOf("/") !== -1) {operator = "/";}var num1 = countText.substring(0, countText.indexOf(operator));/*substring() 方法用于提取字符串中介于两个指定下标之间的字符。countText.substring表示在counttext中寻找,0是第一个字符,countText.indexOf(operator)应该是从0字符到加号前面的那个字符,,,,这么写的应该是counttext里indexof里的参数operator,不然直接找oper找不到,因为oper是个字符串屏幕上没有,屏幕上只有=-*那代表的是保存在oper的的数我感觉应该就是参数,想要找到他要找到他的父元素也就是定义它的函数也就是indexof*/var num2 = countText.substring(countText.indexOf(operator) + 1);if (operator == "+") {result = parseFloat(num1) + parseFloat(num2);} else if (operator == "-") {result = parseFloat(num1) - parseFloat(num2);} else if (operator == "*") {result = parseFloat(num1) * parseFloat(num2);} else if (operator == "/") {result = parseFloat(num1) / parseFloat(num2);}document.getElementById("resultInput").innerHTML = result;}function tuige() {var t = counttext.substring(0, countText.parseFloat(num2) - 1);document.getElementById("resultInput").innerHTML = t;}/*清零*/function clearNum() {document.getElementById("resultInput").innerHTML = '';}//退位function tui() {}//把按纽上的数字显示到上面的盒子中//获取屏幕中的元素//1判断屏幕上的是+-*/哪一个然后把他保存到一个变量中用到了indexOf()函数没有()里的字符串时显示-1//2获取=-*/前面和后面额元素然后分别把他们保存在两个变量中//把2中的两个元素字符串类型变成浮点型/1最后利用这三个变量(2中的两个变量1中的一个变量)进行计算,把结果保存在一个变量中//把计算结果的变量显示在屏幕中</script></body></html>
运行结果