2018-12-02

作者: 11bbc2c5d0c6 | 来源:发表于2018-12-08 13:13 被阅读0次

China renews yellow alert for f
钱江新城，红色的枫叶昭示冬天已深
Egg的ScalersTalk第四轮新概念朗读持续力训练Day5
［补］Echo的ScalersTalk第四轮新概念朗读持续力训练
每日前端签到（第120天）
那个村庄那些年的春节
不死者之王
《家，男人，女人》
“疯”56：飞向西雅图
张立新 || 攻击行为

数组

<script type="text/javascript">
    //面向对象的方式创建
    var aRr01 = new Array(1,2,3,'abc');
    //直接创建
    var aRr02 = [1,2,3,'def'];//推荐使用，性能更高

    //获取数组的成员数量（长度）
    // alert(aRr02.length);//弹出4
    // alert(aRr02[3]);//弹出cdf

    var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
    // alert(aRr03.length);//弹出3
    // alert(aRr03[1].length);//弹出3
    alert(aRr03[1][2]);//弹出c
</script>

数组常用方法

<script type="text/javascript">
    var aRr = [1,2,3,4];
    //用-连接数组元素并转为字符串
    //var sTr = aRr.join("-");//用-连接数组元素并转为字符串，弹出1-2-3-4

    // var sTr = aRr.join('');//用空串连接
    // alert(sTr);//弹出1234

    //向数组最后追加元素
    // aRr.push(5);
    // alert(aRr);//1,2,3,4,5

    //删除末尾元素
    // aRr.pop();
    // alert(aRr);//1,2,3

    //向最前面插入元素0
    // aRr.unshift(0);
    // alert(aRr);//0,1,2,3,4

    //删除第一个（索引为0的）元素
    // aRr.shift();
    // alert(aRr);//2,3,4

    //反转
    // aRr.reverse();
    // alert(aRr);//4,3,2,1

    //查找字母'b'第一次出现的索引
    var aRr2 = ['a','b','c','d','a','b','c','d'];
    var num = aRr2.indexOf('b');
    // alert(num);//1

    //从第2索引元素开始，删除1个元素
    // aRr2.splice(2,1);//删除c
    // alert(aRr2);//a,b,d,a,b,c,d

    //从第2索引元素开始，删除1个元素，再插入e
    // aRr2.splice(2,1,'e');//把c替换成e
    // alert(aRr2);//a,b,e,d,a,b,c,d

    //删除后面的abcd，改为fghi
    aRr2.splice(4,4,'f','g','h','i');
    alert(aRr2);//a,b,c,d,f,g,h,i
</script>

通过标签获取元素

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

循环语句

<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++;
        }*/

        do{
            aLi[j].style.background = 'gold';
            j++;
        }while(j < 0)

        /*
        以下是死循环的写法
        像这种将条件表达式写死为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>

数组去重

<script type="text/javascript">
    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
</script>

字符串处理的方法

<script type="text/javascript">
    /*字符串切断转成数组*/
    var sTr = '2018-06-20';
    var aRr = sTr.split('-');
    // alert(aRr);//2018,06,20
    // console.log(aRr);

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

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

    var sTr2 = '#div1';
    var sTr3 = '.div1';

    /*获取指定索引的字符*/
    var sTr4 = sTr2.charAt(0);
    if(sTr4 == '#'){
        // alert('id选择器');
    }

    /*查看子串第一次出现的位置*/
    var sTr5 = 'Microsoft Yahei';
    var num = sTr5.indexOf('Yahei');
    // alert(num);//10

    var num2 = sTr5.indexOf('xihei');
    // alert(num2);//没有找到就弹出-1

    /*substring截取子串*/
    //从10开始，截到15（包括开始位置，不包括结束位置）
    // var sTr6 = sTr5.substring(10,15);//Yahei
    //从10开始截取到末尾
    var sTr6 = sTr5.substring(10);//Yahei
    // alert(sTr6);

    /*全部转为大写字母*/
    // alert(sTr6.toUpperCase());//YAHEI
    /*全部转为小写字母*/
    alert(sTr6.toLowerCase());//yahei
</script>

字符串反转

<script type="text/javascript">
    var sTr = "123abc456";
    //1、split字符串转成数组
    //2、reverse数组反转
    //3、join数组转成字符串
    var sTr2 = sTr.split('').reverse().join('');
    alert(sTr2);//12efdsa88897fdsa321
</script>

计算器

<script type="text/javascript">
    window.onload = function(){
        var oInput01 = document.getElementById('input01');
        var oInput02 = document.getElementById('input02');
        var oSelect = document.getElementById('select');
        var oBtn = document.getElementById('btn');

        oBtn.onclick = function(){
            var val01 = oInput01.value;
            var val02 = oInput02.value;

            //不做此判断会弹出“NaN”
            if(val01=="" || val02==""){
                alert('输入框不能为空！');
                return;
            }
            if(isNaN(val01) || isNaN(val02)){
                alert('请输入数字！');
                return;
            }
            switch(oSelect.value){
                case '0':
                    alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
                    break;
                case '1':
                    alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
                    break;
                case '2':
                    alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
                    break;
                case '3':
                    alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
                    break;
            }
        }
    }
</script>
</head>
<body>
<h1>计算器</h1>
<input type="text" name="" id="input01" />
<select id="select">
    <option value="0">+</option>
    <option value="1">-</option>
    <option value="2">*</option>
    <option value="3">/</option>
</select>
<input type="text" name="" id="input02" />
<input type="button" name="" value="计算" id="btn" />
</body>

定时器弹框

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

China renews yellow alert for f
2018-12-02 BEIJING -China's national observatory on Sunda...
钱江新城，红色的枫叶昭示冬天已深
2018-12-02 拍于杭州市江干区钱江新城
Egg的ScalersTalk第四轮新概念朗读持续力训练Day5
1、练习材料： [Day 1528 2018-12-02] Lesson56 Faster than sound!...
［补］Echo的ScalersTalk第四轮新概念朗读持续力训练
训练材料： [Day 1528 2018-12-02] Lesson56 Faster than sound! O...
每日前端签到（第120天）
第120天（2018-12-02） [html] html的button中的reset有什么作用？ [css] 说...
那个村庄那些年的春节
那个村庄那些年的春节珍玛娜吉 2018-12-02 喜获佳讯，家乡虾拉沱村...
不死者之王
《OVERLORD》霸气登顶年度轻小说销量榜公布 ycc20060631腾讯动漫2018-12-02 18:13...
《家，男人，女人》
巴渝墨客 2018-12-02 前言有家的男人，要如山。有家的女人，要如水。有家的男...
“疯”56：飞向西雅图
原创观弈路人空白辑2018-12-02 “疯”眼看美国56：飞向西雅图 20180730一飞向西雅图 20180...
张立新 || 攻击行为
2018-12-02 第10章攻击：伤害他人（一）第349页本章开篇，引用了刘易斯.托马斯（Thomas，1...