用js寫一個簡易計算器
阿新 • • 發佈：2021-01-09
要求
1.實現最基本的+ - * / %運算，樣式不做要求。
2.有一個【清除】按鈕，清除所有輸入
有幾個地方需要注意:
- 如何獲取輸入框的內容？
//用H5的方法獲取元素內容 var n1 = document.querySelector('.n1'); var n2 = document.querySelector('.n2'); - 如何取得運算子的內容？
1.先獲取select這個下拉框 var ys = document.querySelector('#ys'); 2.然後獲取被選中的下標值，並獲取到該值(運算子) var index = ys.selectedIndex; var opt = ys.options[index].value; - 獲取到的內容能否直接運算？
有了兩個值和運算子，還不能直接元素。因為獲取到的內容都是string字串型別。需要強制轉換成number型別。 然後用switch語句判斷運算子內容，並進行對應的運算。 - 如何把運算結果寫到頁面中？
首頁要獲取到展示結果的位置 獲取元素文字內容，有幾種方式： 1.innerHTML或者innerContext innerHTML會讀取內容的語義，解析標籤 innerContext和上面作用一樣，只適用於火狐(Firefox)瀏覽器。 2.innerText(推薦使用) 只是讀取直接子級的文字 2.textContent (不推薦使用) 讀取的內容不僅僅是直接子級，元素所有的文字內容 也會被讀取出，不推薦使用，會被惡意注入。 - 清除按鈕怎麼清除所有內容？
上面功能完成了，幾乎就沒啥問題了。 清除就是把所有的輸入框，結果對應的元素標籤 element.innerText = '';
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>計算器</title> <style> input,select,option,span,p,button{ width: 80px; height: 30px; font-size: 20px; } .clear{ cursor: pointer; border: 1px solid #333; } p.result{ display: inline-block; min-width: 50px; width: 150px; } option{ font-size: 26px; } </style> </head> <body> <input type="number" value="" class="n1"> <select id="ys"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> <option value="%">%</option> </select> <input type="number" class="n2" value=""> <button>=</button> <p class="result">0</p> <br> <span class="clear">清除</span> <script> var n1 = document.querySelector(".n1"); var n2 = document.querySelector(".n2"); var ys = document.querySelector("#ys"); var result = document.querySelector(".result"); var btn = document.querySelector("button"); var clear = document.querySelector(".clear") //點選按鈕 計算結果 btn.onclick= function(){ var index = ys.selectedIndex; var opt = ys.options[index].value; var resultValue; switch(opt){ case '+': resultValue = parseFloat(n1.value)+parseFloat(n2.value); break; case '-': resultValue = parseFloat(n1.value)-parseFloat(n2.value); break; case '*': resultValue = parseFloat(n1.value)*parseFloat(n2.value); break; case '/': resultValue = parseFloat(n1.value) / parseFloat(n2.value); break; case '%': resultValue = parseInt(n1.value) % parseInt(n2.value); } //解決不同瀏覽器對innerText屬性相容性問題 ， firefox用的是innerContent (typeof result.innerText) == "string" ? (result.innerText = resultValue) : (result.innerContent = resultValue) ; } //清零 clear.onclick = function(){ result.innerText = '0'; n1.value = ''; n2.value = ''; } </script> </body> </html>