前端学习（2244）:计算器显示问题
生活随笔
收集整理的這篇文章主要介紹了
前端学习（2244）:计算器显示问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
運行結果
總結
以上是生活随笔為你收集整理的前端学习（2244）:计算器显示问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（2249）注册 创建 拉取
- 下一篇： 前端学习（2187）：tabber文件引