要求
1.實(shí)現(xiàn)最基本的+ - * / %運(yùn)算，樣式不做要求。
2.有一個(gè)【清除】按鈕，清除所有輸入
有幾個(gè)地方需要注意:
- 如何獲取輸入框的內(nèi)容？
//用H5的方法獲取元素內(nèi)容
var n1 = document.querySelector('.n1');
var n2 = document.querySelector('.n2');
- 如何取得運(yùn)算符的內(nèi)容？
1.先獲取select這個(gè)下拉框
var ys = document.querySelector('#ys');
2.然后獲取被選中的下標(biāo)值，并獲取到該值(運(yùn)算符)
var index = ys.selectedIndex;
var opt = ys.options[index].value;
- 獲取到的內(nèi)容能否直接運(yùn)算？
有了兩個(gè)值和運(yùn)算符，還不能直接元素。因?yàn)楂@取到的內(nèi)容都是string字符串類型。需要強(qiáng)制轉(zhuǎn)換成number類型。
然后用switch語(yǔ)句判斷運(yùn)算符內(nèi)容，并進(jìn)行對(duì)應(yīng)的運(yùn)算。
- 如何把運(yùn)算結(jié)果寫到頁(yè)面中？
首頁(yè)要獲取到展示結(jié)果的位置
獲取元素文本內(nèi)容，有幾種方式：
1.innerHTML或者innerContext
innerHTML會(huì)讀取內(nèi)容的語(yǔ)義，解析標(biāo)簽
innerContext和上面作用一樣，只適用于火狐(Firefox)瀏覽器。
2.innerText(推薦使用)
只是讀取直接子級(jí)的文字
2.textContent (不推薦使用)
讀取的內(nèi)容不僅僅是直接子級(jí)，元素所有的文字內(nèi)容
也會(huì)被讀取出，不推薦使用，會(huì)被惡意注入。
- 清除按鈕怎么清除所有內(nèi)容？
上面功能完成了，幾乎就沒(méi)啥問(wèn)題了。
清除就是把所有的輸入框，結(jié)果對(duì)應(yīng)的元素標(biāo)簽
element.innerText = '';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>計(jì)算器</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")
//點(diǎn)擊按鈕 計(jì)算結(jié)果
btn.onclick= function(){
var resultValue;
switch(ys.value){
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);
}
//解決不同瀏覽器對(duì)innerText屬性兼容性問(wèn)題 ， 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>
|
