循环 定时器 函数 闭包

1. 条件分支语句

  • 语法:

      switch(条件表达式){
      case 表达式:
          语句...
          break;
      case 表达式:
          语句...
      break;
          default:
          语句...
          break;
          }

  • 执行流程：

    • 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，

      • 如果比较结果为true，则从当前case处开始执行代码。当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，这样可以确保只会执行当前case后的语句，而不会执行其他的case
      • 如果比较结果为false，则继续向下比较,如果所有的比较结果都为false，则只执行default后的语句

    • switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。

  • 例子

var today = 1;
switch(today){
    case 1:
        alert('语文');
        break;
    case 2:
        alert('语文');
        break;
     case 3:
    alert('语文');
        break;
    case 4:
        alert('语文');
        break;
    case 5:
        alert('语文');
        break;
    default:
        alert('不补习')
        break;//最后一个可以不写,但是还是写的好,如果放在上方,不写会继续执行.如果想利用穿透的时候,那就不用写了;
}
  • switch可以穿透,遇到break才停止.

2. 数组

var arr01 = new Array(1,3,6,'acd');

var arr01 = [1,2,3,'lll'];
alert(arr01.length);
alert(arr01[1]);//下标从0开始

//二维数组
var arr03 = [[],[],[]];//二维数组,n维套n层
alert(arr03[1].length);

var str = arr03.join('-');//用-将数组中的元素拼接起来,可以为空

arr03.push(5);//数组末尾追加,
arr03.pop();//删除末尾;

arr03.unshift(0);//数组开头添加
arr03.shift();//数组开头删除

arr03.reverse();//数组顺序翻转;

arr03.sort();//排序,但是不太好用;


 var arr03 = [1 , 5 , 8 , 6 , 5];
 //元素在数组中第一次出现的索引值
 var num = arr03.indexof(5);


arr03.splice(2,1);//splice(index,num),从下标开始,删除1个元素,
arr03.splice(2,1,'e');//splice(index,num),从下标开始,删除1个元素,并添加e,可以理解为替换
arr03.splice(2,4,'e','f','g','h');//从第二个开始,删除四个,并添加4个

3. 获取标签过去元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过标签获取元素</title>
    <script type="text/javascript">
        window.onload = function(){
            // //获取页面上所有的li
            // var aLi = document.getElementsByTagName('li');

            //获取id为list01的ul
            var oList = document.getElementById('list01');
            //再获取这个ul下的所有li
            var aLi = oList.getElementsByTagName('li');
            alert(aLi.length);//8
            // aLi.pop();//错误用法，aLi是一个类似数组的选择集，没有数组通用的一些方法

            aLi[0].style.backgroundColor = 'gold';
            aLi[1].style.backgroundColor = 'gold';
        }
    </script>
</head>
<body>
    <ul id="list01">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <ul id="list02">
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</body>
</html>

4. 循环语句

4.1 for 循环

  • for循环的语法：

      for(①初始化表达式;②条件表达式;④更新表达式){
              ③语句...
          }

  • for循环的执行流程：

    • ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
    • ②执行条件表达式，判断是否执行循环。
      • 如果为true，则执行循环③
      • 如果为false，终止循环
    • ④执行更新表达式，更新表达式执行完毕继续重复②

  • 例子

    for( var i=0;i < ali.length ; i++){
        if(i % 2 == 0){
            ali[i].style.background = 'gold';
        }
    }

4.2 while循环

  • 语法：

              while(条件表达式){
              语句...
          }

  • while语句在执行时，

    • 先对条件表达式进行求值判断，
      • 如果值为true，则执行循环体，循环体执行完毕以后，继续对表达式进行判断
      • 如果为true，则继续执行循环体，以此类推
      • 如果值为false，则终止循环
  • 例子 
    //while先判断后执行
var i = 0;
while( i < ali.length){
    ali[i].style.background = 'gold';
    i++;
}

4.3 do while 循环

  • 语法：

              do{
              语句...
          }while(条件表达式)

  • 执行流程：

    • do...while语句在执行时，会先执行循环体，循环体执行完毕以后，在对while后的条件表达式进行判断，
      • 如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
      • 如果结果为false，则终止循环

  • 例子

    //do  while,先执行后判断
var i = 0;
do{
        ali[i].style.background = 'gold';
    i++;
}while(i < ali.length)

4.4 死循环

在死循环中,可以使用break，来终止循环;

  • break关键字可以用来退出switch或循环语句,不能在if语句中使用break和continue
    • break关键字，会立即终止离他最近的那个循环语句
  • continue关键字可以用来跳过当次循环
    • 同样continue也是默认只会对离他最近的循环循环起作用
    while(true){
        //跳出循环
        if(){
            break;
        }
    }

    for(;;){
        //跳出循环
        if(){
            break;
        }
    }

    lable:
    for(){
        for(){
            if(){

                break lable;
            }
        }
    }
/*可以为循环语句创建一个label，来标识当前的循环
                label:循环语句
            使用break语句时，可以在break后跟着一个label，
                这样break将会结束指定的循环，而不是最近的*/

outer:
    for(var i=0 ; i<5 ; i++){
        console.log("@外层循环"+i);
        for(var j=0 ; j<5; j++){
            console.log("内层循环:"+j);
            break outer;

5. 数组去重

    var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
    var aRr2 = [];

    for(var i=0; i<aRr.length; i++){
        //判断元素第一次出现的位置，恰好是当前索引时，就将元素放入新数组
        if(aRr.indexOf(aRr[i]) == i){
            aRr2.push(aRr[i]);
        }
    }

    alert(aRr2);//1,3,4,6,9,2,5

6. 字符串处理的方法

/*字符串切断转成数组*/
var s = '2018-8-8'
var arr = s.split('-');//[2018,8,8]
var arr = s.split('');//['2', '0' ,'1' ,'8' ,'-','8', '-' ,'8']

var aRr2 = sTr.split('');
// console.log(aRr2);

/*实际上就是修改了<title>标签的内容*/
// document.title = aRr2;


var str2 = '#div';
var str3 = '.div';
var str4 = str2.charAt(0);//#    返回索引所对应的字符
if(str4 == '#'){
    alert('id选择器');
}else if(str4 == '.){
    alert('类选择器');

}

/*查看子串第一次出现的位置*/
var tr5 = 'Microsoft Yahei';
var num = tr5.indexof('Yahei');//10  //查询子串
var num1 = tr5.indexof('Xihei');//-1   说明没有找到

var str6 = tr5.substring(10,15);//包括开始位置,不包括结束位置;
var str6 = tr5.substring(10);//从第10位开始到最后
//字母的大小写转换
var str6 = tr5.toUpperCase();//全大写
var str6 = tr5.toLowCase();//全小写

6.1 字符串的反转

  1. split 方法 转成数组
  2. reverse 反转数组
  3. join数组转成字符串
var str= 'asdfghj147852369';
//var str1 = str.split('').reverse().join('');
var srt1 = str.split('');
var str2 = str1.reverse();
var str3 = str2.join('');

7. 定时器

7.1 定时器弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器弹框</title>
    <style type="text/css">
        .pop{
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #000;
            /*固定定位*/
            position: fixed;
            /*左上角位于页面中心*/
            left: 50%;
            top: 50%;
            /*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
            margin-left: -200px;
            margin-top: -150px;
            /*弹窗在最上面*/
            z-index: 9999;
        }
        /*遮罩样式*/
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            left: 0;
            top: 0;
            /*设置透明度30%*/
            opacity: 0.3;
            filter: alpha(opacity=30);/*兼容IE6、7、8*/
            /*遮罩在弹窗的下面，在网页所有内容的上面*/
            z-index: 9990;
        }
        .pop_con{
            display: none;/*默认不显示，用定时器显示*/
        }
    </style>
    <script type="text/javascript">
        /*
        setTimeout      只执行一次的定时器
        clearTimeout    关闭只执行一次的定时器
        setInterval     反复执行的定时器
        clearInterval   关闭反复执行的定时器
        */

        window.onload = function(){
            var oPop = document.getElementById('pop');
            var oShut = document.getElementById('shutOff');

            /*setTimeout(showPop, 3000);//开启定时器，3秒后调用函数showPop()弹框

            function showPop(){
                oPop.style.display = 'block';//显示弹框和遮罩
            }*/
            //开启定时器的简写方式：调用匿名函数
            setTimeout(function(){
                oPop.style.display = 'block';
            }, 3000);

            oShut.onclick = function(){
                oPop.style.display = 'none';//关闭弹框和遮罩
            }
        }
    </script>
</head>
<body>
    <h1>首页标题</h1>
    <p>页面内容</p>
    <a href="http://www.baidu.com">百度网</a>


    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息！</h3>
            <a href="#" id="shutOff">关闭</a>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

7.2 定时器的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器的基本用法</title>
    <script type="text/javascript">
        //单次定时器
        var timer = setTimeout(function(){
            alert('hello!');
        }, 3000);

        //清除单次定时器
        clearTimeout(timer);

        //反复循环定时器
        var timer2 = setInterval(function(){
            alert('hi~~~');
        }, 2000);

        //清除反复循环定时器
        clearInterval(timer2);
    </script>
</head>
<body>
    
</body>
</html>

7.3 定时器动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            position: fixed;
            left: 20px;
            top: 20px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBox = document.getElementById('box');

            var left = 20;
            //反复循环定时器，每30毫秒修改一次盒子的left值
            var timer = setInterval(function(){
                left += 2;
                oBox.style.left = left + 'px';

                //当left值大于700时停止动画（清除定时器）
                if(left > 700){
                    clearInterval(timer);
                }
            },30);
        }
    </script>
</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

7.4 时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oBox = document.getElementById('box');

            function timeGo(){
                var now = new Date();
                // alert(now);//弹出美式时间：Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
                var year = now.getFullYear();//2018年
                var month = now.getMonth() + 1;//6月弹出5//范围0-11
                var date = now.getDate();//20号
                var week = now.getDay();//3//星期几，西半球时间，范围0-6，星期日为一周的第一天，为0

                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();

                // alert(hour + ":" + minute + ":" + second);//15:33:9

                oBox.innerHTML = '当前时间是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
            }

            timeGo();
            setInterval(timeGo, 1000);
        }

        //此函数将星期的数字转为汉字表示
        function toWeek(num){
            switch(num){
                case 0:
                    return '星期天'; 
                    break;
                case 1:
                    return '星期一'; 
                    break;
                case 2:
                    return '星期二'; 
                    break;
                case 3:
                    return '星期三'; 
                    break;
                case 4:
                    return '星期四'; 
                    break;
                case 5:
                    return '星期五'; 
                    break;
                case 6:
                    return '星期六'; 
                    break;
            }
        }

        //此函数将不足两位的数字前面补0
        function toDouble(num){
            if(num < 10){
                return '0' + num;
            }else{
                return num;
            }
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

7.5 倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <script type="text/javascript">
        window.onload = function(){
            //活动第二天要将页面下线，直接跳转到其它页面，不会走后面的代码了
            // window.location.href = "http://www.baidu.com";

            var oDiv = document.getElementById('div1');

            function timeLeft(){
                //实际开发中此时间从服务器获取，避免客户端调整时间
                var now = new Date();
                var future = new Date(2018,5,20,16,30,20);

                // alert(future - now);//弹出与当前时间相差的毫秒数：12469935436
                var milli = parseInt((future - now)/1000);

                //活动当天页面下线，避免倒计时到点后继续计负时
                // if(milli <= 0){
                //  //页面跳转，不执行下面的代码了
                //  window.location.href = "http://www.baidu.com";
                // }

                var day = parseInt(milli / 86400);
                var hour = parseInt(milli % 86400 / 3600);
                var minute = parseInt(((milli % 86400) % 3600) / 60);
                var second = milli % 60;

                oDiv.innerHTML = '距离2018年11月12日00时00分00秒还有' + day + '天' + toDouble(hour) + '时' + toDouble(minute) + '分' + toDouble(second) + '秒';
            }
            
            timeLeft();
            setInterval(timeLeft, 1000);
        }

        function toDouble(num){
            if(num < 10){
                return '0' + num;
            }else{
                return num;
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

8. 变量的作用域

  1. 全局变量：函数外部定义的变量，函数内部和外部都可以访问，它的值可以共享

  2. 局部变量：函数内部定义的变量，函数内部可以访问，外部无法访问。函数内部访问变量时，先在内部查找是否有此变量，如果有，就使用内部变量，如果没有，就去外部查找

  3. 函数内部如果不用'var'关键字定义变量，变量可能会变成全局变量，如果用严格模式解析会报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量的作用域</title>
    <script type="text/javascript">

        var a = 12;

        function aa(){
            // var a = 5;
            var b = 7;

            // alert(a);
        }

        // alert(a);
        // alert(b);//报错

        aa();
    </script>
</head>
<body>
    
</body>
</html>

9. 封闭函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封闭函数</title>
    <script type="text/javascript">
        /*原来的写法
        function myAlert(){
            var str = '欢迎访问我的主页';
            alert(str);
        }

        myAlert();*/

        var str = function(){
            alert('test');
        }
        
        //封闭函数的一般写法
        //封闭函数定义：(function(){……})()
        /*
        ;;(function(){
            var str = '欢迎访问我的主页';
            alert(str);
        })();//最后的()表示马上执行
        */

        //封闭函数其他的写法：在匿名函数前加“！”或者“~”，之后加“()”
        ~function(){
            var str = '欢迎访问我的主页';
            alert(str);
        }();
    </script>
</head>
<body>
    
</body>
</html>

10. 用变量的方式定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用变量的方式定义函数</title>
    <script type="text/javascript">
        /*
        原来的写法：可以提前
        myAlert();

        function myAlert(){
            alert('hello!');
        }*/

        //函数用变量方式定义：先定义再使用
        // myalert();//提前会报错
        var myAlert = function(){
            alert('hello!');
        }

        myAlert();//放在下面可以执行

    </script>
</head>
<body>
    
</body>
</html>

11. 闭包

  • 闭包
    • 闭包的本质就是函数嵌套，就是在函数里面定义函数，
    • 内部函数可以引用外部函数的参数和变量
    • 参数和变量不会被垃圾回收机制给回收
    • 闭包的用途：可以存循环的索引值、做私有变量计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
    <script type="text/javascript">

        /*
        //闭包的一般写法
        function aa(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        }

        var cc = aa(24);*/

        
        //闭包的封闭函数写法
        var cc = (function(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }
            return bb;
        })(24);

        cc();
        

        /*
        //只能调用一次的闭包
        (function(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        })(24)();
        */
    </script>
</head>
<body>
    
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,922评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,591评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,546评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,467评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,553评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,580评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,588评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,334评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,780评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,925评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,573评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2赞 352

推荐阅读更多精彩内容

  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 4,145评论 0赞 13
  • Swift Tour Learn (四) -- Swift 语法（控制流、函数）
    本章将会介绍 控制流For-In 循环While 循环If 条件语句Switch 语句控制转移语句 continu...
    寒桥阅读 715评论 0赞 0
  • 2018-06-14
    在C语言中,五种基本数据类型存储空间长度的排列顺序是: A)char B)char=int<=float C)ch...
    夏天再来阅读 3,340评论 0赞 2
  • 岁月留痕
    时光无声，岁月留痕，走过的路，有纯真的感动，难忘的温暖，亦难免会有薄凉和惆怅。每一段行程，都有转身告别的时刻。 经...
    李裕萱阅读 526评论 4赞 4
  • 黑板报
    新学期，新气象。同学们开学第一周迎来了教师节，同学们积极的准备着，也祝愿老师们教师节快乐！
    卫校一五护三阅读 213评论 0赞 0