要求
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="" >
<select id="ys">
<option value="https://www.cnblogs.com/lovelyk/p/+">+</option>
<option value="https://www.cnblogs.com/lovelyk/p/-">-</option>
<option value="https://www.cnblogs.com/lovelyk/p/*">*</option>
<option value="https://www.cnblogs.com/">/</option>
<option value="https://www.cnblogs.com/lovelyk/p/%">%</option>
</select>
<input type="number" value="">
<button>=</button>
<p >0</p>
<br>
<span >清除</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 = https://www.cnblogs.com/lovelyk/p/parseFloat(n1.value)+parseFloat(n2.value);
break;
case'-':
resultValue = https://www.cnblogs.com/lovelyk/p/parseFloat(n1.value)-parseFloat(n2.value);
break;
case'*':
resultValue = https://www.cnblogs.com/lovelyk/p/parseFloat(n1.value)*parseFloat(n2.value);
break;
case'/':
resultValue = https://www.cnblogs.com/lovelyk/p/parseFloat(n1.value) / parseFloat(n2.value);
break;
case'%':
resultValue = https://www.cnblogs.com/lovelyk/p/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.valuehttps://www.cnblogs.com/lovelyk/p/= '';
n2.valuehttps://www.cnblogs.com/lovelyk/p/= '';
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/246801.html
標籤：JavaScript