当前位置：
首页 >
前端技术
> 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类型数据的
- 下一篇： Spring整理