原生js实现简易计算器

更新时间：2021年08月16日 15:17:26 作者：love_spinach

这篇文章主要为大家详细介绍了原生js实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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函数的时候进行一系列的算法判断，对一些不规范的算法进行筛选，大家如果感兴趣的话，可以对这些算法校验再进行延伸。有什么想法或者是建议，可以和博主交流哦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
计算器

用cssText批量修改样式
一般情况下我们用js设置元素对象的样式会使用这样的形式
2009-08-08
第一次接触神奇的Bootstrap表单
第一次接触神奇的Bootstrap表单，Bootstrap让Web开发更迅速、更简单，感兴趣的小伙伴们可以参考一下
2016-07-07
JavaScript实现九宫格点击变色效果
这篇文章主要为大家详细介绍了JavaScript实现九宫格点击变色效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
JS 去前后空格大全(IE9亲测)
本文为大家详细介绍下JS去前后空格及所有空格，代码在IE9环境下测试，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码，测试了下还不错，感兴趣的朋友可以参考下
2013-04-04
javascript实现手机震动API代码
一个新的API出来了。HTML5 （很快）将支持用户设备振动。这明显是很有趣的事情，比如它可以用户触发提醒，提升游戏体验，下面小编给大家整理javascript手机震动api，需要的朋友可以参考下
2015-08-08
一道常被人轻视的web前端常见面试题(JS)
面试题是招聘公司和开发者都非常关心的话题，公司希望通过它了解开发者的真实水平和细节处理能力，而开发者希望能够最大程度地展示自己的水平（甚至超常发挥）。本文提供了众多前端开发面试题，无论是招聘方还是应聘方都值得一看
2016-02-02
Bootstrap入门教程一Hello Bootstrap初识
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的。这篇文章主要介绍了基于Bootstrap3实现漂亮简洁的CSS3价格表（精美代码版）,需要的朋友可以参考下
2017-03-03
three.js快速入门【推荐】
本文主要介绍了three.js的基础知识。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript+HTML5 canvas实现放大镜效果完整示例
这篇文章主要介绍了JavaScript+HTML5 canvas实现放大镜效果,结合完整实例形式分析了javascript+HTML5 canvas针对图片元素的获取、响应鼠标事件变换元素属性相关操作技巧,需要的朋友可以参考下
2019-05-05

原生js实现简易计算器

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具