网页计算器

最新推荐文章于 2023-11-21 15:20:56 发布

波西塔塔Y

最新推荐文章于 2023-11-21 15:20:56 发布

阅读量315

点赞数 1

分类专栏：网页设计 js

本文链接：https://blog.csdn.net/u012881559/article/details/75931143

版权

网页设计同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

两个输入框，一个输出框。
需要获得输入框内容和选择框的运算符内容
将结果输出到网页上

关键技术点：

parseInt(document.getElementById(“fir”).value)
switch(selet)
document.getElementById(“put”).value=result;

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title> 事件</title>  
  <style type="text/css">
    body{
        font-size: 18px;
    }
  </style>
  <script type="text/javascript">
   function count(){

    //获取第一个输入框的值
    var firnum=parseInt(document.getElementById("fir").value);
    alert(firnum);
    //获取第二个输入框的值
    var sednum=parseInt(document.getElementById("sed").value);
    alert(sednum);
    //获取选择框的值
    var selet=document.getElementById("sel").value;

    //获取通过下拉框来选择的值来改变加减乘除的运算法则
   switch(selet){
        case "+":
        var result=firnum+sednum;
        break;
        case "-":
        var result=firnum-sednum;
        break;
        case "/":
        var result=firnum/sednum;
        break;
        case "*":
        var result=firnum*sednum;   
    }
    //设置结果输入框的值
    document.getElementById("put").value=result;
   }
  </script> 
 </head> 
 <body>
    <input type="text" id="fir" />
    <select name="select" id="sel">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input  type="text"  id="sed" />
    <input  id="out" type="button" value="=" onclick="count()" />
    <input type="text"  id="put" />
 </body>
</html>