WEB前端开始学习 8.1-JavaScript循环结构

65 阅读 0 评论 43 点赞

我是靠谱客的博主陶醉唇彩，最近开发中收集的这篇文章主要介绍WEB前端开始学习 8.1-JavaScript循环结构，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.循环结构是反复不断的执行某些代码块

for循环语法结构一般使用在已知循环次数的情况下
初始化变量：用于计数
条件表达式：循环的终止条件
操作表达式：更新计数器

2.for(初始化变量;条件表达式;操作表达式){

//需要循环执行的代码

}

3.弹性盒子的骰子作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>骰子3</title>
<style>
ul {
width: 700px;
height: 700px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
li {
width: 200px;
height: 200px;
background-color: black;
list-style: none;
position: relative;
}
li>div {
width: 100px;
height: 100px;
background-color: white;
border-radius: 5px;
padding: 20px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
}
.box1 {
flex-wrap: wrap;
justify-content: flex-end;
align-content: space-between;
}
.box1>div {
width: 100px;
display: flex;
justify-content: space-between;
}
.box2 {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.box2>div {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.box3 {
display: flex;
justify-content: space-between;
}
.box3>.item:nth-of-type(2) {
align-self: center;
}
.box3>.item:nth-of-type(3) {
align-self: flex-end;
}
.box4 {
flex-wrap: wrap;
align-content: space-between;
}
.box4>div {
width: 100px;
display: flex;
justify-content: space-between;
}
.box5 {
justify-content: space-between;
}
.box5>div {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.box6 {
flex-wrap: wrap;
}
.box6>div {
flex-basis: 100%;
display: flex;
align-content: space-between;
}
.box6>div:nth-of-type(1) {
justify-content: space-between;
}
.box6>div:nth-of-type(2) {
justify-content: center;
align-items:center;
}
.box6>div:nth-of-type(3) {
justify-content: space-between;
align-items:flex-end;
}
.box7{
justify-content: space-between;
}
.box7>div {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item {
display: inline-block;
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
}
</style>
</head>
<body>
<ul>
<li>
<div class="box1">
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<span class="item"></span>
</div>
</li>
<li>
<div class="box2">
<div>
<span class="item"></span>
<span class="item"></span>
</div>
<div>
<span class="item"></span>
<span class="item"></span>
</div>
</li>
<li>
<div class="box3">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</li>
<li>
<div class="box4">
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</li>
<li>
<div class="box5">
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</li>
<li>
<div class="box6">
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div>
<span class="item"></span>
</div>
<div>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</li>
<li>
<div class="box7">
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</li>
</ul>
</body>
</html>