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

最新推荐文章于 2023-09-12 10:30:13 发布

七彩皮皮丽

最新推荐文章于 2023-09-12 10:30:13 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xiaorouer888/article/details/72917978

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

 
  <!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字形、逢10换行、遍历2维数组、嵌套元素、点击生成一组新闻

for循环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" conten
复制链接

扫一扫