javascript实现的简单计算器

最新推荐文章于 2024-10-25 08:30:00 发布

小新8

最新推荐文章于 2024-10-25 08:30:00 发布

阅读量790

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u011439289/article/details/9884101

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单计算器，该计算器可通过网页输入两个数值及运算符，进行基本的加减乘除运算，并将结果显示在页面上。

<html>
    <head>
        <title>javascript实现一个简单的计算器</title>
        <script language="javascript">
           function cal(){
               var v1 = parseInt(document.getElementById("value1").value) ;
               var flag = document.getElementById("flag").value ;
               var v2 = parseInt(document.getElementById("value2").value) ;
               var s = 0 ;
               switch(flag){
                   case "+":
                       s = v1 + v2 ;
                       break ;
                   case "-":
                       s = v1 - v2 ;
                       break ;
                   case "*":
                       s = v1 * v2 ;
                       break ;
                   case "/":
                       s = v1 / v2 ;
                       break ;
               }
               alert(s) ;
           }
       </script>
    </head>

    <body onload="alert(sayHello())">
        <input type="text" name="value1" id="value1">
       <select name="flag" id="flag">
           <option value="+">+</option>
           <option value="-">-</option>
           <option value="*">*</option>
           <option value="/">/</option>
       </select>
       <input type="text" name="value2" id="value2">
       <input type="button" value="计算" id="" onclick="cal()">
    </body>

</html>

放到span里面

<html>
    <head>
        <title>javascript实现一个简单的计算器</title>
        <script language="javascript">
           function cal(){
               var v1 = parseInt(document.getElementById("value1").value) ;
               var flag = document.getElementById("flag").value ;
               var v2 = parseInt(document.getElementById("value2").value) ;
               var s = 0 ;
               switch(flag){
                   case "+":
                       s = v1 + v2 ;
                       break ;
                   case "-":
                       s = v1 - v2 ;
                       break ;
                   case "*":
                       s = v1 * v2 ;
                       break ;
                   case "/":
                       s = v1 / v2 ;
                       break ;
               }
               /* document.getElementById("ret").value = s ; */
               document.getElementById("result").innerHTML = "<font color='red'>" + s + "</font>" ;
           }
       </script>
    </head>

    <body onload="alert(sayHello())">
        <input type="text" name="value1" id="value1">
       <select name="flag" id="flag">
           <option value="+">+</option>
           <option value="-">-</option>
           <option value="*">*</option>
           <option value="/">/</option>
       </select>
       <input type="text" name="value2" id="value2">
       
       <span id="result"></span>
       <input type="button" value="计算" id="" onclick="cal()">
    </body>
</html>

更简单的方式：