目录
一.前言
二.认识对象
在js中声明对象的方法
1.直接使用{}声明对象
2.使用构造函数创建对象
获取属性的值
执行对象方法
解释
三.对象的应用
代码
效果图
编辑
四.日期对象
1.Date 日期对象
2. getFullYear() 获取当前年份
3.getMonth() 获取当前日期对象中的月份
4.getDate()获取当前日期对象中的月份的第几天
5.getDay() 表示一周中的第几天
6.getHours()获取当前对象的小时数
7.getMinutes() 获取当前对象的分钟数
8.getSeconds()获取当前的秒数
9.getMilliseconds()获取当前对象的毫秒数
10. 获取1970年1月1日8时到当前时间的毫秒数，称为时间戳
完整代码
五.日期对象的使用
1.通过日期对象渲染出当前的动态时间
效果图
实现代码（完整）
2.渲染距离到某某天的倒计时
实现效果图
实现代码（完整）
一.前言
当我们编写JavaScript代码时，对象是非常重要的概念和数据类型之一。对象可以被认为是一种复合的数据结构，可以存储和组织键值对。它们具有属性和方法，允许我们存储和操作相关数据。在JavaScript中，对象可以通过对象字面量表示法或通过构造函数创建。我们可以使用对象字面量表示法直接创建简单对象，或者使用构造函数创建更复杂的对象。对象的属性和方法可以通过点符号或方括号访问和修改。
对象广泛应用于不同的编程场景和需求。它们可以用于存储和组织数据、封装功能和行为、模拟实体等。通过对象的属性和方法，我们可以对数据进行处理、执行操作以及传递信息。理解对象的概念和应用对于编写高效和灵活的JavaScript代码至关重要。不仅如此，在许多流行的JavaScript框架和库中，对象也扮演着重要的角色，例如React、Angular和Vue.js。
在接下来的讨论中，我们将深入研究JavaScript对象的各个方面，包括对象的创建、属性和方法的访问和修改、对象的遍历和复制等。我们还将探索如何使用对象来解决实际的编程问题。通过深入学习对象的认识与应用，我们将能够更好地利用JavaScript的强大功能，编写可维护、可扩展和高效的代码。
二.认识对象
在js中万物皆对象！！！！
在js中声明对象的方法
1.直接使用{}声明对象
obj= {
key：value key 表示属性名，value表示属性值，如果属性值
是一个函数，则该属性成为对象方法
}2.使用构造函数创建对象
let obj = new Object();获取属性的值
获取属性的值，obj.key
也可以通过 obj[key]的形式获取和设置属性值，并且该形式支持属性名为变量
console.log(obj2.name);执行对象方法
解释
执行对象的方法 obj.key();key此时是方法名， 该形式{key:value}也可以成为字面量形式，如果写成{"key":"value"}成为json格式
obj.key = function(){}给对象设置方法key
obj.key();调用对象的方法
//声明一个对象
let obj1={
name:'女娲',
age:5000,
act:function(){
console.log('女娲补天'); //输出act：f f表示函数 方法
}
}
console.log(obj1);
let obj2 = {
name:'精卫',
age:5,
act:function(){
console.log('精卫填海');
}
}
console.log(obj2);
//获取属性的值
console.log(obj2.name);
//执行对象的方法
obj2.act(); //使用构造函数声明对象
let obj3 = new Object();
//给对象设置属性和方法
obj3.name = '刑天';
obj3.age = 230;
obj3.act = function(){
console.log('刑天舞干戚');
};
console.log(obj3);
obj3.act()
obj1.sex = '女'
console.log(obj1);
let aa = 'name'// .操作符等级较高，obj1.aa
//输出undefied
console.log(obj1.aa,obj1[aa],obj1['age']);三.对象的应用
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象的应用</title>
<style>
*{
margin: 0;
padding: 0;
}
.li-1{
display: flex;
width: 600px;
height: 200px;
margin: 20px auto;
background-color: #eee;
}
.li-1 .div-img{
flex: 1;
}
.li-1 .div-wz{
flex: 3;
}
h2{
margin-bottom: 30px;
}
</style>
</head>
<body>
<button id="btn">点击添加数据</button>
<ul id="txt">
</ul>
</body>
</html>
<script>
let arr= [
{
name:'女娲',
msg:'女娲补天，女娲补天，女娲补天，女娲补天',
url:'./images/5e88cd8020b8781bc601ae8e761f1aa.jpg'
},
{
name:'嫦娥',
msg:'吃月饼，吃月饼，吃月饼',
url:'./images/199.png'
},
{
name:'杨玉环',
msg:'杨玉环吃荔枝，杨玉环吃荔枝，杨玉环吃荔枝，杨玉环吃荔枝，杨玉环吃荔枝，杨玉环吃荔枝',
url:'./images/5325f59994ba2055636149e107f3a53.jpg'
},
{
name:'貂蝉',
msg:'貂蝉快开大',
url:'./images/de2f0d368577bd080c1ab37f75e0282.jpg'
}
]
let txt = document.getElementById('txt')
let btn = document.getElementById('btn')
btn.onclick = function(){
let str = ''
for (let i = 0; i < arr.length; i++) {
str += `
<li class="li-1">
<div class="div-img">
<img src="${arr[i].url}" width="150px" height="200px" alt="">
</div>
<div class="div-wz">
<h2>${arr[i].name}</h2>
<p>${arr[i].msg}</p>
</div>
</li>
`
}
txt.innerHTML+=str
}
</script>效果图
四.日期对象
js中具有一个专门用来操作日期的对象类型
使用 Date（）构造函数
如果函数中没有任何参数，则此时得到的结果是当前电脑的系统时间
1.Date 日期对象
let t1 = new Date() //日期对象
console.log(t1);
console.log(typeof t1) //object2. getFullYear() 获取当前年份
//getFullYear() 获取当前年份
console.log(t1.getFullYear());
let yy = t1.getFullYear();3.getMonth() 获取当前日期对象中的月份
//getMonth() 获取当前日期对象中的月份，月份从0开始
//0 表示 一月
console.log(t1.getMonth());
let mon = t1.getMonth()4.getDate()获取当前日期对象中的月份的第几天
//getDate()获取当前日期对象中的月份的第几天
console.log(t1.getDate());
let dd = t1.getDate();
/*5.getDay() 表示一周中的第几天
getDay() 表示一周中的第几天，也就是星期几 0 表示周日
返回值是 0-6
*/
console.log(t1.getDay());6.getHours()获取当前对象的小时数
getHours()获取当前对象的小时数，范围是 0-23
*/
console.log(t1.getHours());
let hh = t1.getHours()7.getMinutes() 获取当前对象的分钟数
//getMinutes() 获取当前对象的分钟数，范围是0-59
console.log(t1.getMinutes());
let m = t1.getMinutes()8.getSeconds()获取当前的秒数
//getSeconds()获取当前的秒数，范围是0-59
console.log(t1.getSeconds());
let s = t1.getSeconds()9.getMilliseconds()获取当前对象的毫秒数
getMilliseconds()获取当前对象的毫秒数，范围是0-999 1s=1000ms
console.log(t1.getMilliseconds());10. 获取1970年1月1日8时到当前时间的毫秒数，称为时间戳
获取1970年1月1日8时到当前时间的毫秒数，成为时间戳
*/
console.log(t1.getTime());
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日期对象</title>
</head>
<body>
<p id="times"></p>
</body>
</html>
<script>
/*
js中具有一个专门用来操作日期的对象类型
使用 Date（）构造函数
如果函数中没有任何参数，则此时得到的结果是当前电脑的系统时间
*/
let t1 = new Date() //日期对象
console.log(t1);
console.log(typeof t1) //object
//getFullYear() 获取当前年份
console.log(t1.getFullYear());
let yy = t1.getFullYear();
//getMonth() 获取当前日期对象中的月份，月份从0开始
//0 表示 一月
console.log(t1.getMonth());
let mon = t1.getMonth()
//getDate()获取当前日期对象中的月份的第几天
console.log(t1.getDate());
let dd = t1.getDate();
/*
getDay() 表示一周中的第几天，也就是星期几 0 表示周日
返回值是 0-6
*/
console.log(t1.getDay());
/*
getHours()获取当前对象的小时数，范围是 0-23
*/
console.log(t1.getHours());
let hh = t1.getHours()
//getMinutes() 获取当前对象的分钟数，范围是0-59
console.log(t1.getMinutes());
let m = t1.getMinutes()
//getSeconds()获取当前的秒数，范围是0-59
console.log(t1.getSeconds());
let s = t1.getSeconds()
//getMilliseconds()获取当前对象的毫秒数，范围是0-999 1s=1000ms
console.log(t1.getMilliseconds());
times.innerHTML = `${yy}-${mon+1}-${dd}-${hh}:${m}:${s}`;
/*
获取1970年1月1日8时到当前时间的毫秒数，成为时间戳
*/
console.log(t1.getTime());
</script>五.日期对象的使用
1.通过日期对象渲染出当前的动态时间
效果图
实现代码（完整）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日期对象的使用</title>
</head>
<body>
<p id="aa"></p>
</body>
</html>
<script>
//封装设置当前日期的函数
function seTime(){
let myDate = new Date();
let yy = myDate.getFullYear(); //年
let mm = myDate.getMonth()+1; //月 记得+1
let dd = myDate.getDate(); //日
let hh = myDate.getHours(); //时
let m = myDate.getMinutes(); //分
let s = myDate.getSeconds(); //秒
let week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
let day = myDate.getDay(); //一周的第几天
aa.innerHTML = `${yy}-${mm<10?'0'+mm:mm}-${dd<10?'0'+dd:dd}
${hh<10?'0'+hh:hh}:${m<10?'0'+m:m}:${s<10?'0'+s:s} 今天是${week[day]}`
}
seTime()
//设置计时器
setInterval(seTime,1000);
</script>2.渲染距离到某某天的倒计时
实现效果图
实现代码（完整）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
</head>
<body>
<p id="msg"></p>
</body>
</html>
<script>
/*
获取固定日期的时间对象，必须在 Date（）中传入参数
传入参数的几种方法
1. Date(2023(年),7(月),28（日）,0（时）,0（分）,0（秒）); 这种方式注意：
月份需要—1
2. Date('月 日 年 时:分:秒')
3.Date('月 日 ,年 时:分:秒')
*/
let t1 = new Date(2023,7,28,0,0,0);
console.log(t1);
let t2 = new Date('8 28 2023 0:0:0');
console.log(t2);
let t3 = new Date('8 28 ,2023 0:0:0')
console.log(t3);
function showDate(){
//获取当前日期对象
let now = new Date();
console.log(now);
//两个日期对象相减，就得到了两个日期对象相差的时间戳（毫秒数）
let time = t3-now;
console.log(time);
let day = Math.floor(time/1000/60/60/24) ;
console.log(day);
let hour = Math.floor(time%86400000/1000/60/60) ;
console.log(hour);
let nim = Math.floor(time%86400000/1000/60%60) ;
console.log(nim);
let sec = Math.floor(time%86400000/1000%60) ;
console.log(sec);
msg.innerHTML = `距离放假还有${day}天${hour}小时${nim}分钟${sec}秒`;
}
showDate();
setInterval(showDate,1000)
</script>
