for循环动态生成一组新闻以及cssText的应用
在说今天的知识点之前,先说一下cssText的属性应用,关于cssText是给标签添加行内样式,比如我们要给一个原有的div动态添加了宽高500px;然后又通过cssText给动态添加了一个宽200px,那么最后这个div上的样式就只有最后你添加的这个200px;而宽度就没有了,看代码:
1 window.onload= function(){ 2 var oBox=document.getElementById("box"); 3 oBox.onclick=function(){ 4 oBox.style.cssText="width:500px;height:500px;"//第一次添加的500px的宽高 5 }; 6 oBox.onclick=function(){ 7 oBox.style.cssText="width:200px;"//第二次添加的200px的宽,那么结果是只有一个宽200的div 8 } 9 10 }
从上面的案例就说明了,cssText在标签没有属性值的时候是添加,若是有行内样式的话就相当于是替换的功能。好了,接着我们来看今天的内容for循环动态添加新闻,设定一个ul标签,然后我们通过动态添加li标签以及生成5条新闻,布局很简单直接来看代码:
1 <input id="btn" type="button" value="点击生成5条新闻"> 2 <ul id="list"></ul>
我想要实现的效果是通过点击button来生成5条新闻,那么我们来分析
第一步:就是要有一个5条新闻的数组,然后给ul添加li,接着就把5条新闻循环在li里即可;来看看代码:
1 window.onload= function(){ 2 var Btn=document.getElementById("btn"); 3 var Ul=document.getElementById("list"); //先找到最外面的ul 4 var arr=["新闻1","新闻2","新闻3","新闻4","新闻5"]; 5 var len=arr.length; 6 Btn.onclick=function(){ 7 for(var i=0;i<len;i++){ 8 Ul.innerHTML+="<li>" + arr[i] + "</li>";//这里一定要记得是追加+=内容,若是等于就是相当于直接给li添加最后一个“新闻5”了 9 } 10 } 11 };
这样写完之后,点击按钮会出现5条新闻了,但是有一个问题出现了,那就是一直点击就一直在追加新闻,导致点击一次添加5条,所以我们要解决这个问题,想要点击之后追加5条新闻之后就再次点击不再加新闻,呢么接下来就是
第二步:解决一直点击一直追加新闻这个问题。
解决这个问题有几种方法:
1、是button点击之后就直接禁掉(或者隐藏);这个不是很友好,用户体验不太好
2、点击完之后就将页面清空,那么第二次进来就相当于重新进来一样;这个性能不好,浏览器一直在清空,生成,清空,生成...
3、就是做判断。
最后一个比较合理,那么我们来做判断,就是先设置一个开关,当点击按钮进来为真的 情况下,我们就让它生成5条新闻,否则就不动态添加。代码如下
1 window.onload= function(){ 2 var Btn=document.getElementById("btn"); 3 var Ul=document.getElementById("list"); //先找到最外面的ul 4 var arr=["新闻1","新闻2","新闻3","新闻4","新闻5"]; 5 var len=arr.length; 6 var onOff=true;//先设置开关为真 7 Btn.onclick=function(){ 8 if(onOff){ 9 for(var i=0;i<len;i++){ 10 Ul.innerHTML+="<li>" + arr[i] + "</li>"; 11 12 } 13 onOff=false;//执行完以上代码之后,我们让它为假,这样下次进来就不执行了 14 } 15 16 } 17 18 19 };
最后这个思路就是直接执行一次,所以性能上会比较好一点,好了,希望我们能够共同进步,在以后的项目中都能灵活运用,以上想法都是可以,从代码最优上来看还是最后一个会有好一点!ok,就这样了,明天继续!加油!