用js写一个简易计算器

  • A+
所属分类:Web前端
摘要

1.实现最基本的+ – * / %运算,样式不做要求。
2.有一个【清除】按钮,清除所有输入


要求

1.实现最基本的+ - * / %运算,样式不做要求。
2.有一个【清除】按钮,清除所有输入

用js写一个简易计算器

有几个地方需要注意:

  • 如何获取输入框的内容?
        //用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>