迷你计算机

迷你计算机用的知识点

1、if..else if语句
2、switch语句
3、isNaN（）  判断输入值是否为数字
4、parseFloat()  将数字的字符串装换成number，防止使用运算符‘+’变成值变成字符串
5、Math.round()  将数值四舍五入取整
6、Dom的个元素获取
7.扩展：Math.floor（）是去除小数点后的数字取整
        Math.random()随机获取0~1之间的数字

迷你计算机DOM

<div class="box">
   <h2>小小计算器</h2>
   <form>
      <table>
         <tr>
            <td><input type="text" name="opt1" placeholder="操作数1" autofocus></td>
            <td>
               <select name="option">
                  <option value="null">请选择操作</option>
                  <option value="add"> + </option>
                  <option value="sub"> - </option>
                  <option value="mul"> * </option>
                  <option value="div"> / </option>
               </select>
            </td>
            <td><input type="text" name="opt2" placeholder="操作数2"></td>
            <td><button type="button">计算</button></td>
         </tr>
         <tr>
            <td colspan="2" align="right"><h3>结果:</h3></td>
            <td colspan="2" align="left"><h3 id="result"></h3></td>
         </tr>
      </table>
   </form>
</div>

迷你计算机的JS

var opt1=document.getElementsByName('opt1')[0];
   var opt2=document.getElementsByName('opt2')[0];
   var bt=document.getElementsByTagName('button')[0];
   bt.addEventListener('click',vaule);
   function vaule() {
      if(opt1.value.length===0){
         alert('操作数1不能为空');
         opt1.focus();
         return false //退出函数，否则下面值会判断
      }else if(isNaN(opt1.value)){
         alert(('操作数1必须是数字'));
         opt1.focus();
         return false;
      }else if(opt2.value.length===0){
         alert('操作数2不能为空');
         opt2.focus();
         return false
      }else if(isNaN(opt2.value)){
         alert(('操作数1必须是数字'));
         opt2.focus();
         return false;
      }else {
         var data1=parseFloat(opt1.value); //parseFloat（） 将数值转换成number
         var data2=parseFloat(opt2.value);
      }
      var option=document.getElementsByName('option')[0];
      var optVale=option.value;
      switch (optVale) {
         case 'null':
            alert('请选择操作符');
            option.focus();
            return false;  //退出函数，否则会执行下面结果
         case 'add':
            var flag='+';
            var data=data1+data2;
            break;
         case 'sub':
            var flag='-';
            var data=data1-data2;
            break;
         case 'mul':
            var flag='*';
            var data=data1*data2;
            break;
         case 'div':
            var flag='/';
            if(data2===0){
               alert('除数不能为0')
            }else {
               var data=data1/data2;
               data=Math.round(data*100)/100;  //Math.round 将数值转换成整数
            }
      }
      var result=document.getElementById('result');
      var str='<span style="color:coral">';
      str+=data1+flag+data2+'='+data;
      str+='</span>';
      result.innerHTML=str;
   }
</script>