循环语句、条件判断

while 循环

为页面添加9个无序列表
var str = "";
var div1 = document.getElementByID("div1");
var i = 1;
str+="<ul>";
while(i<10){
    str+="<li>"+i+"</li>";
    i++;
}
str+="</ul>";
div1.innerHTML=str

循环前执行多次语句写在while中，循环条件必须写在while()的最后
故也可以写成

var str = "";
var div1 = document.getElementByID("div1");
var i = 1;
str+="<ul>";
while(i++<10){
    str+="<li>"+(i-1)+"</li>";
}
str+="</ul>";
div1.innerHTML=str;

while循环实现1-100的和

一、
var i = 1;
var sum = 0;
while(i++<=100){
    sum+=(i-1);
}
console.log(sum);
二、
var i = 1;
var sum = 0;
while(i<=100){
    sum+=(i-1);
    i++;
}
console.log(sum);
三、
var i = 1;
var sum = 0;
while(sum+=i++,i<=100);//while语句块写在括号里面的时候，需要在while语句后面添加分号
console.log(sum);

用while循环打印三角形

var i = 0;
while(i<6){  //控制打印三角形的行数为6行
    i++;
    j=0;
    k=0;
    while(j<6-i){//j控制打印空格的个数
    document.write("&ensp;&ensp;");
    j++;
    }
    while(k<2*i-1){  //k控制打印*的个数
        document.write("*");
        k++;
    }
    document.write("<br>");
}

break 跳出 跳出循环并且不再进入循环

continue 继续 跳出本次循环，继续下次循环，当前本次不执行continue后面的语句

使用while和do while语句，i++不能写在continue后面

回流和重绘

当渲染树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流。每个页面在第一次加载的时候会发生回流，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流和重绘区别：

他们的区别很大：回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

跳出标记

```bas
//     var i = 0;
// zhangsan:  while (i++ < 10) {
//         var j = 0;
//         while (j++ < 10) {
//             if (i + j === 10) continue zhangsan;
//             console.log(i, j);

//         }

//     }
//     console.log("aaa");
```

条件语句需要预先察觉可能出现的错误并且做条件判断执行

if else 需要明确条件 try catch出错切换

        // var div=document.getElementById("divs");
        // if(div){
        //     div.innerHTML="abc";
        // }else{
        //     div=document.getElementById("div1");
        //     div.innerHTML="cde";
        // }


        // 不需要预先判断出现错误，由try去自身判断
        // var div
        // try{
        //    div=document.getElementById("divs");
            // div.innerHTML="aaa";
        // }catch(e){
        //    div=document.getElementById("div1");
             // div.innerHTML="bbb";
        // }finally{
        //     console.log("ddd");
        // }

do{}while();可以规划出起始条件和结束条件，某个变量并不是循环的起始部分

// var i=0;
// do{
//     i--;
//     console.log(i);
//     if(i<-10) break;
// }while(i<0);

条件判断

// switch多分支条件语句 判断相等 （===）
//上一个case中没有使用break，则会穿越到下一个case中执行，不判断条件
// 判断表达式和case中哪一个值相等，并且执行对应的语句块
// break 跳出语句块
// default 如果不等同任何一个case的值，则执行default中的语句块

// switch(表达式){
        //     case 值1:
        //     break;
        //     case 值2:
        //     break;
        //     case 值3:
        //     break;
        //     case 值4:
        //     break;
        //     default:

        // }

setInterval()

重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。每次调用之间有固定的时间延迟。它返回一个时间间隔ID，该ID唯一地标识时间间隔，因此可以稍后通过调用clearInterval()来删除它。

实现一个红色的盒子顺时针方向移动200px

.div1{
    width:50px;
    height:50px;
    background:red;
}

var x=0;
var y=0;
status = right;
setInterval(function(){
    switch(status){
        case "right":
        x++;
        if(x===200) status=down；
        break;
        case "down":
        y++;
        if(y===200) status=left；
        break;
        case "left":
        x--;
        if(x===0) status=up；
        break;
        case "up":
        y--;
        if(y===0) status=right；
        break;
    }
    div1.style.left = x+"px";
    div1.style.top = y+"px";
},16)

for循环

初始值 开始执行 执行一次
条件 循环开始判断（进入循环语句块之前） 循环几次执行几次（比循环语句块多执行一次）
向条件外变化的表达式 每次循环语句块结束后执行 循环几次执行几次（和循环语句块执行次数相等）

for(初始值;条件;向条件外变化的表达式){
    // 语句块
}
for( ；；){

 }
 用for循环实现1-100所有的质数的打印
    console.time("test");//开启定时器
    outer: for(var i=2,j;i<100;i++){
            	for(j=2;j<=Math.sqrt(i);j++){
               	 if(i%j === 0) continue outer;
                }
            console.log(i+"这是质数");
       }
             console.timeEnd("test");//停止计时
 		//lable循环语句，使用break终止循环的时候，可以在break后面跟一个lable，这样break将会结束指定的循环，而不是最近的
 		//continue关键字主要是用来跳过当次的循环