闲来无事写个JS玩玩儿,小二上代码咧~~~

来源：互联网发布：手机淘宝怎么删除账号编辑：程序博客网时间：2024/06/05 10:17
<!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>
阅读全文
1 0