- A+
所属分类：Web前端
要求
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> 
