JavaScript学习三

作者: qianxun0921 | 来源:发表于2018-09-19 13:42 被阅读0次

数组

面向对象的方式创建
var arr01 = new Array(1,3,6,'abc');
直接创建
var arr02 = [1,2,3,'def'];

alert(arr02.length);//输出数组的长度

var arr03 = [[1,2,3],['a','b','c','d'],[true,false]];
alert(arr03[1].length);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <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>
</head>
<body>
    
</body>
</html>

数组的常用方法

用-连接数组元素并转为字符串

var sTr = aRr.join("-");//用-连接数组元素并转为字符串，弹出1-2-3-4

join 连接

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

push 向数组最后追加元素

aRr.push(5);
alert(aRr);//1,2,3,4,5

pop 删除末尾元素

aRr.pop();
alert(aRr);//1,2,3

unshift 向最前面插入元素0

aRr.unshift(0);
alert(aRr);//0,1,2,3,4

shift 删除第一个（索引为0的）元素

aRr.shift();
alert(aRr);//2,3,4

reverse 反转

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

通过标签获取元素

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

循环语句

通过循环语句可以反复的执行一段代码多次

while循环
语法：
while(条件表达式){
语句...
}

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

数组去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组去重</title>
    <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>
</head>
<body>
    
</body>
</html>
}

字符串处理方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串处理的方法</title>
    <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>
</head>
<body>
    
</body>
</html>

字符串反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串反转</title>
    <script type="text/javascript">
        var sTr = "123asdf79888asdfe21";
        //1、split字符串转成数组
        //2、reverse数组反转
        //3、join数组转成字符串
        var sTr2 = sTr.split('').reverse().join('');
        alert(sTr2);//12efdsa88897fdsa321
    </script>
</head>
<body>
    
</body>
</html>

定时器的基本用法

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

定时器动画

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

时钟

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

倒计时

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

变量的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量的作用域</title>
    <script type="text/javascript">
        /*
        全局变量：函数外部定义的变量，函数内部和外部都可以访问，它的值可以共享

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

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

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

            // alert(a);
        }

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

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

JavaScript学习三

数组

数组的常用方法

通过标签获取元素

循环语句

数组去重

字符串处理方法

字符串反转

定时器的基本用法

定时器动画

时钟

倒计时

变量的作用域

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读