一.什么是内置对象?
- JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
- 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解
- 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，==并提供了一些常用的或是最基本而必要的功能（属性和方法）==
- 内置对象最大的优点就是帮助我们快速开发
- JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
二.查文档
2.1 MDN
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN: https://developer.mozilla.org/zh-CN/
2.2 如何学习对象中的方法
1.查阅该方法的功能
2.查看里面参数的意义和类型
3.查看返回值的意义和类型
4.通过 demo 进行测试
三.Math对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
注意：上面的方法必须带括号
<script>
/*
数学对象
1.Math.PI：圆周率
2.Math.abs():绝对值
3.Math.max()：最大值，参数是Number类型，否则是NaN
4.Math.min():最小值，参数是Number类型，否则是NaN
5.Math.round():四舍五入，取大
6.Math.random():[0,1)之间的随机数
7.Math.ceil();向上取整
8.Math.floor():向下取整
*/
console.log(Math.PI); //3.1415926
console.log(Math.abs(-0.5)); //0.5
console.log(Math.max(6, 10, -3)); //10
console.log(Math.min(6, 10, -3)); //-3
console.log(Math.round(-1.5)); //-1
console.log(Math.random());
console.log(Math.ceil(1.5)); //2
console.log(Math.floor(1.5)); //1
</script>
3.1 封装自己的数学对象
利用对象封装自己的数学对象 里面有 PI 最大值和最小值
//对象：
var MyMath = {
PI: 3.1415,
max: function (maxArr) {
var max = maxArr[0];
for (let i = 0; i < maxArr.length; i++) {
if (max <= maxArr[i]) {
max = maxArr[i];
}
}
return max
},
min: function (minArr) {
var min = minArr[0];
for (let i = 0; i < minArr.length; i++) {
if (min >= minArr[i]) {
min = minArr[i];
}
}
return min
}
}
console.log(MyMath.PI);//3.1415
console.log(MyMath.max([5, -6, 10, 30, 40]));//40
console.log(MyMath.min([5, -6, 10, 30, 40]));//-6
1.构造函数
/* function MyMath() {
this.PI = 3.1415926;
this.max = function (maxArr) {
var max = maxArr[0];
for (let i = 0; i < maxArr.length; i++) {
if (max <= maxArr[i]) {
max = maxArr[i];
}
}
return max
};
this.min = function (minArr) {
var min = minArr[0];
for (let i = 0; i < minArr.length; i++) {
if (min >= minArr[i]) {
min = minArr[i];
}
}
return min
}
}
var m1 = new MyMath()
console.log(m1.PI);
console.log(m1.max([1, -20, 30]));
console.log(m1.min([1, -20, 30]));
3.2 随机数方法 random()
random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到一个两数之间的随机整数，包括两个数在内
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
3.3 随机点名系统
GIF 2021-5-18 18-45-50.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名系统</title>
<style>
.item {
margin: 0 auto;
width: 300px;
text-align: center;
}
.item span {
height: 40px;
display: block;
line-height: 40px;
}
.item img {
display: block;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="item">
<h1>课堂随机点名系统</h1>
<span>姓名:<i></i></span>
<span>年龄:<i></i></span>
<img src="" alt="" width="300">
<button class="btn">
<a href="javascript:history.go(0)">随机点名</a>
<!-- <a href="javascript:location.reload()">随机点名</a> -->
<!-- <a href="javascript:location.assign(location)">随机点名</a> -->
</button>
</div>
</body>
<script>
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function callTheRoll(Arr) {
return Arr[getRandom(0, Arr.length - 1)];
}
var arr = [{
name: '张涛',
age: 18,
imgurl: '../../img/0.jpg'
},
{
name: '科比',
age: 41,
imgurl: '../../img/1.jpg'
},
{
name: '詹姆斯',
age: 35,
imgurl: '../../img/2.jpg'
}, {
name: '乔丹',
age: 45,
imgurl: '../../img/3.jpg'
}, {
name: '哈登',
age: 21,
imgurl: '../../img/4.jpg'
},
]
var obj = callTheRoll(arr);
console.log(obj);
var uName = obj['name'];
var uage = obj['age'];
var uImgUrl = obj['imgurl'];
var i1 = document.querySelectorAll(".item>span>i")[0];
var i2 = document.querySelectorAll(".item>span>i")[1];
var imgUrl = document.querySelector(".item>img");
i1.innerHTML = uName;
i2.innerHTML = uage;
imgUrl.src = uImgUrl;
</script>
</html>
3.4 猜数字小游戏
<script>
/*
随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。
需要一直猜到正确为止，所以一直循环。l
用while 循环合适更简单。
核心算法：使用 if else if 多分支语句来判断大于、小于、等于。
*/
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var guessNum = getRandom(1, 10);
console.log("生成的数字是" + guessNum + "<br>");
while (true) {
var insertNum = parseInt(prompt("请输入一个1~10 的整数"));
document.write('你猜的数字是' + insertNum)
if (!isNaN(insertNum)) {
if (insertNum > guessNum) {
alert("数字输入过大");
} else if (insertNum < guessNum) {
alert("数字输入过小");
} else {
alert("恭喜你！你猜对了！数字是" + insertNum);
break;
}
} else {
continue
}
}
</script>
四.日期对象
4.1 Date概述
- Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
- Date 实例用来处理日期和时间
4.2 Date()方法的使用
4.2.1 获取当前时间必须实例化
var now = new Date();
console.log(now);
4.2.2 Date()构造函数的参数
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')
==new Date()有四种形式：==
*1.new Date()里面什么也不传，返回此时此刻时间*
*2.new Date(dateString)表示日期的字符串值;*
*3.new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);分别提供日期与时间的每一个成员*
*3.1 ==这种情况下，月份是从0-11表示==*
*4.new Date(value);Unix时间戳，一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，*
*表示自1970年1月1日00:00:00 UTC（the Unix epoch）以来的毫秒数，忽略了闰秒*
<script>
/*
new Date()有四种形式：
1.new Date()里面什么也不传，返回此时此刻时间
2.new Date(dateString)表示日期的字符串值;
3.new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);分别提供日期与时间的每一个成员
3.1 这种情况下，月份是从0-11表示
4.new Date(value);Unix时间戳，一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，
表示自1970年1月1日00:00:00 UTC（the Unix epoch）以来的毫秒数，忽略了闰秒。
*/
//1.获取当前时间
var date = new Date();
console.log(date); //Tue May 18 2021 19:46:50 GMT+0800 (中国标准时间)
//2.new Date()里面传日期的字符串
var time1 = new Date('2020-1-1');
console.log(time1); //Wed Jan 01 2020 00:00:00 GMT+0800 (中国标准时间)
//3.new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
//分别提供日期与时间的每一个成员
var time3 = new Date(2020, 1, 1);
console.log(time3); //Sat Feb 01 2020 00:00:00 GMT+0800 (中国标准时间),1表示二月
//4.Unix时间戳
//当前时间转换为时间戳
var unix = new Date().getTime();
console.log(unix); //1621341187916
//时间戳转换为当前时间
console.log(new Date(unix)); //Tue May 18 2021 20:34:11 GMT+0800 (中国标准时间)
</script>
4.3 日期格式化
我们想要 2019-8-8 8:8:8 格式的日期，要怎么办？
需要获取日期指定的部分，所以我们要手动的得到这种格式。
image-20210519102545050
<script>
/*
请写出这个格式的日期：2019年8月8日 星期四
*/
var date = new Date('2019-8-8');
console.log(date); //Thu Aug 08 2019 00:00:00 GMT+0800 (中国标准时间)
var year = date.getFullYear();
var month = date.getMonth() + 1; //月份是0-11表示
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var xq = date.getDay(); //星期是0-6表示，0是星期天
var arr = ['天', '一', '二', '三', '四', '五', '六']
console.log("时间是" + year + "年" + month + "月" + day + '日' + hour + "点" + minutes + "分" + seconds + "秒" + "星期" + arr[xq]);
</script>
4.4 获取时间戳的方法
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数
我们经常利用总的毫秒数来计算时间，因为它更精确
/*
获得时间戳的方法
*/
//1.valueOf()方法
var now = new Date().valueOf();
console.log(now);
//2.getTime()方法
var timer = new Date().getTime();
console.log(timer);
//3.常用的方法：+
var timer02 = +new Date();
console.log(timer02);
//H5中新增的方法
var timer03 = Date.now();
console.log(timer03);
4.5 练习
4.5.1.显示当前的时分秒
//var now = new Date();
var getNow = function () {
var now = new Date();
var h = now.getHours();
h = h < 10 ? "0" + h : h
var m = now.getMinutes();
m = m < 10 ? "0" + m : m;
var s = now.getSeconds();
s = s < 10 ? "0" + s : s;
document.write("现在时间是" + h + ":" + m + ":" + s + "<br/>");
}
//getNow()
setInterval(function () {
getNow()
}, 1000)
4.5.2.京东倒计时
image-20210519134808408
GIF 2021-5-19 15-51-46.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
</head>
<style>
.countdown {
width: 190px;
height: 100%;
color: #fff;
background-color: #e83632;
background-image: url('./jd.png');
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
padding: 1px 0;
margin: 0px auto;
}
.countdown .countdown-title {
width: 100%;
text-align: center;
font-size: 30px;
font-weight: 700;
margin-top: 31px;
}
.countdown .countdown-desc {
margin-top: 90px;
font-size: 14px;
text-align: center;
}
.countdown .countdown-main {
margin-left: auto;
margin-right: auto;
width: 130px;
height: 30px;
margin-top: 10px;
display: block;
margin-bottom: 30px;
}
.countdown .countdown-main .timmer__unit {
position: relative;
float: left;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 20px;
}
/* .timmer__unit--hour::after {
content: ":";
width: 30px;
display: block;
}*/
.timmer__unit--second {
margin-right: 0px !important;
}
</style>
<body>
<div class="countdown">
<div class="countdown-title">京东秒杀</div>
<div class="countdown-desc"><strong></strong>点场 距结束</div>
<span class="timmer countdown-main">
<span class="timmer__unit timmer__unit--hour"></span>
<span class="timmer__unit timmer__unit--minute"></span>
<span class="timmer__unit timmer__unit--second"></span>
</span>
</div>
</body>
<script>
/*
倒计时：
1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
转换公式如下：
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数
*/
function countdown(time) {
var now = new Date().getTime();
var timer = new Date(time).getTime();
var countDowntime = timer - now;
var countHour = new Date(time).getHours();
//1.计算倒计时秒数
var seconds = countDowntime / 1000;
var d = parseInt(seconds / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt(seconds / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(seconds / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(seconds % 60);
s = s < 10 ? '0' + s : s;
//2.将天数，小时，分数，秒数展示在span里
var hour = document.querySelectorAll(".timmer__unit--hour")[0];
var minutes = document.querySelectorAll(".timmer__unit--minute")[0];
var seconds = document.querySelectorAll(".timmer__unit--second")[0];
hour.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s
//3.将倒计时几点展示在strong里
var countH = document.querySelector(".countdown-desc>strong");
countH.innerHTML = countHour;
}
//4.驱动定时函数
setInterval(function () {
countdown("2021-05-19 16:00:00");
}, 1000)
</script>
</html>
