for循环—V字形、逢10换行、遍历2维数组、嵌套元素、点击生成一组新闻

最新推荐文章于 2022-04-13 09:46:31 发布

七彩皮皮丽

最新推荐文章于 2022-04-13 09:46:31 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/xiaorouer888/article/details/72917978

js 专栏收录该内容

28 篇文章

订阅专栏

本文通过实例演示了如何利用HTML和JavaScript实现元素布局、动态生成内容及响应用户交互，包括V字形布局、按行显示元素及点击生成新闻列表等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <style>
        div{
            width: 60px;
            height: 60px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 60px;
            color: #fff;
        }
    </style>
    <script>
        window.onload = function(){
            var str ="";
            for(var i=0; i<200; i++){
                str += '<input type = "button" value = "按钮" />';
            }
            document.body.innerHTML = str;

            
            // V字形
            for(var i=0; i<11; i++){
                document.body.innerHTML += "<div>"+i+"</div>";
            }
            var adiv = document.getElementsByTagName("div");
            for(var i=0; i<6; i++){
                adiv[i].style.left = i*60+"px";
                adiv[i].style.top = i*60+"px";
            }
            for(var i=6; i<11; i++){
                adiv[i].style.left = i*60+"px";
                adiv[i].style.top = (10-i)*60+"px";
            }


            //逢10换行
            for(var i=0; i<20; i++){
                document.body.innerHTML += "<div>"+i+"</div>";
            }
            var adiv = document.getElementsByTagName("div");

            for(var i=0; i<10; i++){
                adiv[i].style.left = 10+i*70+"px";
            }

            for(var i=10; i<20; i++){
                adiv[i].style.left = 10+(i-10)*70+"px";
                adiv[i].style.top = 70+"px";
            }
           
           
            //for循环遍历2维数组、嵌套元素
            var oul = document.getElementById("list");
            var aul = oul.getElementsByTagName("ul");
            
            for(var i=0; i<aul.length; i++){
                var ali = aul[i].getElementsByTagName("li");
                for(var z=0; z<ali.length; z++){
                    ali[z].style.border = "1px solid red";
                }
            }


            //点击生成一组新闻
            var otext = document.getElementById("text");
            var obtn = document.getElementById("btn");
            var arr = [
                "1. 如果您想学习 JavaScript，您可以学习本教程：了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。",
                "2. 如果在此之前您已经使用过 JavaScript，您也可以阅读本教程",
                "3. JavaScript 一直在升级，所以我们需要时刻了解 JavaScript 的新技术。"
            ];
            var onoff = true;

            obtn.onclick = function(){
                if(onoff){
                    for(var i=0; i<arr.length; i++){
                        otext.innerHTML += "<li>"+arr[i]+"</li>";
                    };  
                    onoff = false;   
                }          
            };
            
        }




//jq方法点击生成一组新闻        $(function(){
            var arr = [
                    "1. 如果您想学习 JavaScript，您可以学习本教程：了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。",
                    "2. 如果在此之前您已经使用过 JavaScript，您也可以阅读本教程",
                    "3. JavaScript 一直在升级，所以我们需要时刻了解 JavaScript 的新技术。"
                ]; 
            var onoff = true;

            $("#btn").click(function(){
                var element="";
                if(onoff){
                    for(var i=0; i<arr.length; i++){
                        element += "<li>"+arr[i]+"</li>";
                    }
                     $("#text").html (element);
                    onoff = false;   
                }         
            })
        })




    </script>
</head>
<body>
   <ul id="list">
       <li>
           我的好友
           <ul>
               <li>张夏丽</li>
               <li>张丽</li>
               <li>夏丽</li>
           </ul>
       </li>
       <li>
           我的坏友
           <ul>
               <li>孙丽</li>
               <li>赵龙</li>
           </ul>
       </li>
   </ul> 

 
   <input id="btn" type="button" value="自动生成5行" />
   <ul id="text"></ul>
</body>
</html>