JS 案例四则混合计算器

最新推荐文章于 2024-05-12 13:30:52 发布

suiferq

最新推荐文章于 2024-05-12 13:30:52 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 案例学习文章标签： js html

本文链接：https://blog.csdn.net/suiferq/article/details/109146775

JS 案例学习专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个四则混合计算器，包括加、减、乘、除功能，并展示了计算器的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四则混合计算器：

HTML代码部分：

// An highlighted block
<form >
   <div class="da">
    <div>
     <div class="col1"><label >请输入num1:</label></div>
     <div class="col2"><input type="text" id="num1"/></div>
    </div>
    <div>
     <div class="col1"><label>请选择运算符</label></div>
     <div class="col2">
      <select id="oper">
       <option>+</option>
       <option>-</option>
       <option>*</option>
       <option>/</option>
      </select>
     </div>
    </div>
    <div>
     <div class="col1"><label>请输入num2:</label></div>
     <div class="col2"><input type="text" id="num2"/></div>
    </div>
    <div>
     <div class="col1"><label>结果:</label></div>
     <div class="col2"><input type="text" id="res" value=""/></div>
    </div>
    <div>
     <div>
      <div class="col1"><button type="button" onclick="cal()">计算</button></div>
      <div class="col2"><button type="reset">重置</button></div>
     </div>
    </div>
   </div>
  </form>

CSS代码部分

// An highlighted block
body,div,form,option{
 margin:0;
 padding: 10px;
 overflow: hidden;
}
.da{
 width: 400px;
 margin: 0px auto;
 border: 1px solid;
 
}
.col1,.col2{
 float: left;
}

JS代码部分

// An highlighted block
<script type="text/javascript">
  unction cal(){
    var num1=document.getElementById("num1").value;
    var num2=document.getElementById("num2").value;
    var oper=document.getElementById("oper").value;
    var res;
    switch(oper){
     case "+":
     res=parseFloat(num1)+parseFloat(num2);
     break;
     case "-":
     res=num1-num2;
     break;
     case "*":
     res=num1*num2;
     break;
     default:
     res=num1/num2;
     break;
    }
    document.getElementById("res").value=res;
   }
  </script>