动态的求出最大值最小值

最新推荐文章于 2022-03-02 20:59:55 发布

RixRenex

最新推荐文章于 2022-03-02 20:59:55 发布

阅读量685

点赞数

分类专栏： JavaScript jQuery 文章标签： js javascript jquery 前端

本文链接：https://blog.csdn.net/ZunXin_2580/article/details/113515183

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

实现技术：动态求出最大值最小值

详解：在html页面中的input内任意输入数字，并记录下来以往的输入记录，输入“0”数字时，计算出输入记录中的最大值和最小值。
实现需求：熟练并熟悉jQuery代码库。对数组要有一定概念

1、：初始化
在html文件内创建好必要的初始代码，并且在文件中引入jQuery代码库
在这里插入图片描述
2、：检测打印
步骤：1、需要在js中编写代码；2、检测到input标签输入的值；3、打印在html页面中
用到的事件：change()事件——当内容改变时触发函数；
难点：元素的创建，以及添加；
达到如图中所示的效果：
在这里插入图片描述
解难（1）：document.createElement(“p”)——代码翻译：在文档中创建一个p标签；createElement的意思：创建元素；createElement()作为方法，括号中的值就是创建标签的标签名字

本步骤内容：在input标签内容改变后创建一个p标签，并将输入的值赋值给这个p标签的文本，最后再将这个创建的p标签追加进body标签中。

3、数组
步骤：1、创建一个空数组；2、将页面中所记录的输入记录全部添加进数组中；
难点：需要知道数组在这里的作用；对于数组相关的方法需要知道；
达到图中效果：
在这里插入图片描述
解难(1)：push()——数组类的特定方法，意思是：将内容追加至调用方法的数组中；括号内为追加至数组中的值；这里是将每一个p标签都追加进了创建number数组中
解难(2)：new Array()——弄new方法创建的数组函数，这里也可以使用字面量的方式创建数组，只要是空的就行。

本步骤内容：创建一个空数组，然后使用for循环对页面上的每一个p标签进行一个遍历，将每一个p标签的内容追加进空数组中，最后输出一次数组；

4、计算
步骤：1、对比输入记录中的的值，结出最大值、最小值；2、删除掉输入“0”的记录；
难点：清楚Math函数的运用
达到图中效果：
在这里插入图片描述
解难(1)：apply(obj,args)——这个方法能接收两个参数；
obj：这个对象将代替Function类里this对象；
args：这个是数组，它将作为参数传给Function（args–>arguments）；

本步骤内容：添加一个if判定，判定的是最后一个p标签的text文本内容是否为0，true执行内容代码，false则null；判定中执行的代码需要包括创建空数组和比较最大值两个部分的代码；然后在控制台中输出最大值跟最小值；

5、显示
步骤：1、清理bug；2、将数据直观化
难点：作用域的概念；
达到图中效果：
在这里插入图片描述
本步骤内容：创建一个布尔值的全局变量，在change之间中的首要代码添加一个if判定，判定这个全局变量是否为true；在最后输入0时全局变量改为false不再执行change事件中的“内容”；

技术点总结完毕；

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态求出最大值最小值</title>
</head>

<body>
    <!-- 基本输入检测的元素 -->
    <input type="number" id="content">

    <!-- 引入jQuery插件库 -->
    <script src="./jquery-3.2.1.min.js"></script>
    <script>
        $(function () {

            var num = true

            $("#content").change(function () {
                if (num == true) {
                    var p = document.createElement("p")//创建p标签

                    p.innerText = "" + $("#content").val() + ""
                    //将input标签内容赋值给创建好的p标签里的内容

                    $("body").append(p)//在body标签后面追加创建的p标签

                    if ($("p:last").text() == 0) {
                        var number = new Array()//创建空数组
                        for (var i = 0; i < $("p").length; i++) {
                            // 将创建在页面上的p标签内容全部追加进数组中
                            number.push(parseInt($("p:eq(" + i + ")")[0].innerText))
                        }
                        number.pop()//删除最后的输入记录”0“

                        $("p:last").html('最大值为：' + Math.min.apply(null, number) + '；最大值为：' + Math.max.apply(null, number) + '')

                        num = false //结束
                    }

                } else {
                    return null
                }
            })
        })
    </script>
</body>

</html>

RixRenex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态的求出最大值最小值

实现技术：动态求出最大值最小值详解：在html页面中的input内任意输入数字，并记录下来以往的输入记录，输入“0”数字时，计算出输入记录中的最大值和最小值。实现需求：熟练并熟悉jQuery代码库。对数组要有一定概念1、：初始化在html文件内创建好必要的初始代码，并且在文件中引入jQuery代码库2、：检测打印步骤：1、需要在js中编写代码；2、检测到input标签输入的值；3、打印在html页面中用到的事件：change()事件——当内容改变时触发函数；难点：元素的创建，以及添加；达
复制链接

扫一扫

专栏目录