面向对象，闭包

（1）通过标签获取元素

<!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>  |

[View](https://github.com/phoenixshow/FrontCode/blob/b995903f7f67cb31f025e8e78d8a7aac8a589cbf/demo137_%E5%BE%AA%E7%8E%AF%E8%AF%AD%E5%8F%A5.html) 

139  [demo137_循环语句.html](https://github.com/phoenixshow/FrontCode/commit/b995903f7f67cb31f025e8e78d8a7aac8a589cbf#diff-d61dc9bae6bdd56595c1d29fa179f8a9 "demo137_循环语句.html")

|  |  | @@ -0,0 +1,139 @@ |
|  |  | +<!DOCTYPE html> |
|  |  | +<html lang="en"> |
|  |  | +<head> |
|  |  | + <meta charset="UTF-8"> |
|  |  | + <title>循环语句</title> |
|  |  | + <script type="text/javascript"> |
|  |  | + /* |
|  |  | + 循环语句： |
|  |  | + 通过循环语句可以反复的执行一段代码多次 |
|  |  | + |
|  |  | + while循环 |
|  |  | + - 语法： |
|  |  | + while(条件表达式){ |
|  |  | + 语句... |
|  |  | + } |
|  |  | + |
|  |  | + - while语句在执行时， |
|  |  | + 先对条件表达式进行求值判断， |
|  |  | + 如果值为true，则执行循环体， |
|  |  | + 循环体执行完毕以后，继续对表达式进行判断 |
|  |  | + 如果为true，则继续执行循环体，以此类推 |
|  |  | + 如果值为false，则终止循环 |
|  |  | + |
|  |  | + do...while循环 |
|  |  | + - 语法： |
|  |  | + do{ |
|  |  | + 语句... |
|  |  | + }while(条件表达式) |
|  |  | + |
|  |  | + - 执行流程： |
|  |  | + do...while语句在执行时，会先执行循环体， |
|  |  | + 循环体执行完毕以后，在对while后的条件表达式进行判断， |
|  |  | + 如果结果为true，则继续执行循环体，执行完毕继续判断以此类推 |
|  |  | + 如果结果为false，则终止循环 |
|  |  | + |
|  |  | + 实际上这两个语句功能类似，不同的是while是先判断后执行， |
|  |  | + 而do...while会先执行后判断， |
|  |  | + do...while可以保证循环体至少执行一次， |
|  |  | + 而while不能 |
|  |  | + |
|  |  | + for语句，也是一个循环语句，也称为for循环 |
|  |  | + 在for循环中，为我们提供了专门的位置用来放三个表达式： |
|  |  | + 1.初始化表达式 |
|  |  | + 2.条件表达式 |
|  |  | + 3.更新表达式 |
|  |  | + |
|  |  | + for循环的语法： |
|  |  | + for(①初始化表达式;②条件表达式;④更新表达式){ |
|  |  | + ③语句... |
|  |  | + } |
|  |  | + |
|  |  | + for循环的执行流程： |
|  |  | + ①执行初始化表达式，初始化变量（初始化表达式只会执行一次） |
|  |  | + ②执行条件表达式，判断是否执行循环。 |
|  |  | + 如果为true，则执行循环③ |
|  |  | + 如果为false，终止循环 |
|  |  | + ④执行更新表达式，更新表达式执行完毕继续重复② |
|  |  | + |
|  |  | + 任意一种循环都可以互相嵌套 |
|  |  | + */ |
|  |  | + window.onload = function(){ |
|  |  | + var oList = document.getElementById('list01'); |
|  |  | + var aLi = oList.getElementsByTagName('li'); |
|  |  | + /*for (var i = 0; i < aLi.length; i++) { |
|  |  | + if(i % 2 == 0){ |
|  |  | + aLi[i].style.background = 'gold'; |
|  |  | + } |
|  |  | + }*/ |
|  |  | + |
|  |  | + /*for(var j in aLi){ |
|  |  | + aLi[j].style.background = 'red'; |
|  |  | + }*/ |
|  |  | + |
|  |  | + //创建一个循环，往往需要三个步骤 |
|  |  | + //1.创初始化一个变量 |
|  |  | + var j = 0; |
|  |  | + //2.在循环中设置一个条件表达式 |
|  |  | + while(j < aLi.length){ |
|  |  | + aLi[j].style.background = 'gold'; |
|  |  | + //3.定义一个更新表达式，每次更新初始化变量 |
|  |  | + j++; |
|  |  | + } |
|  |  | + |
|  |  | + /* |
|  |  | + 以下是死循环的写法 |
|  |  | + 像这种将条件表达式写死为true的循环，叫做死循环 |
|  |  | + 该循环不会停止，除非浏览器关闭，死循环在开发中慎用 |
|  |  | + 可以使用break，来终止循环 |
|  |  | + */ |
|  |  | + /*while(true){ |
|  |  | + if(j>10){ |
|  |  | + break;//退出整个循环 |
|  |  | + } |
|  |  | + j++; |
|  |  | + } |
|  |  | + //for循环的死循环写法 |
|  |  | + for(;;){ |
|  |  | + |
|  |  | + }*/ |
|  |  | + |
|  |  | + /* |
|  |  | + break关键字可以用来退出switch或循环语句 |
|  |  | + 不能在if语句中使用break和continue |
|  |  | + break关键字，会立即终止离他最近的那个循环语句 |
|  |  | + continue关键字可以用来跳过当次循环 |
|  |  | + 同样continue也是默认只会对离他最近的循环循环起作用 |
|  |  | + */ |
|  |  | + /* |
|  |  | + 可以为循环语句创建一个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; |
|  |  | + } |
|  |  | + } |
|  |  | + } |
|  |  | +  </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> |
|  |  | + <li>9</li> |
|  |  | + </ul> |
|  |  | +</body> |
|  |  | +</html>  |

do...while循环

//1.创初始化一个变量
            var j = 0;
            //2.在循环中设置一个条件表达式
 -          while(j < aLi.length){
 +          /*while(j < aLi.length){
                aLi[j].style.background = 'gold';
                //3.定义一个更新表达式，每次更新初始化变量
                j++;
 -          }
 +          }*/
 +
 +          do{
 +              aLi[j].style.background = 'gold';
 +              j++;
 +          }while(j < 0)

定时器在javascript中的作用

1、制作动画
2、异步操作
3、函数缓冲与节流
定时器类型及语法

/*
定时器：
setTimeout  只执行一次的定时器 
clearTimeout 关闭只执行一次的定时器
setInterval  反复执行的定时器
clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
      alert('ok!');
}

定时器动画

<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>

定时器制作时钟

<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>

封闭函数

<!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>

用变量的方式定义函数

<!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>

闭包

<!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>

闭包存循环的索引

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包存循环的索引值</title>
<style type="text/css">
    li{
        height: 30px;
        background-color: gold;
        margin-bottom: 10px;
    }
</style>
<script type="text/javascript">
    //闭包的用途：存循环的索引值
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // alert(aLi.length);//8
        for(var i=0; i<aLi.length; i++){
            /*
            aLi[i].onclick = function(){
                alert(i);//每个li都弹出8，因为点击时循环已完毕，i最后为8
            }
            */
            (function(k){//这里的k是形参
                aLi[k].onclick = function(){
                    alert(k);//弹出每个li的索引值
                }
            })(i);//这里的i是实参
        }
    }
</script>
</head>
<body>
<ul>
    <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>
</body>
</html>

闭包做私有变量计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包做私有变量计数器</title>
    <script type="text/javascript">
    //闭包的用途：私有变量计数器
    var count = (function(){
        var a = 0;
        function bb(){
            a++;
            return a;
        }
        return bb;
    })();
    
    //每调用一次count，a就自增一次
    alert(count());//1
    alert(count());//2
    var c = count();
    alert(c);//3
</script>
</head>
<body>

</body>
</html>
(6)闭包做选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包做选项卡</title>
    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
    }
    /*选项卡的样式*/
    .btns input{
        width: 100px;
        height: 50px;
        background-color: #ddd;/*默认灰色*/
        color: #666;
        border: 0px;
    }
    /*被选中的选项卡的样式*/
    .btns input.cur{
        background-color: gold;
    }
    /*内容区的样式*/
    .contents div{
        width: 500px;
        height: 300px;
        background-color: gold;
        display: none;/*默认隐藏*/
        line-height: 300px;
        text-align: center;
    }
    /*被选中的内容区的样式*/
    .contents div.active{
        display: block;
    }
</style>
<script type="text/javascript">
    //闭包做选项卡
    window.onload = function(){
        var aBtn = document.getElementById('btns').getElementsByTagName('input');
        var aCon = document.getElementById('contents').getElementsByTagName('div');
        // alert(aCon.length);
        //循环所有的选项卡按钮
        for(var i=0; i<aBtn.length; i++){
            (function(i){
                //给每个选项卡按钮添加点击事件
                aBtn[i].onclick = function(){
                    //遍历所有选项卡按钮
                    for(var j=0; j<aBtn.length; j++){
                        //将每个选项卡按钮都设为灰色
                        aBtn[j].className = '';
                        //将每个内容区都隐藏
                        aCon[j].className = '';
                    }
                    //this代表当前点击的Button对象
                    this.className = 'cur';//当前点击的按钮为金色
                    // alert(i);//不加闭包时，不管点哪个按钮，i都等于3
                    //加闭包保存了索引值才有效
                    aCon[i].className = 'active';//当前点击的按钮对应的内容显示
                }
            })(i);
        }
    }
</script>
</head>
<body>
<div class="btns" id="btns">
    <input type="button" value="tab01" class="cur">
    <input type="button" value="tab02">
    <input type="button" value="tab03">
</div>
<div class="contents" id="contents">
    <div class="active">tab文字内容一</div>
    <div>tab文字内容二</div>
    <div>tab文字内容三</div>
</div>
</body>
</html>
(8)跳转的源页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转的源页面</title>
    <script type="text/javascript">
    
    </script>
</head>
<body>

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

推荐阅读更多精彩内容