<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>