闲来无事写个JS玩玩儿,小二上代码咧~~~_闲来无事写了个代码-优快云博客

本文链接：https://blog.youkuaiyun.com/ran_uzi/article/details/73368844
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.buttonClass {
    width: 200px;
    text-align: center;
    background-color: #61fffd;
    height: 100px;
}

.divClass div {
    background-color: #d7e6ff;
    margin: 0px;
    height: 100px;
    text-align: center;
}
</style>


<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
    //随机数
    function getNumber() {
        var max = 1000;
        var min = -1000;
        var num = Math.floor(Math.random() * (max - min + 1) + min);
        return num;
    }
    //随机颜色
    function getColor() {
        var max = 255;
        var min = 0;
        var num1 = Math.floor(Math.random() * (max - min + 1) + min);
        var num2 = Math.floor(Math.random() * (max - min + 1) + min);
        var num3 = Math.floor(Math.random() * (max - min + 1) + min);
        var color = "#" + num1.toString(16) + num2.toString(16) + num3.toString(16);
        return color;
    }

    var n = 0;
    var numAll = new Array();

    $(function() {
        //添加
        $("#add").click(function() {
            var nu = getNumber();
            numAll.push(nu);
            n++;
            $(".divClass")
                    .append(" <br />" + " <div class='deleNum' style='background-color:" + " " + getColor() + "' id='" + n + "'>" + nu + "</div>");
        });

        //删除
        $("#delete").click(function() {
            $("#" + n).animate({
                "marginLeft" : "100%"
            }, function() {
                this.remove()
            });
            n--;
            var index = numAll.indexOf(parseInt($("#" + n).html()));
            numAll.splice(index, 1);
        })

        //显示小于零的数
        $("#siftMin")
                .click(function() {
                    n++;
                    $(".divClass").empty();
                    $(numAll)
                            .each(function(i) {
                                if (numAll[i] < 0) {
                                    $(".divClass")
                                            .append(" <br />" + " <div class='deleNum' style='background-color:" + " " + getColor() + "' id='" + n++ + "'>" + numAll[i] + "</div>");
                                }
                            })

                })
        //显示大于零的数
        $("#siftMax")
                .click(function() {
                    n++;
                    $(".divClass").empty();
                    $(numAll)
                            .each(function(i) {
                                if (numAll[i] >= 0) {
                                    $(".divClass")
                                            .append(" <br />" + " <div class='deleNum' style='background-color:" + " " + getColor() + "' id='" + n++ + "'>" + numAll[i] + "</div>");
                                }
                            })
                });

        //刷新
        $("#flush")
                .click(function() {
                    n++;
                    $(".divClass").empty();
                    $(numAll)
                            .each(function(i) {

                                $(".divClass")
                                        .append(" <br />" + " <div class='deleNum' style='background-color:" + " " + getColor() + "' id='" + n++ + "'>" + getNumber() + "</div>");

                            })
                });

        //显示全部
        $("#show")
                .click(function() {
                    n++;
                    $(".divClass").empty();
                    $(numAll)
                            .each(function(i) {

                                $(".divClass")
                                        .append(" <br />" + " <div class='deleNum' style='background-color:" + " " + getColor() + "' id='" + n++ + "'>" + numAll[i] + "</div>");
                            })
                });
    })
</script>
</head>
<body>

    <div>
        <button id="add" class="buttonClass">添加</button>
        <button id="delete" class="buttonClass">删除</button>
        <button id="siftMin" class="buttonClass">小于0</button>
        <button id="siftMax" class="buttonClass">大于0</button>
        <button id="flush" class="buttonClass">刷新</button>
        <button id="show" class="buttonClass">显示全部</button>
    </div>
    <div class="divClass"></div>


</body>
</html>