admin管理员组

文章数量:1794759

菜鸟教程jquery刷完后的 练手小项目

菜鸟教程jquery刷完后的 练手小项目

<html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style type="text/css">

        * {             padding: 0;                         margin：0 auto;         }

        .wrap-head {             margin: 5px;             text-align: center;             line-height: 50px;             width: 600px;             height: 50px;             border: 1px solid #ccc;             background: gray;             vertical-align: center;         }

        .wrap-head input {             width: 14%;             height: 40px;             background: white;             border: 1px solid #ccc;             border-radius: 10px;         }         .wrap-head input:hover{

            background-color: green;         }         #warp-main div {             margin: 5px;             border: 1px solid gray;             height: 80px;             width: 600px;             position: relative;             background: gray;             text-align: center;             line-height: 80px;         }         .wrap{

            position: absolute;             margin-left: 380px;         }     </style>

</head> <body> <div class="wrap">     <div class="wrap-head">         <input type="button" id="add" value="添加">         <input type="button" id="delete" value="删除">         <input type="button" id="less" value="小于0">         <input type="button" id="bigger" value="大于0">         <input type="button" id="ref" value="刷新">         <input type="button" id="all" value="显示全部">     </div>

    <div id="warp-main"></div>

</div>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>     <script type="text/javascript">

        $(function () {

            //保存所有数字             var numArr = [];             function random(min, max){                if(min > max){

                var te = min;                     max = te;                     min = max;                }//floor是向下取整,例如floor(3,9)的结果为3(不遵循四舍五入)ceil()是向上取整                    return Math.floor(Math.random()* (max - min +1) + min);             }                       function randColor(){

                return '#' + Math.floor(Math.random() * 0XFFFFFF).toString(16);             }             

            $("#add").click(function () {                 var num = random(-50, 50);                 numArr.push(num);  //向数组添加元素，并返回数组长度                 $("#warp-main").append($("<div>").html(num).css({"background-color": randColor}));             });

            //删除 从最后一个开始删除             $("#delete").click(function(){                            var num = $("#warp-main:last-child").html();                 var index = numArr.indexOf(parseInt(num));                 numArr.splice(index, 1);//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 index 表示删除元素的位置，1表示删除一个元素

            $("#warp-main :last-child").animate({"marginLeft": "100%"}, function(){                     this.remove()

               });

            });

            // 大于零的数字

            $("#bigger").click(function () {                $("#warp-main").empty();

                $(numArr).each(function (i) {                     if (numArr[i] > 0){                         $("#warp-main").append($("<div>").html(numArr[i]).css({"background-color":randColor()}));                     }

                });

            });

            //小于零的数字显示

             $("#less").click(function () {                $("#warp-main").empty();

                $(numArr).each(function (i) {                     if (numArr[i] < 0){                         $("#warp-main").append($("<div>").html(numArr[i]).css({"background-color":randColor()}));                     }

                });

            });          //刷新                $("#ref").click(function () {                 numArr = [];                 var showNum = $("#warp-main > div").length;  //用#warp-main div后代选择器也一样                 for (var i = 0; i < showNum; i++){                     numArr[i] = random(-50, 50);                 }

                $("#warp-main > div").each(function (i) {                     $(this).html(numArr[i]).css({"background-color":randColor()});                 })

            });

            // 显示全部 

            $("#all").click(function(){                  $("#warp-main").empty();   //把#warp-mian下的元素设置为空                  for(var i=0; i<numArr.length;i++){                     $("#warp-main").append($("<div>").html(numArr[i]).css({"background":randColor()}));                  }

            });        

        });

    </script> </body> </html>

本文标签： 菜鸟完后项目教程JQuery

版权声明：本文标题：菜鸟教程jquery刷完后的 练手小项目 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968801a123605.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。