當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS-简单实现1
正在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);//創建divvar 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);}//小于0function less(){//先刪除所有節點element.childNodes返回元素子節點的NodeListvar 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>總結
- 上一篇： java-模拟存放String类型数据的
- 下一篇： css3属性box-sizing:bor