码迷,mamicode.com
首页 > Web开发 > 详细

for循环动态生成一组新闻以及cssText的应用

时间:2017-11-23 08:30:31      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:document   说明   height   效果   按钮   项目   接下来   doc   color   

在说今天的知识点之前,先说一下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,就这样了,明天继续!加油!

 

for循环动态生成一组新闻以及cssText的应用

标签:document   说明   height   效果   按钮   项目   接下来   doc   color   

原文地址:http://www.cnblogs.com/web001/p/7881225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!