版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xllfy123/article/details/80748763
正在xiaoxi JS的小白偶然看到博客中一个关于jquery的小项目，于是拿来学习，然后自己用js初步实现了一下，可是小白毕竟还是小白……
参考链接https://blog.csdn.net/dapyandxpy/article/details/73350506谢大佬
jquery实现
<!DOCTYPE html>
<html>
<head>
<title>zll</title>
<meta charst="UTF-8">
<style type="text/css">
*{
padding:0;
margin: 0;
}
.wrap_head{
margin: 5px;
text-align: center;
line-height: 50px;
width: 600px;
height:50px;
border:1px solid #ccc;
background: gray;
}
input{
margin: 3px;
width:80px;
height:38px;
border:1px solid white;
border-radius: 10px;
background-color:white;
}
#wrap_main div{
margin: 5px;
border:1px solid gray;
height:80px;
width:60px;
position:relative;
text-align:center;
line-height:80px;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//保存所有数字
var numArr=[];
function random(min,max){
if(min>max){
var temp=min;
min=max;
max=temp;
}
//floor向下取整//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);
$("#wrap_main").append($("<div>").html(num).css({"background-color":randColor}));
});
//删除
$("#delete").click(function(){
var num=$("#wrap_main:last-child").html();
var index=numArr.indexOf(parseInt(num));
numArr.splice(index,1);
/**
*下面这个地方：前面一定要有空格（我也不知道为什么）
这样remove的话回从最后一个div remove
否则整个wrap_main就remove掉了，再也不能添加
*/
/**
*animate()是自定义动画的函数，后面参数见api
*/
$("#wrap_main :last-child").animate({"marginLeft":"100%"},function(){
this.remove()
});
});
//小于0
$("#less").click(function(){
$("#wrap_main").empty();
for(var i=0;i<numArr.length;i++){
if(numArr[i]<=0){
$("#wrap_main").append($("<div>").html(numArr[i]).css({"background-color" :randColor()}));
}
}
});
//大于0
$("#bigger").click(function(){
$("#wrap_main").empty();
for(var i=0;i<numArr.length;i++){
if(numArr[i]>0){
$("#wrap_main").append($("<div>").html(numArr[i]).css({"background-color":randColor()}));
}
}
});
//刷新
$("#ref").click(function(){
$("#wrap_main").empty();
for(var i=0;i<numArr.length;i++){
numArr[i]=random(50,-50);
$("#wrap_main").append($("<div>").html(numArr[i]).css({"background-color":randColor()}));
}
});
//显示全部
$("#all").click(function(){
$("#wrap_main").empty();
for(var i=0;i<numArr.length;i++){
$("#wrap_main").append($("<div>").html(numArr[i]).css({"background-color":randColor()}));
}
});
});
</script>
<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="wrap_main"></div>
</div>
</body>
</html>
JS实现
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charst="UTF-8">
<style type="text/css">
*{
padding:0;
margin: 0;
}
.wrap_head{
margin: 5px;
text-align: center;
line-height: 50px;
width: 600px;
height:50px;
border:1px solid #ccc;
background: gray;
}
input{
margin: 3px;
width:80px;
height:38px;
border:1px solid white;
border-radius: 10px;
background-color:white;
}
#wrap_main div{
margin: 5px;
border:1px solid gray;
height:80px;
width:60px;
position:relative;
text-align:center;
line-height:80px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_head">
<input type="button" id="add" value="添加" onclick="add()">
<input type="button" id="delete" value="删除" onclick="deleteDiv()">
<input type="button" id="less" value="小于0" onclick="less()">
<input type="button" id="bigger" value="大于0">
<input type="button" id="ref" value="刷新">
<input type="button" id="all" value="显示全部">
</div>
<div id="wrap_main"></div>
</div>
</body>
<script type="text/javascript">
/**
这个地方的JavaScript代码要卸载body后面，一开始我是写在head标签里面的，但是我运行的时候一直报错cannot read property‘appendchild’ of null,是因为我的js代码写在head标签里面，我获取这个节点wrap_main的时候，节点还没有加载
*/
window.onload=function(){
}
var Div=document.getElementById("wrap_main");
var numArr=[];
//产生随机数
function RandomNum(min,max){
if(min>max){
var temp=min;
min=max;
max=temp;
}
return Math.floor(Math.random()*(max-min+1)+min);
}
//随机颜色
function randomColor(){
return '#'+Math.floor(Math.random()*0XFFFFFF).toString(16);
}
//添加
function add(){
var num=RandomNum(-50,50);
numArr.push(num);
//创建div
var newDiv1=document.createElement("div")
//把随机数放入
newDiv1.innerHTML=num;
//填充颜色
var color=randomColor();
newDiv1.style.backgroundColor=color;
newDiv1.style.width="100px";
newDiv1.style.height="50px";
//把新的div放到Wrap_main中
Div.appendChild(newDiv1);
}
//删除
function deleteDiv(){
//var deleteNode=Div.lastChild();
//deleteNode.remove();
//Div.lastChild.remove();
var len=0;
var lchild=Div.lastChild;
var f=setInterval(function(){
len+=15;
lchild.style.marginLeft=len+"px";
if(lchild.offsetLeft>1500){
clearInterval(f);
lchild.remove();
}
},3);
}
//小于0
function less(){
//先删除所有节点element.childNodes返回元素子节点的NodeList
var childs=Div.childNodes;
//要从后向前删除（如果是从前向后，一次循环完成后只能删除一半的子节点，删除不彻底）
for(var j=childs.length-1;j>=0;j--){
Div.removeChild(childs[j]);
}
//Div.removeChild();alert("l;ksd");
for(var i=0;i<numArr.length;i++){
if(numArr[i]<0){
var newDiv=document.createElement("div");
newDiv.innerHTML=numArr[i];
var color=randomColor();
newDiv.style.backgroundColor=color;
newDiv.style.width="100px";
newDiv.style.height="50px";
Div.appendChild(newDiv);
}
}
}
//后面三个函数出不多的道理，不写了
</script>
</html>