重点--内置对象

2019-06-24  本文已影响0人  潘肚饿兵哥哥

\color{rgba(254, 67, 101, .8)}{内置对象中有很多方法,需要多看文档}

目标:
1.知道什么是内置对象
2.能够根据文档查询指定API的使用方法
3.能够使用Math对象的额常用方法
4.能够使用Date对象的常用方法
5.能够使用Array对象的常用方法
6.能够使用String对象的常用方法

\color{rgba(254, 67, 101, .8)}{JS中对象分3种:自定义对象、内置对象、浏览器对象}
\color{rgba(254, 67, 101, .8)}{内置对象是JS自带的对象,提供给开发者使用}
\color{rgba(254, 67, 101, .8)}{并提供一些常用的或者最基本且必要的功能(属性和方法)}

\color{rgba(254, 67, 101, .8)}{查文档:在MDN这个网站上查}

1.查阅该方法的功能
2.查看里面参数的意义和类型
3.带中括号的参数可写可不写
Math.max(value1[,value2, ...])
4.查看返回值的类型和意义
5.通过demo进行测试

\color{rgba(254, 67, 101, .8)}{Math对象}
\color{rgba(254, 67, 101, .8)}{math数学对象不是一个构造函数,所以我们不需要new来调用,而是直接使用里面的属性和方法即可}

\color{rgba(254, 67, 101, .8)}{封装自己的数学对象}

利用对象封装自己的数学对象,里面有PI、计算最大值和最小值

    <script>
        //封装自己的数学对象
        var myMath = {
            PI: 3.141592653,
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min: function() {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        max = arguments[i];
                    }
                }
                return min;
            },
        }
        console.log(myMath.PI);
        console.log(myMath.max(1, 5, 9));
        console.log(myMath.min(1, 5, 9));
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{math对象中的一些方法}

方法 作用
Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入就近取整,注意-3.5结果是-3
Math.abs() 绝对值
Math.max()/Max.min() 求最大和最小值

\color{rgba(254, 67, 101, .8)}{Math中随机数方法random();}

返回一个随机\color{rgba(254, 67, 101, .8)}{小数},在[0-1)之间,范围:0 <= x < 1
这个方法没有参数
要返回整数随机数的话,这个方法自带了一个公式,代入公式就可以返回整数的随机数

    <script>
        //随机点名
        var arr = ['张三', '李四', '李思思', '张三丰', '王重阳', '周伯通'];

        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        console.log(arr[getRandom(0, arr.length - 1)]);
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{案例:猜数字}

程序随机生成一个1-10之间的数字,并让用户输入一个数字
1.如果大于该数字,就提示数字大了继续猜
2.如果小于该数字就提示数字小了,继续猜
3.如果等于该数字,就提示猜对了,结束程序

        //猜数字游戏
        //这是自己做的
        var msg = parseInt(prompt('猜一个数'))

        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        if (msg > getRandom(0, 10)) {
            alert(prompt('大了,继续猜'));
        } else if (msg < getRandom(0, 10)) {
            alert(prompt('小了,继续猜'));
        } else {
            alert('猜对了');
        }

        //这是视频里做的
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 10);
        while (true) { //死循环
            var num = prompt('猜一个1-10之间的数字');
            if (num > random) {
                alert('猜大了');
            } else if (num < random) {
                alert('猜小了');
            } else {
                alert('猜对了');
                break; //这是一个死循环,所以要加break
            }
        }

\color{rgba(254, 67, 101, .8)}{日期对象:Date();}

date();是一个构造函数,跟前面的math();函数不一样,math();是一个内置对象
要通过date();构造函数来实例化日期对象
1.如果没有参数,返回系统当前时间
2.参数的常用写法;数字型 2019,10,01或者是字符串型的'2019-10-1 05:08:08',字符串型用的最多

    <script>
        //日期对象
        //date();是一个构造函数
        var date1 = new Date();
        console.log(date1);
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{示例:}

    <script>
        var date1 = new Date(2019, 10, 1);
        console.log(date1); //返回11月,不是10月,字符串型的不会出问题


        var date2 = new Date('2019-10-1 08:08:08');
        console.log(date2);
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{日期格式化}

例如;

    <script>
        //格式化日期 年月日
        var date1 = new Date();
        console.log(date1.getFullYear()); //返回当前日期的年
        console.log(date1.getMonth() + 1); //返回当前月份(0-11,是从0开始的,所以要+1)
        console.log(date1.getDate()); //返回的是今天是几号、
        console.log(date1.getDay()); //返回今天是周几(周日是0)
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{按中国人的习惯写:}

    <script>
        var date1 = new Date();
        var year = date1.getFullYear();
        var month = date1.getMonth() + 1;
        var dates = date1.getDate();
        console.log('今天是' + year + '年' + month + '月' + dates + '日');
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{格式化时分秒}

        //格式化时分秒
        var date = new Date();
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        //要求封装一个函数,返回当前的时分秒
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            var m = time.getMinutes();
            var s = time.getSeconds();
            h = h < 10 ? '0' + h : h; //变量拿到的值如果是一位数,就在前面补0,显得好看一些
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());
image.png

\color{rgba(254, 67, 101, .8)}{获取日期的中的毫秒(时间戳)}

date对象是基于1970年1月1日(世界标准时间)起的毫秒数

    <script>
        //一共三种方法:valueOf(); getTime();
        var date = new Date();
        console.log(date.valueOf()); //z这是距离1970.1.1到现在为止总的毫秒数
        console.log(date.getTime());
        //简便的写法(最常用的写法):
        var date1 = +new Date(); //这个返回值就是总的毫秒数
        console.log(date1);
        //3.第三种方法是 H5 新增的方法:最简单,浏览器版本比较低的不支持,不考虑兼容性的话,这种写法最好
        console.log(Date.now());
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{案例:倒计时效果}

分析:输入的时间减去现在的时间就是剩余时间,即倒计时,但是不能拿时分秒相减,比如05 - 25,结果是负数
所以需要用时间戳来做(把剩余时间的毫秒数转换为天、时、分、秒)

d = parseInt(总秒数/60/60/24);//计算天数
h = parseInt(总秒数/60/60/%24);//计算小时数
m = parseInt(总秒数/60/%60);//计算分数
s = parseInt(总秒数/%60);//计算当前秒数

    <script>
        //案例:倒计时效果 countDown 倒计时
        function countDown(time) {
            var nowTime = +new Date(); //返回时间是当前时间的总得毫秒数
            var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; //times就是剩余时间总的秒数
            var d = parseInt(times / 60 / 60 / 24); //天
            var h = parseInt(times / 60 / 60 % 24); //时
            var m = parseInt(times / 60 % 60); //计算分数
            var s = parseInt(times % 60); //计算当前秒数   
            d = d < 10 ? '0' + d : d;
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s; 
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2020-9-9 20:00:00'));
        var date = new Date();
        console.log(date);
    </script>
image.png
上一篇下一篇

猜你喜欢

热点阅读