jquery计算器

最新推荐文章于 2022-11-09 20:26:08 发布

Sore4

最新推荐文章于 2022-11-09 20:26:08 发布

阅读量549

点赞数

分类专栏： Visual Studio Installer vs code DW 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/Sore4/article/details/124858894

版权

vs code 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

Visual Studio Installer

6 篇文章 0 订阅

订阅专栏

这次讲解的是一篇关于计算的案例，先是创建一个新的HTML页面

在新的HTML页面里，先编程一个类似与计算器的一个表格

编程的代码，如下图：
HTML代码：

CSS代码：

Js代码：
注意：script标签里还有一条重要的，在我上一篇讲述到下载的jQuery插件，需要再创一个script标签里引入jquery-3.6.0.min.js，不要贪图一时的快而忽略这条重要的信息，一定要审阅。

Css样式就不详细讲解了，用一个大的div标签，分为两个小的div在里面，主要的是P标签，要设置id，并且要在script标签里输出它的值要输到P标签里，id名可以自己编写一个，而且还不止我值一种方法，可以参考其他的方法

源代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .pant {

            margin: 0 auto;

            width: 275px;

            height: 310px;

            border: 2px solid #bbb;

        }

        #scred {

            width: 200px;

            height: 40px;

            border: 1px solid #bbb;

            margin: 7px 0px 0px 7px;

            float: left;

        }

        input {

            font-size: 20px;

            width: 50px;

            height: 50px;

            margin: 6px;

        }

    </style>

</head>

<body>

    <div class="pant">

        <div>

            <p id="scred"></p>

            <input type="button" value="C">

        </div>

        <div>

            <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input

                type="button" value="/">

            <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input

                type="button" value="*">

            <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input

                type="button" value="-">

            <input type="button" value="0"> <input type="button" value="."> <input type="button" value="="> <input

                type="button" value="+">

        </div>

    </div>



    <script src="./jquery-3.6.0.min.js"></script>

    <script>

        $(function () {

            // 点击按钮

            var clickBtn = "";

            // count判断是否是第一次点击

            var count = 0;

            //假如报错

            if (window.onerror) {

                return $("#scred").text("您的操作有误哦！");

            }

            $(":button").click(function () {

                // 选择了清零按钮

                if ($(this).val() == 'C') {

                    count = 0;

                    return $("#scred").text("");

                }

                // 选择了相等按钮

                if ($(this).val() == '=') {

                    try {

                        var inputText = $("#scred").text();

                        clickBtn = window.eval(inputText);

                        return $("#scred").text(window.eval(inputText));

                    } catch (err) {

                        count = 0;

                        return $("#scred").text("您的操作有误哦！");

                    }

                }

                if (count == 0) {

                    $("#scred").text("");

                    clickBtn = $(this).val();

                } else {

                    clickBtn += $(this).val();

                }

                count++;

                return $("#scred").text(clickBtn);

            });

        });

    </script>

</body>

</html>

效果图：如下图：

Sore4

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery计算器

这次讲解的是一篇关于计算的案例，先是创建一个新的HTML页面在新的HTML页面里，先编程一个类似与计算器的一个表格编程的代码，如下图： HTML代码：CSS代码：Js代码：注意：script标签里还有一条重要的，在我上一篇讲述到下载的jQuery插件，需要再创一个script标签里引入jquery-3.6.0.min.js，不要贪图一时的快而忽略这条重要的信息，一定要审阅。Css样式就不详细讲解了，用一个大的div标签，分为两个小的div在里面，主要的是P标签，要设置id，并且
复制链接

扫一扫