Day2,学习原生js

循环语句

跟C++的循环语句类似，循环有for/ for-in/ while/ do-while/

代码示例：for

1 for (let i = 0; i<10; i++){
2 　　console.log(i)
3 }//初始条件i=0,当i<10时，进入代循环体内，循环体执行完成后，执行i++。变量可以在之前声明

for-in

1 for (let propName in window) {
2             document.write ( propName)
3 }//每次执行循环时，都会将window对象中存在一个属性名赋值给变量propName。这个过程会一直持续到对象中的所有属性都被枚举一遍未知。变量可以在之前声明

while

1 let i = 0;
2 while (i<10) {
3     console.log(i++);
4 }//while属于前测试村换语句，也就是说，在循环体内的代码被执行之前，就会对出口条件求值。有可能循环体一次也不执行

do-while

1 let i = 0;
2 do{
3     console.log(i++)
4 }while (i<10);//后测试循环语句常用于循环体代码至少要被执行一次

label语句

label:
        for(let a =0; a<4;a++ ){
            document.write('a='+a+'<br>');
            for(let b=0; b<4; b++){
                document.write('我在a'+a+'里，b='+b+'<br>');
                if(a === 0) break;
                else if(a === 1) continue;
                else if(a === 1) continue label;
                else break label;
            }//配合break、continue，更好的实现控制效果

        }

下面是实验案例，实现的是一个生成指定数目div的功能

angleBracket.html

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>宁沙沙的第07次作业</title>
 6     <link rel="stylesheet" href="css/ab.css">
 7 </head>
 8 <body>
 9     <input type="number" name="num" id="num" placeholder="请输出你想添加几个盒子">
10     <div id="btn">就决定是你了！</div>
11     <div id="container">
12     </div>
13     <script src="js/ab.js"></script>
14 </body>
15 </html>

ab.css

* {
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

img {
    vertical-align: top;
    border: none
}
#num{
    display: block;
    border: 0;
    border-bottom: 1px solid black;
    margin: 20px auto 0;
    height: 30px;
    width: 200px;
    transition: .3s;
}
#num:focus{
    transform: scale(1.2);
    margin-bottom: 20px;
}
#container{
    position: relative;
    margin: 50px auto;
    border-radius: 5px;
    border: 1px solid black;
    height: 200px;
    width: 100px;
    min-height: 200px;
    min-width: 100px;
    transition: width .8s,height .8s;
}
#container div{
    position: absolute;
    width: 50px;
    height: 50px;
    background: deepskyblue;
    left: 0;
    top: 0;
}
#btn{
    margin: 5px auto;
    background:skyblue;
    border: 0;
    border-radius: 12px;
    width: 135px;
    height: 49px;
    cursor: pointer;
    font-size: 14px;
    line-height: 49px;
    text-align: center;
    font-weight: bold;
}

ab.js

 1 {
 2     let container = document.getElementById('container'),
 3         btn = document.getElementById('btn');
 4 
 5     btn.onclick = function () {
 6         let num = document.getElementById('num').value,
 7             mid = num/2;
 8         container.innerHTML = '';
 9         container.style.width = 50*Math.ceil(mid)+'px';
10         container.style.height = 50*num+'px';
11         for (let i = 0; i<num; i++){
12             let count = i+1;
13             if(i<mid)
14                 container.innerHTML += '<div style="top:'+i*50+'px;left:'+i*50+'px;">'+ count +'</div>';
15             else
16                 container.innerHTML += '<div style="top:'+i*50+'px;left:'+(num-i-1)*50+'px;">'+ count +'</div>';
17         }
18 
19     }
20 }

大致就是这样，发现的新问题，es6中推荐使用 === 取代 == ，再写label时使用的‘=’导致调试半天还未解决问题，要注意

JavaScript 学习之路（二）

Day2,学习原生js

循环语句

代码示例：for

for-in

while

do-while

label语句

猜你喜欢