html 自动生成13个div,1-4 取模运算生成100个DIV.html

Title

* {margin: 0;padding: 0}

.box {

width: 520px;

height: 520px;

position: relative;

float: left;

}

.box div {

width: 50px;

height: 50px;

text-align: center;

line-height: 50px;

color: white;

position: absolute;

/*背影图片url写到css中 不要在js中style里指定*/

background-image: url("img/qumo.jpg");

/*在css中指定所有小div的背影的尺寸为相同的我们想指定的某个尺寸，这样就不受图片尺寸的限制了。*/

background-size: 500px 500px;

}

oBox1 = document.querySelector('#box1');

oBox2 = document.querySelector('#box2');

let str1 = '';

let str2 = '';

//两个循环做法：横向循环+纵向循环

for(var j=0;j<10;j++){

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

str1 += `

${i+1}

`

}

}

oBox1.innerHTML = str1;

//一次循环：使用%取模运算

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

// %取模运算 求余数

// 2%5 = 2 2除以5商0余2 n%5的结果总是：0 1 2 3 4

//任意数 %n 的结果为0到n-1

//left值为每10递增后重新从0开始，也就是%10 结果为0 1 2 3 4 5 6 7 8 9 然后第10个变为0 11为1

//top值直接除以10得到十分位用parseInt取整，将小数舍弃。

//left值和top值都乘以小div的宽度50px多1px，这样两个小div之前就会留出1px的间隙。

//background的top值和left值同理 这里不需要多1px的间隙，直接乘以50px即可。

str2 += `

${i+1}

`

}

oBox2.innerHTML = str2;

一键复制

编辑

Web IDE

原始数据

按行查看

历史