javascript实现简易计算器

最新推荐文章于 2024-04-25 09:54:19 发布

Of_the

最新推荐文章于 2024-04-25 09:54:19 发布

阅读量2.4w

点赞数 31

分类专栏： JavaScript学习文章标签： js简易计算器

本文链接：https://blog.csdn.net/qq_41140741/article/details/81508603

版权

JavaScript学习专栏收录该内容

3 篇文章 3 订阅

订阅专栏

javascript实现简易计算器，只有两个input输入框，简单实现加减乘除：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简易计算器</title>
    </head>
    <style>
        body{
        border: 2px #00FFFF;    
        }
    </style>
    <body  background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 10px;">
        <p>
            <h1>简易计算器</h1>
            <input type="text" id="num1" width="50px" />
            <select id="select">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" id="num2" width="50px"/>
            <br />
            <input type="button" value="计算" onclick="cal()" style="color: #FF0000;"/>
            <input id="result"></input>
        </p>
    </body>
    <script type="text/javascript">
        function cal(){
            var num1=document.getElementById("num1").value;
            var num2=document.getElementById("num2").value;
            var c = document.getElementById("select").value;
            num1=parseFloat(num1);
            num2=parseFloat(num2);
            switch(c){
                case "+":
                document.getElementById("result").value=parseInt(num1)+parseInt(num2);
                break;
                case "-":
                document.getElementById("result").value=parseInt(num1)-parseInt(num2);
                break;
                case "*":
                document.getElementById("result").value=parseInt(num1)-parseInt(num2);
                break;
                case "/":
                document.getElementById("result").value=parseInt(num1)/parseInt(num2);
                break;
            }
        }
    </script>
    </html>

效果截图：
这里写图片描述

JavaScript eval() 函数实现计算器：只有一个input输入框：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简易计算器</title>
    </head>
    <body background="img/2.jpg" style="background-repeat: no-repeat;margin-left: 10px;">
        <h1>简易计算器</h1>
        <p>
            <input  type="text" id="num1"/>
            <input type="button" value="计算" onclick="cal()" />
        </p>
        <p>
            <span id="result" style="color: #FF0000;">计算结果：</span>
        </p>
    </body>
    <script type="text/javascript">
        function cal(){
            var num1=document.getElementById("num1").value;
            var result=document.getElementById("result");
            try{
                //有值就计算
                var res=eval("("+num1+")");
                result.innerHTML=res;
            }catch(e){
                console.log(e);
                result.innerHTML="表达式异常";
            }
        }
    </script>
</html>

实现效果：
这里写图片描述

body里面的背景图片设置：
background-repeat: no-repeat;图片原大小
background-size:100%; 图片全铺满

Of_the

关注

31
点赞
踩
142

收藏

觉得还不错? 一键收藏
6
评论
javascript实现简易计算器

javascript实现简易计算器，只有两个input输入框，简单实现加减乘除：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简易计算器&lt;/title&gt; &lt;/head&gt;
复制链接

扫一扫