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