使用数组循环时---类似刷新效果

最新推荐文章于 2023-04-27 09:03:05 发布

路伊-Ran

最新推荐文章于 2023-04-27 09:03:05 发布

阅读量234

点赞数

本文链接：https://blog.csdn.net/weixin_42789120/article/details/88787360

版权

重要的三点：
1.在for循环时要算好位置
2.先用str=“”后再给 Ul.innerHTML=str;-----性能会得到提升
3.在函数声明前调用函数
以下是使用函数和不使用函数（注释）的写法

		<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <meta http-equiv="X-UA-Compatible" content="ie=edge">
		    <title>Document</title>
		</head>
		<body>
		    <input type="button" value="切换"/>
		    <ul></ul>
		    <script>
		    var arr = ["新闻1","新闻2","新闻3","新闻4","新闻5","新闻6","新闻7","新闻8","新闻9","新闻10","新闻11","新闻12","新闻13","新闻14","新闻15"];
		    var btn=document.getElementsByTagName('input')[0];
		    var Ul=document.getElementsByTagName('ul')[0];
		    var i=0;
		    changenews();
		        // btn.onclick=function(){
		        //     str="";
		        //     for(var j=i*5;j<i*5+5;j++){
		        //          console.log(j);
		        //        str+="<li>"+arr[j]+"</li>";
		        //        Ul.innerHTML=str;
		        //         console.log("***"+j);
		                
		        //     }
		        //     if(i<arr.length/5-1){
		        //         i++;
		        //     }else{
		        //         i=0;
		        //     }  
		           
		        // }
		        function changenews(){
		            var str="";
		            for(var j=i*5;j<i*5+5;j++){
		               str+="<li>"+arr[j]+"</li>";   
		            }
		            Ul.innerHTML=str;
		        }
		        btn.onclick=function(){
		            if(i<arr.length/5-1){
		                i++;
		            }else{
		                i=0;
		            }  
		            changenews();
		        }
		    </script>
		</body>
		</html>