用JS实现一个简易的计算器的代码是什么-群英

您现在的位置是：群英 > 开发技术 > web开发

用JS实现一个简易的计算器的代码是什么

Admin发表于 2022-05-26 17:09:441132 次浏览

上一篇：百度搜索框和选项框如何利用JS来实现

下一篇： foreach和for在JS中foreach的用法上的区别在哪

这篇文章给大家分享的是“用JS实现一个简易的计算器的代码是什么”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“用JS实现一个简易的计算器的代码是什么”吧。

本文实例为大家分享了javascript实现简易的计算器的具体代码，供大家参考，具体内容如下

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%; 图片全铺满

以上就是关于用JS实现一个简易的计算器的代码是什么的介绍，本文内容仅供参考，有需要的朋友可以借鉴了解看看，希望对大家学习或工作，想要了解更多欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： js,计算器

上一篇：百度搜索框和选项框如何利用JS来实现

下一篇： foreach和for在JS中foreach的用法上的区别在哪