• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

原生js实现简易计算器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<)。其实,感觉搞前端的很幸福,自己弄出点东西很有成就感,话不多说,附上源码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算器</title>
        <style>
            #b1{
                text-align: center;
                background-color: lightblue;
                width: 650px;
                height: 650px;
                border: 1px solid black;
                margin-left: 400px;
                border-radius: 18px;

            }
            #b2{
                text-align: center;
                width: 300px;
                height: 80px;
                margin-top: 30px;
                font-family: "微软雅黑";
                font-size: 20px;
                border-radius: 8px;
                outline:none;
            }
            ul{
                list-style-type: none;

            }
            li{
                float: left;
                margin-left: 40px;
                margin-top: 30px;
            }
            li input{
                width: 100px;
                height: 50px;
                border-radius: 8px;
                font-family: "微软雅黑";
                font-size: 20px;
                outline:none;
            }
        li input:hover{
                background-color:red ;
            }
        </style>

        <script>
        var beforeNum=0;
        function addNum(a){
             beforeNum=document.getElementById("b2").value;
             var nowNum=beforeNum;
            if(beforeNum!=0){
             nowNum=beforeNum+a;    
            }else{
                if(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)=="."){
                    nowNum=beforeNum+a; 
                }
                 if(a!="+"&&a!="-"&&a!="*"&&a!="/"&&(beforeNum.substring(beforeNum.length-2,beforeNum.length-1)!=".")){
                 nowNum=a;  
                }
            }
            document.getElementById("b2").value=nowNum;
        }


        function jisuan(){
            document.getElementById("b2").value=eval(document.getElementById("b2").value);
        }

        function clearNum(){
            document.getElementById("b2").value=0;
        }

        function backAgain(){
            beforeNum=document.getElementById("b2").value;
            if(beforeNum.length!=1){
            document.getElementById("b2").value=beforeNum.substring(0,beforeNum.length-1);
            }else if(beforeNum.length==1){
                document.getElementById("b2").value=0;
            }
        }
        function addPoint(b){
            beforeNum=document.getElementById("b2").value;
            if((beforeNum.indexOf(".")!=beforeNum.length-1)){
                document.getElementById("b2").value=beforeNum+b;
            }
        }
        function offCl(){
            document.getElementById("b2").value="";
        }
        </script>
    </head>
    <body>
        <div id="b1">
            <p style="font-size: 20px;">在线简易计算器</p>
            <div><input id="b2" name="wenben" value="0"/></div>
            <div>
                <ul>

                    <li><input type="button" value="1" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="2" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="3" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="4" onclick="addNum(this.value);"/></li>
                    </ul>
                <ul>
                    <li><input type="button" value="5" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="6" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="7" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="8" onclick="addNum(this.value);"/></li>
                    </ul>
                <ul>
                    <li><input type="button" value="9" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="0" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="+" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="-" onclick="addNum(this.value);"/></li>
                </ul>
                    <ul>
                    <li><input type="button" value="*" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="/" onclick="addNum(this.value);"/></li>
                    <li><input type="button" value="." onclick="addPoint(this.value);"/></li>
                    <li><input type="button" value="=" onclick="jisuan();"/></li>
                </ul>
                </ul>
                    <ul>
                    <li><input type="button" value="回退" onclick="backAgain();"/></li>
                    <li><input type="button" value="清除" onclick="clearNum();"/></li>
                    <li><input type="button" value="关机" onclick="offCl();"/></li>
                </ul>
            </div>
        </div>
    </body>
</html>

代码运行的效果图。

另外,博主在写js函数的时候进行一系列的算法判断,对一些不规范的算法进行筛选,大家如果感兴趣的话,可以对这些算法校验再进行延伸。有什么想法或者是建议,可以和博主交流哦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue自定义可选时间的日历组件发布时间:2022-02-05
下一篇:
Lambda表达式原理及示例发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap