JS-簡單實現1
阿新 • • 發佈：2018-11-22
正在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 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>