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

最新推荐文章于 2023-09-12 10:30:13 发布
最新推荐文章于 2023-09-12 10:30:13 发布
阅读量1.2k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaorouer888/article/details/72917978
版权

<!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 >













七彩皮皮丽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
for循环生成坐标—逢十换行/v字排列
whoops_butterfly的博客
10-10 1408
逢十换行： 无标题文档 div{width:50px;height:50px;background:#0C9;text-align:center;line-height:50px;color:#fff;font-size:18px;position:absolute;top:0px;left:0px;} window.onload = function(){ v
python for循环换行_python循环换行
热门推荐
weixin_39747568的博客
11-30 1万+
广告关闭腾讯云11.11云上盛惠 ，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元！代码太长怎么办，反斜杠引号 ‘’来帮忙！ 在写list或者较长的字符串时候，或者多个循环造成ide不够用时，就需要代码换行了。 主要的代码换行有通用的反斜杠和针对字符串起作用的三引号结构。 1.反斜杠对于一般表达式来说，反斜杠后直接回车即可实现续行， 使用的关键在于反斜杠后不能用空格...
打印循环换行_for循环
weixin_28943467的博客
01-13 1061
for循环的语法格式执行过程：1.先求解表达式1(只求解一次)2.求解表达式2，若表达2为真，执行下面的循环语句，然后求解表达式3；再求解表达式2，以此类推，直到表达式2为假，结束循环。举个小例子：依旧是求1加到100的和<script type="text/javascript"> var sum=0;for(vari=0;i<=100; i...
python for循环换行_python for循环换行_day08-循环之for循环
weixin_31751887的博客
01-28 3586
for循环-前言'''1、什么是for循环循环就是重复做某件事，for循环是python提供第二种循环机制2、为何要有for循环理论上for循环能做的事情，while循环都可以做之所以要有for循环，是因为for循环在循环取值(遍历取值)比while循环更简洁3、如何用for循环语法：for 变量名 in可迭代对象:# 可迭代对象可以是：列表、字典、字符串、元组、集合代码1代码2代码3...'''...
python for循环换行_day08-循环之for循环
weixin_39787057的博客
11-30 1678
for循环-前言'''1、什么是for循环循环就是重复做某件事，for循环是python提供第二种循环机制2、为何要有for循环理论上for循环能做的事情，while循环都可以做之所以要有for循环，是因为for循环在循环取值（遍历取值）比while循环更简洁3、如何用for循环语法：for 变量名 in可迭代对象:# 可迭代对象可以是：列表、字典、字符串、元组、集合代码1代码2代码3...'''...
java面试-leetcode面试java编程题解之第6题Z字形变换-java题解.zip
03-08
1. 初始化一个二维数组或ArrayList，大小根据输入字符串长度和最大行数（通常是字符串长度/2+字符串长度%2）来确定。 2. 使用一个变量`row`表示当前行数，初始值为0。 3. 遍历输入字符串，每次取出一个字符。 4. ...
(M*N) Dimention Matrix to Zigzag：这个程序输入一个 am*n 矩阵并返回一个 zigzag（线矩阵），它的长度是 m*n <<v-matlab开发
06-01
这个程序会返回一个一维数组，其中包含了原始矩阵的所有元素，按照Zigzag顺序排列。在实际应用中，这样的转换可能用于数据的压缩、编码或者图像处理中的特定操作，例如在水印算法中隐藏信息。 在给定的"zigzag.zip...
蓝桥杯Python模拟赛题之回形取数.zip
最新发布
04-21
3. **循环控制**：通常使用嵌套循环来遍历二维数组，外层循环控制行，内层循环控制列。在回形取数问题中，需要根据当前方向和边界条件动态调整循环次数。 4. **条件判断**：在遍历过程中，需要设置条件判断语句，...
z transfer_力扣；Z形变换_
09-30
4. 使用两个嵌套循环来遍历二维数组。外层循环控制行数，内层循环控制每行的字符填充。 5. 在内层循环中，根据当前行的位置，决定是从左到右填充还是从右到左填充。如果当前位置在当前行的起始位置到结束位置之间，...
zigzag算法_matlab实现
05-09
这里需要知道原始图像的尺寸，然后根据Zigzag路径反向操作，将一维数组中的元素按顺序填充到二维矩阵中。同样，这可以通过创建一个空的二维矩阵，然后按照Zigzag路径的逆序将一维序列中的值填充到对应位置实现。 在...
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
10-18
主要介绍了关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),需要的朋友可以参考下
Vue中v-for的数据分组实例
11-28
使用Vue.js可以很方便的实现数据的绑定和更新，有时需要对一个一维数组进行分组以方便显示，循环可以直接使用v-for，那分组呢？这里需要用到vue的computed特性，将数据动态计算分组。 代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> [removed][removed] </head> <bod
动态生成div逢十折行
aaa小二
05-16 564
for循环 动态生成div 每十个一行
循环语句—循环嵌套
weixin_67796933的博客
04-13 1382
5.循环嵌套 （学完循环嵌套要求知道循环嵌套的格式和执行流程） 5.1循环嵌套概述 语句结构： 顺序语句： ①以分号结尾，表示一句话的结束； 分支语句： ①一对大括号表示if的整体结构，整体描述一个完整的if语句。 ②一对大括号表示switch的整体结构，整体描述一个完整的switch语句。 循环语句： ③一对大括号表示for的整体结构，整体描述一个完整的for语句。 ④一对大括号表示while的整体结构，整体描述一个完整...
Vue 在table中使用v-for，满足一定条数换行，动态控制table行数
qq_41672186的博客
09-12 1389
【代码】Vue 在table中使用v-for，满足一定条数换行，动态控制table行数。
Vue.js 中 v-for 的使用
Asd1659841663的博客
05-26 1048
v-for指令是一个基于数组来重复渲染的指令，通常用于显示列表和表格数据 v-for指令需要使用“iteminitems”形式的特殊语法 items是源数据数组 item则是被迭代的数组元素的别名 下面案例是使用 v-for 打印出data数据源中的数据 <div id="app"> <ul> <!-- item 是从items表里取出来的一项 ，...
Vue v-for循环自动换行
张音乐的博客
08-06 9471
如图所示,每行显示4个卡片 <template> <el-row align="middle" type="flex" style="flex-wrap: wrap"> <el-col :lg="{ span:6 }" v-for="(item) in schemaList" :key="item.id" :offset="0" class="card-col-wb"> <el-card class="box-card"&..
德国Vue.js2终极开发教程（含Vue路由和Vuex）
03-08
新手入门现代前端开发的不二选择课程目标：* 学会从简单到复杂企业级应用的VueJS程序编写方法* 能在单页和多页应用中自如使用VueJS* 真正理解VueJS的背后原理，并在真实项目中应用它们授课计划：23章节，21小时，341个视频，11个练习，3个工程实践；新VueJS 2.x版本，课程随版本升级。
vue小圆图遍历换行并只显示前9个
chaosama的博客
07-25 1200
先看效果 记得带key，虽然提升不大，但是至少警告栏少了 <template> <div class="service-class p30"> <div class="sc-list"> <div class="sc-item" v-for="(img,index) in images" :key="img.id" v-...
回字形二维数组c语言
01-10
以下是使用C语言实现回字形二维数组的代码示例： ```c #include <stdio.h> #define SIZE 10 int main() { int arr[SIZE][SIZE]; int num = 1; int i, j; // 初始化数组 for (i = 0; i < SIZE; i++) { for (j = 0; j < SIZE; j++) { arr[i][j] = 0; } } // 填充回字形二维数组 int layer = 0; while (layer < SIZE / 2) { // 从左到右 for (i = layer; i < SIZE - layer; i++) { arr[layer][i] = num++; } // 从上到下 for (i = layer + 1; i < SIZE - layer; i++) { arr[i][SIZE - layer - 1] = num++; } // 从右到左 for (i = SIZE - layer - 2; i >= layer; i--) { arr[SIZE - layer - 1][i] = num++; } // 从下到上 for (i = SIZE - layer - 2; i > layer; i--) { arr[i][layer] = num++; } layer++; } // 打印回字形二维数组 for (i = 0; i < SIZE; i++) { for (j = 0; j < SIZE; j++) { printf("%6d", arr[i][j]); } printf("\n"); } return 0; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值