一、对象object
1、数据类型
-
基础类型
number string boolean null undefined -
引用类型
数组 函数 对象
2、对象
对象是指一个具体的事物。万物皆对象。
一个具体的事物一般都会有行为和特征。
手机：
行为：打电话 聊微信 玩和平精英 刷新闻
特征：颜色 屏幕分辨率 摄像头像素
对象的行为------js对象的函数
对象的特征------js对象的属性
- JavaScript中的对象
JavaScript中的对象可以看做生活中具体事物的抽象。
js对象是属性+函数的集合。
属性：可以是基本数据类型，也可以是引用数据类型。
3、创建一个对象
（1）使用new关键字创建
var hero = new Object();
（2）使用字面量。大括号{}，大括号里面写：新增属性，新增方法，中间用逗号隔开。
<script>
var hero = {
"heroName":"亚索",
"age":30,
skillOne:function (){
console.log("斩钢闪");
},
skillThree:function(){
console.log("E去不复返");
},
};
</script>
3.1新增属性
hero.name = “韩信”;
hero.age = “30”;或者
hero[“age”] = “30”;
3.2使用属性
对象名.属性名
3.3新增方法
对象名.属性名=function(){
函数体
};
<script>
// 3.创建一个对象
// ( 1.)使用new关键字创建一个对象。
var hero = new Object();
// ( 2.)使用字面量创建一个对象：{}
var hero = {
"heroName":"亚索",
"age":30,
skillOne:function (){
console.log("斩钢闪");
},
skillThree:function(){
console.log("E去不复返");
}
};
// 3.1新增属性
hero.heroName = "韩信";
hero.age = "30";
hero["age"] = "30";
// 3.2使用属性
alert(hero.heroName);
alert(hero.age);
alert(hero["age"]);
// 3.3新增方法
hero.skillTow = function() {
console.log("对方对你使用了二技能");
alert("对方对你使用了二技能");
};
// 调用
hero.skillTow();
</script>
3.4遍历属性
for…in语法
key ：表示属性名
属性值：对象名[key],
（使用字面量创建对象时，大括号里的属性之间用逗号隔开）
格式：
<script>
for(var key in obj){
}
</script>
<script>
// 使用字面量创建一个对象
var hero = {
"heroName":"亚索",
"age":30,
skillOne:function (){
console.log("斩钢闪");
},
skillThree:function(){
console.log("E去不复返");
}
};
// 3.4遍历属性
for(var key in hero){
console.log(key+"===="+hero[key]);
}
</script>
遍历属性，控制台输出结果：（函数代码（方法）会直接打印出来）
3.5 删除属性
delete 对象名.属性名;
<script>
var hero = {
"heroName": "亚索",
"age": 30,
skillOne: function() {
console.log("斩钢闪");
},
skillThree: function() {
console.log("E去不复返");
}
};
delete hero.age;
alert(hero.age);
</script>
删除前：
删除后：
二、对象的分类
1.内建对象
由ES标准定义的对象，在任何ES实现中都可以使用 （ js提供的对象）。
Math String Number Boolean Function Object
2.宿主对象
主要由（浏览器提供的对象）。
两大类：BOM DOM
3.自定义对象
开发人员自己定义的对象。
三、基本类型与引用类型的区别
-
区别：
基础数据类型的数据存储在栈中，变量直接指向的是基础数据类型的值。
引用数据类型的数据存储在堆中，变量指向的是引用数据类型的地址（地址存储在栈中）。 -
比较：
基本数据类型比较时，比较值。
而引用数据类型比较时，比较内存地址，如果内存地址相同，指向了同一个对象，则相等，否则不相等。
四、Math对象
Math对象：
提供了很多关于运算的方法。
Math.random(); 返回0-1之间的随机数。（小数）
- 假如我们需要一个n-m之间的数。
Math.round(Math.random()*(m-n)+n)
Math.floor(Math.random() * (m - n + 1) + n);
例如：获取一个3-6之间的随机整数：
<script>
alert(Math.round(Math.random() * 3) + 3);
</script>
Math.round()；四舍五入
<script>
alert(Math.round(3.6));
</script>
弹出结果：4
Math.max()；返回最大值
<script>
alert(Math.max(1,5,20,15));
</script>
弹出结果：20
Math.min()； 返回最小值
<script>
alert(Math.min(1,5,20,15));
</script>
弹出结果：1
Math.abs() 返回绝对值
<script>
alert(Math.abs(-5));
</script>
弹出结果：5
Math.ceil()向上取整
<script>
alert(Math.ceil(9.000000000));
</script>
弹出结果：9
<script>
alert(Math.ceil(9.000000001));
</script>
弹出结果：10
Math.floor() 向下取整
<script>
alert(Math.floor(-9.9999999));
</script>
弹出结果：-10
Math.pow(x,y) x的y次方
<script>
alert(Math.pow(2, 3));
</script>
弹出结果：8
Math.sqrt(num) 开平方
<script>
alert(Math.sqrt(9));
</script>
弹出结果：3
Math.PI = 180° 弧度。
1弧度=Math.PI/180.
练习
练习：
封装一个函数：随机生成一个十六进制的颜色值，然后将结果返回。
#ff6700 #b0b0b0
0-f 放入一个数组
0-1 0-15下标
var str = “#”
<script>
//方法一
//数组arr写到函数里面，直接调用函数即可。
// 0-9 a-f
function getColor() {
var str = "#";
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
for (var i = 0; i < 6; i++) {
str += arr[Math.floor(Math.random() * 16)];
}
return str;
}
document.write(getColor());
</script>
<script>
//方法二
//数组arr写到函数外面，调用函数时，写入实参arr。
// 0-9 a-f
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
function color() {
var str = "#";
for (var i = 0; i <= 5; i++) {
str += arr[Math.round(Math.random() * 15)];
// str += arr[parseInt(Math.random() * 15)];
// str += arr[Math.floor(Math.random() * 16)];
}
return str;
}
document.write(color(arr));
</script>
输出结果：#b8d1ad（随机）
五、Date对象
5.1、创建日期对象
使用new关键字
var d = new Date();
// 如果什么参数都不传，默认为当前时间。
<script>
var d = new Date();
document.write(d);
</script>
输出结果：当前时间，实时更新。
Wed Jan 06 2021 14:38:02 GMT+0800 (中国标准时间)
星期 月 日 年 时分秒 时区
-
创建日期对象时，可以指定日期。时分秒若不填写，则默认为00:00:00
-
指定日期的几种方式:
1.new Date(“2021/01/07”)
2.new Date(2020,09,30,15,33,20);
3.new Date(1576800000000);
4.new Date(“2020-12-31 12:30:20”);
【注意】 在国外，月份是从0开始的，0-11
星期是从周日开始。周日 - 周一 ~ 周六
指定日期：方式1：
// 调用构造函数 构造函数的作用：生成对象。
<script>
var d = new Date();
//创建日期对象时，可以指定日期。时分秒若不填写，则默认为00:00:00,输出结果显示00:00:00。
var d = new Date("2021/01/07");
alert(d);
</script>
指定日期：方式2：
// 调用构造函数 构造函数的作用：生成对象。
<script>
var d = new Date();
// 年 月 日 时 分 秒
var d = new Date(2020, 09, 30, 15, 33, 20);
alert(d);
</script>
指定日期：方式3：
// 调用构造函数 构造函数的作用：生成对象。
<script>
var d = new Date();
// 毫秒数
var d = new Date(1576800000000);
alert(d);
</script>
指定日期：方式4：
// 调用构造函数 构造函数的作用：生成对象。
<script>
var d = new Date();
var d = new Date("2020-12-31 12:30:20");
alert(d);
</script>
5.2、日期对象方法
创建一个日期对象：
<script>
var d = new Date();
alert(d);
</script>
若什么参数都不传，可以实时生成当前时间。
-
日期对象方法：
格式：Date.parse(日期对象);例：Date.parse(d)；
功能：将日期对象转为毫秒数。 -
获取日期：
d.getTime() 获取当前的毫秒数。
d.getDate() 返回日
d.getDay() 返回周几
d.getMonth() 获取月份 从0开始 范围为：0-11
d.getFullYear() 返回年
d.getHours() 获取小时数
d.getMinutes() 获取分钟数
d.getSeconds() 获取秒数
d.getMilliseconds() 获取毫秒数
d.getTimezoneOffset() 获取本地时间与格林威治时间的分钟差。 -
设置日期：
d.setTime() 设置当前的毫秒数。
d.setDate() 设置日期的天数。
d.setDay() 设置周几
d.setMonth() 设置月份
d.setFullYear() 设置日期的年份
d.setHours() 设置小时数
d.setMinutes() 设置分钟数
d.setSeconds() 设置秒数
d.setMilliseconds() 设置毫秒数
练习
1、更改当前时间为三月份。（月份数字为2）
2、把当前时间转换为毫秒数，也可以把毫秒数转化为时间。
3、将当前时间以（yyyy-MM-DD hh:mm:ss）这个格式输出到页面上。
1、更改当前时间为三月份。（月份数字为2）
<script>
var d = new Date();
d.setMonth(2);
alert(d);
</script>
2、把当前时间转换为毫秒数，也可以把毫秒数转化为时间。
<script>
var d = new Date();
//把当前时间转换为毫秒数
var result = Date.parse(d);
alert(result);
//把毫秒数转化为时间
var d2 = new Date(1609916867000);
alert(d2);
</script>
3、将当前时间以（yyyy-MM-DD hh:mm:ss）这个格式输出到页面上。
2021-01-06 19:42:8
<script>
//创建一个日期对象，不传任何参数，生成当前时间
var d = new Date();
//获取
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
//运用到三元运算符判断、字符串拼接
var str = year + "-" + (month < 10 ? ("0" + month) : month) + "-" +
(date < 10 ? ("0" + date) : date) + " " + hours + ":" + minutes + ":" + seconds;
document.write(str);
</script>
输出结果：2021-01-06 19:42:8
5.3、日期格式化
（1）、 d.toDateString() ，以特定格式显示： 星期几 月 日 年
<script>
var d = new Date();
// 以特定格式显示： 星期几 月 日 年
alert(d.toDateString());
</script>
（2）、d.toTimeString()， 以特定格式显示： 时:分:秒 时区
<script>
var d = new Date();
//以特定格式显示： 时:分:秒 时区
alert(d.toTimeString());
</script>
（3）、d.toLocaleDateString()，以特定格式显示： 年/月/日
<script>
var d = new Date();
//以特定格式显示： 年/月/日
alert(d.toLocaleDateString());
</script>
（4）、d.toLocaleTimeString()，以特定格式显示： 上午/下午 时:分:秒
<script>
var d = new Date();
//以特定格式显示： 上午/下午 时:分:秒
alert(d.toLocaleTimeString());
</script>
（5）、d.toUTCString()，显示格林威治时间
<script>
var d = new Date();
//以特定格式显示： 显示格林威治时间
alert(d.toUTCString());
</script>
练习
1、显示当前时间格式为：2021年01月06日 星期三 16:48:50
2、输入n,输出n天后的时间。
3、输入n,输出n天后的时间。显示时间格式为：2021年01月06日 星期三 16:48:50
4、获取两个日期之间的天数.
5、随机生成一个5-16的随机数
1、显示当前时间格式为：2021年01月06日 星期三 16:48:50
<script>
// 定义函数
function showTime() {
var d = new Date();
// 获取年
var year = d.getFullYear();
// 获取月
var month = d.getMonth() + 1;
// 获取日
var date = d.getDate();
// 小时数
var hours = d.getHours();
// 获取分钟数
var m = d.getMinutes();
// 获取秒数
var seconds = d.getSeconds();
// 获取星期几
var day = d.getDay();
var str = year + "年" + doubleNum(month) + "月" + doubleNum(date) +
"日 星期" + numToChinese(day) + " " + hours + ":" + m + ":" + seconds;
return str;
}
// 调用函数
document.write(showTime());
// 给小于10的前面补0
function doubleNum(n) {
if (n < 10) {
return "0" + n;
} else {
return n;
}
}
//星期几： 数字转中文
function numToChinese(num) {
var arr = ["日", "一", "二", "三", "四", "五", "六"];
return arr[num];
}
</script>
2.输入n,输出n天后的时间。
<script>
function afterDay(n) {
// 获取当前时间。
var d = new Date();
d.setDate(d.getDate() + n);
return d;
}
document.write(afterDay(26)); //会自动更新到下月
</script>
3.输入n,输出n天后的时间。显示时间格式为：2021年01月06日 星期三 16:48:50
<script>
// 定义函数
function showTime(d) {
// var d = new Date(); //要注释掉
// 获取年
var year = d.getFullYear();
// 获取月
var month = d.getMonth() + 1;
// 获取日
var date = d.getDate();
// 小时数
var hours = d.getHours();
// 获取分钟数
var m = d.getMinutes();
// 获取秒数
var seconds = d.getSeconds();
// 获取星期几
var day = d.getDay();
var str = year + "年" + doubleNum(month) + "月" + doubleNum(date) + "日 星期" + numToChinese(day) + " " + hours + ":" + m + ":" + seconds;
return str;
}
// 调用函数
// document.write(showTime());
// 给小于10的前面补0
function doubleNum(n) {
if (n < 10) {
return "0" + n;
} else {
return n;
}
}
//星期几： 数字转中文
function numToChinese(num) {
var arr = ["日", "一", "二", "三", "四", "五", "六"];
return arr[num];
}
// 1.输入n,输出n天后的时间。
function afterDay(n) {
// 获取当前时间。
var d = new Date();
d.setDate(d.getDate() + n);
return d;
}
// document.write(afterDay(26));
document.write(showTime(afterDay(26))); //时间会自动更新到下月。
</script>
4.获取两个日期之间的天数.
<script>
var d1 = new Date();
var d2 = new Date("2021/01/13 18:00:00");
function countDays(d1, d2) {
// 将日期转毫秒
var time1 = Date.parse(d1);
var time2 = Date.parse(d2);
// 毫秒差，取绝对值
var time = Math.abs(time2 - time1);
// 毫秒差转为天数；
return parseInt(time / 1000 / 60 / 60 / 24);
}
// document.write(showTime(afterDay(26)));
document.write(countDays(d1, d2));
</script>
输出结果：6。
即相差6天。
5、随机生成一个5-16的随机数
<script>
var num = Math.round((Math.random() * 11 + 5));
document.write(num);
</script>
创建日历：
<title>日历</title>
<style>
*{
margin: 0;
padding: 0;
}
#calendar{
background-color: #000;
color: #fff;
}
#title {
font-size: 1.4em;
padding: 4px 0.55em;
}
#days th {
font-weight: bold;
text-align: center;
padding: 4px 0.55em;
}
#calendar td {
text-align: center;
padding: 4px 0.55em;
}
#today{
color: #f00;
font-weight: bold;
}
.poin{
cursor:pointer;
cursor:hand;
}
</style>
<script>
// 日历对象
var calendar = {
// 年份
year:null,
// 月份
month:null,
// 日 的数组
dayTable:null,
// 初始化一个日历
init : function (form){
// 获取日的数组
calendar.dayTable = form.getElementsByTagName("td");
// 初始化时，将当前日期传入方法。
this.createCalendar(form,new Date());
// 获取左箭头
var preMon = form.getElementsByTagName("th")[0];
// 获取右箭头
var nextMon = form.getElementsByTagName("th")[2];
// onclick表示添加点击事件
preMon.onclick = function() {
// 当点击上一月时，月份减一，然后调用创建日历方法
var preDate = new Date(calendar.year,calendar.month-1,1);
calendar.createCalendar(form,preDate);
}
nextMon.onclick = function() {
// 当点击上一月时，月份加一，然后调用创建日历方法
var preDate = new Date(calendar.year,calendar.month+1,1);
calendar.createCalendar(form,preDate);
}
},
// 清除日历
clearCalendar:function(form){
// 获取form中所有的td、
var tds = form.getElementsByTagName("td");
for (var i = 0; i < tds.length ; i++) {
tds[i].innerHTML = " ";
// 把id也清除掉
tds[i].id="";
}
},
// 生成日历
// from table表格 date：日期
createCalendar:function(form,date) {
// 获取年份 this表示当前对象
calendar.year = date.getFullYear();
// 获取月份
calendar.month = date.getMonth();
// 年份和月份插入到table中
form.getElementsByTagName('th')[1].innerHTML = calendar.year+"年"+(calendar.month+1)+"月";
//清除table
calendar.clearCalendar(form);
// 获取本月的天数
var dateNum = calendar.getDateLen(calendar.year,calendar.month);
// 获取第一天为星期几
var fristDay = calendar.getFristDay(calendar.year,calendar.month);
// 循环将每一天的天数写入到日历中
// 让i表示日期。
console.log(calendar.year);
console.log(calendar.month);
for (var i = 1; i <= dateNum; i++) {
// 将日期写入到对应的表格中，dayTable是table中所有td的集合。
calendar.dayTable[fristDay+i-1].innerHTML = i;
var nowDate = new Date();
if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
// 将当期元素的id设置为today
calendar.dayTable[i+fristDay-1].id = "today";
}
}
},
// 获取月份的天数
getDateLen:function(year,month){
// 获取下一个月的第一天
var nextMonth = new Date(year,month+1,1);
// 默认从0时0分0秒开始，将小时数减一得到本月最后一天。
nextMonth.setHours(nextMonth.getHours()-1);
// 本月最后一天的日期即为本月的天数。
return nextMonth.getDate();
},
// 获取本月第一天为星期几。
getFristDay:function(year,month){
// 获取本月的第一天。
var fristDay = new Date(year,month,1);
// 将星期数返回
return fristDay.getDay();
}
}
// // 当页面加载完成后，再执行里面的代码。
// window.onload = function() {
// var form = document.getElementById('calendar');
// // 通过日历对象去调用自身的init方法
// calendar.init(form);
// }
</script>
</head>
<body>
<table id="calendar" >
<tr>
<!-- 向左箭头 -->
<th class="poin"><<</th>
<!-- 年月 -->
<th id="title" colspan="5"></th>
<!-- 向右箭头 -->
<th class="poin">>></th>
</tr>
<tr id="days">
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script>
//若想要把该部分写在上面，需要使用window.onload
var form = document.getElementById('calendar');
// 通过日历对象去调用自身的init方法
calendar.init(form);
</script>
</body>
1024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
