菜鸟教程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>

$(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刷完后的练手小项目