<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .top{

                float: left;

                margin-left: 22px;

                margin-top: 30px;

                height: 320px;

                width: 240px;

            }

            .top img{

                width: 100%;

                height: 100%;

            }

        </style>

    <body>

        <div class="top">

            <img class="tu1" src="../pic/1.jpg">

        </div>

    </body>

</html>

<script type="text/javascript">

    //1、先用js获取到div的内容

    document.getElementsByClassName('top').innerHTML;

    var re = "";

    var tu = 1;

    for (var i = 0; i < 9; i++) {

        tu++;

        re += '<div class="top">' +

            '<img class="tu1" src="../pic/'+tu+'.jpg">' +

            '</div>';

    }

    document.writeln(re);

</script>

html 复习（for循环不同内容的div）的更多相关文章

  1. 解决拖拽有内容的div的bug和兼容问题

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  2. C#5 复习总结循环 迭代和穷举

    一.章节复习: 循环.反复执行某段语句一种语法形式. 1.基本语法: for( 初始条件 ; 循环条件 ; 状态的改变 ) { 循环体 } 循环的四要素. 循环的执行过程.初始条件--循环条件--循环 ...

  3. 将展示内容（div、iframe）放在Expand控件中

    Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放 ...

  4. 用循环将三个DIV变成红色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JavaScript（八）——复习一（重要内容基本包含在内）

    一.常用对话框 1.alert(""):警告对话框,作用是弹出一个警告对话框 2.confirm(""):确定对话框,弹出一个带确定和取消按钮的对话框——确定返 ...

  6. 项目期复习总结2：Table， DIV+CSS，标签嵌套规则

    文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...

  7. JavaScript小练习3-用循环使三个DIV变色

    题目 初始为黑色,点击后为红色,再次点击为黑色,以后每次点击一次变色. 分析 简单的onclick使用. button的居中可以在外套一个p元素,body中让p居中即可. 三个DIV块的居中,使用ma ...

  8. CSS------当内容超出div宽度后自动换行

    <div class="AllReceivers-normal" style="widht:100%;height:100%;word-wrap: break-wo ...

  9. JavaSE复习日记 : 循环终止语句(break/break outerFor/continue)

    最近没网,但攒了几天的博客,这次逮到机会发博客,直接三篇走起; /* * 循环终止语句: break/ break outerFor/ continue */ /* * break语句 * 1. 用于 ...

随机推荐

  1. Npoi 的使用

    npoi这个office写入,我个人有点不方便,但是因为需要使用所以不得不去用了. 原因: 1. 没文档 2. 网上的案例版本不同 3. 对于复杂列不好做处理 跟网上其他工具的对比,好处就是不需要依赖 ...

  2. 『正睿OI 2019SC Day4』

    总结 今天是一场欢乐的\(ACM\)比赛,于是我队得到了全场倒数的好排名. 好吧,其实还是怪自己不能怪队友啦.对于\(ACM\),可能最主要的还是经验不足,导致比赛的时候有点紧张.虽然队友为了磕一道题 ...

  3. wps金山文档在线编辑--.Net 接入指南

    一.申请成为服务商,对金山文档在线服务进行申请 ①进入官网 https://open.wps.cn/ ②申请后如下图,点击右下角的进入服务 ③申请成功后 ④数据回调URL一定是服务器地址,本次我使用的 ...

  4. Mysql之视图和事务（五）

    一:视图 1.问题 对于复杂的查询,往往是有多个数据表进行关联查询而得到,如果数据库因为需求等原因发生了改变,为了保证查询出来的数据与之前相同,则需要在多个地方进行修改,维护起来非常麻烦 解决办法:定 ...

  5. Java自学-接口与继承 隐藏

    Java中的方法隐藏 与重写类似,方法的重写是子类覆盖父类的对象方法 隐藏,就是子类覆盖父类的类方法 步骤 1 : 父类 父类有一个类方法 :battleWin package charactor; ...

  6. C++ GDI图形设备接口

    一.概念 1． GDI:(Graphics Device Interfase)图形设备接口,是一个应用程序与输出设备之间的中介. 一方面,GDI向应用程序提供一个与设备无关的编程环境,另一方面,它又以 ...

  7. AQS原理

    1. AQS原理 1.1. 是什么 AQS全程AbstractQueuedSynchronizer抽象队列同步器,它是并发包中的基础类 ReetrantLock,ReentrantReadWriteL ...

  8. 在safari上，解决fixed失效问题

    一个页面中有头部.底部和中间内容区域,底部固定在屏幕底端. 头部header 内容main 底部footer 方法一.在main上使用fixed定位,加上overflow-y属性. .main { p ...

  9. Spark编译的三种方式

    有三种编译方式,此文采用make-distribution.sh编译 其余两种为maven 和SBT编译 1.配置jdk 配置maven 配置scala 2.修改spark下make-distribu ...

  10. 排序算法的c++实现——堆排序

    我们利用最大堆可以实现数组从小到大的原址排序,利用最小堆的可以实现对数组从大到小的原址排序. 1  二叉堆的简单介绍: 最大堆与最小堆可以当作通过数组来实现的一个完全二叉树,除了最底层之外其它层都是满 ...