day 07 对象及其定时器与日期
Date日期
日期对象的定义（使用new关键词）
1.获取当前的时间（本地的时间）！！！
var date = new Date() // 不传参就是获取当前时间
2.获取指定的时间
var date = new Date(123456) // 一个参数毫秒值 将这个毫秒值去加上对应的1970.1.1 0:0:0 var date = new Date('2000/1/1 00:00:00') // 指定一个字符串 来指定对应的时间 规定格式 var date = new Date(2000,10,5,12,15,15) // 年 月 日 时 分 秒
get 获取时间（重点记忆，把该记得的关键词都记得）这个是获取时间，简单的来说就是得到时间
var date = new Date()
console.log(date.getFullYear() ); // 年 console.log(date.getMonth()) // 月 0-11 console.log(date.getDate()) // 一个月的第几天 console.log(date.getDay()); // 一个星期中的第几天 星期天是第一天 0 console.log(date.getHours()) // 获取时间 24为0 0-23 console.log(date.getMinutes()) // 获取分钟 60为0 0-59 console.log(date.getSeconds()) // 获取秒钟 0-59 console.log(date.getTime()) // 获取离1970/1/1的毫秒值
（重点记忆，把该记得的关键词都记得）这个是设置时间，是自己设置的世界
// set 设置 date.setFullYear(1999,10,10) // 可以同时设置月和天 date.setMonth(9,20) // 可以同时设置天 date.setDate(30) // 设置天 date.setHours(10,15,20,120) // 可以同时设置分 秒 毫秒 date.setMinutes(10) // 可以同时设置秒 毫秒 date.setSeconds(20) // 可以同时设置 毫秒 date.setMilliseconds(150) // 毫秒值设置
// 其他方法 var date = new Date() // 转为字符串 console.log(date.toString()); // 普通字符串转换 console.log(date.toDateString()); // 以对应的日期格式进行转换 console.log(date.toLocaleDateString()); // 以本地的日期格式转换 console.log(date.toLocaleString() ); // 以本地的编码转为string console.log(date.toTimeString()); // 以对应时间时间格式转换 console.log(date.toUTCString()); // 以utc格式进行转换 // parse 格式化 转为NaN 日期就是一个Number值 console.log(Date.parse("2012/12/12")); // 以特定的格式进行转换 得到的是一个毫秒值
var obj = new Object() var obj1 = new Object() var obj2 = {} var obj3 = {}
console.log(obj ==obj1) // false console.log(obj==obj2) // false console.log(obj2==obj3) // false console.log(obj2=={}) // false
1.字面量的形式
var obj = {} // {}表示的是对象
2.new 关键词来构建对象
var obj = new Object()
对象的结构是以key:value的形式体现（键值对的形式 key是唯一的（字符串类型） value可以是任意类型）
var obj = {name:'jack',age:18,isGirl: true ,likeFoods:['西瓜','冬瓜','南瓜','哈密瓜'],likeUser:{name:'张三',age:15}}
查（从对象里面获取数据）通过key（属性名）来访问对应的值（属性值）
var obj = {name:'jack',age:18,isGirl: true ,likeFoods:['西瓜','冬瓜','南瓜','哈密瓜'],likeUser:{name:'张三',age:15 }}
console.log(obj.name) // 第一种访问 jack console.log(obj['name']) // 第二种访问 jack console.log(obj.likeFoods[3]) // 哈密瓜 对象里面嵌套数组 console.log(obj.likeUser.age) // 15 对象里面嵌套对象
添加和修改（赋值操作）
// 添加和修改 其实就是设置对应的值 // 如果当前这个key在对应的对象里面可以找到他就修改 如果找不到就是添加 var obj2 = {name:'hello' }
obj2.name = 'world' // 能找到 就会覆盖 obj2.age = 10 // 找不到就会添加 console.log(obj2);
删除操作 使用delete关键词
// 删除操作 删除里面的属性 delete delete obj2.name // 删除obj2的name属性 console.log(obj2);
函数里面的this （ 哪个对象调用这个函数this就是哪个 ）（this存在于函数内）
全局的this 指向window的 对象里面函数的this 指向当前对象
function sayHello(){
console.log( this );
} // 函数的this 指向他的调用者 谁调用这个函数 this就是指向谁 // 全局调用的 js的顶层对象 全局对象 window 也就是全局写的变量 以及全局调用的方法都是window的 sayHello() // window调用的 this指向window sayHello() == window.sayHello() var a = 10 // 全局变量a 相当于window的一个属性及属性值 a:10 console.log(window['a']); // 10 // 也就意味在全局声明的内容都是window的内容 // 也就是全局调用的内容里面的this属于window console.log( this ) // window window.onload = function(){} var obj = {
name: "jack" ,
sayHi: function (){
console.log( this );
console.log( this ===obj); // true console.log( this .name); // 访问这个name属性 }
} // 调用这个函数 obj.sayHi() // obj调用的 this指向obj // 处于对应的对象里面的this指向当前的对象
window的俩个方法
延时器****
setTimeout （延时器 延迟执行里面的代码 只执行一次）
// window.setTimeout(函数,延迟的时间(毫秒值),传递的参数) //window是可以省略的 // 延时器 延迟执行 异步的（多线程操作 开一个线程）（同步单线程操作 顺序执行） // js引擎的解析为单线程 同步的内容相当于加了把锁（同步锁）顺序执行（一定上一次执行完才能执行下一个） // 异步的就是没有锁（不是顺序执行） console.log('hello world' )
setTimeout( function (){
console.log( 'hello' )
}, 5000) // 异步的 支付的消息通知 关闭广告 销毁等 console.log('hello 张三' ) // 代码执行顺序 先同步 再异步 setTimeout( function (arg,message){ // 对应的setTimeout可以传参数 传递的参数给里面执行的函数 console.log(arg,message);
}, 1000,'我是参数','你吃饭了吗') // 参数可以任意的传 对应的函数内需要用形参去接收
clearTimeout（延时器id） （清除延时器 销毁对应的延时器）
var id = setTimeout( function (){ // 这个id是number类型 console.log('hello' )
}, 1000 )
clearTimeout(id)
setInterval （定时器 定时去执行里面的代码 执行多次）
clearInterval （清除定时器 传对应的id）(计时器等等·······)
// window.setInterval(执行的函数,执行一次的时间,参数) 他也是异步操作 // 不要在定时器声明变量 var i = 0 // 先等待再执行 var id = setInterval( function (){
console.log( '定时器执行' )
i ++ if (i==10 ){
clearInterval(id)
}
}, 1000 ) // 清除定时器 // clearInterval(id) setInterval( function (arg){
console.log(arg);
}, 100,'hello' ) // 倒计时 轮播图的动画 动画（js） // 先走同步 再走异步
练习1.定时器
<body>
<span id="showTime">00时:00分:00秒</span> <button id="action">点击开始计时</button>
</body>
var showTime =document.getElementById('showTime' ) var action = document.getElementById('action' ) function dianji(){ var i = 0 setInterval ( function (){
i ++ showTime.innerHTML =`${fn(parseInt(i/3600%24))}时:${fn(parseInt(i/60%60))}分:${fn(parseInt(i%60 ))}秒`
}, 1000 )
} function fn(number){ if (number<10 ){ return '0' + number
} else { return number
}
}
action.onclick = dianji
2.
function day(){ var time = new Date() return `${time.getFullYear()}年${time.getMonth()}月${time.getDate()}日${time.getHours()}时${time.getMinutes()}分${time.getSeconds()}秒`
}
console.log(day()); // 2, 判断两个日期相差的天数(可先求毫秒数差,再转换成天) var date = new Date() var date1 = new Date('2018/12/12 12:12:12' ) function getDay(date,date1){ var ms = Math.abs(date- date1) var day = parseInt(ms/1000/60/60/24 ) return day
}
console.log(getDay(date,date1));
3.
// 1, 创建一个人的对象, 添加属性: 姓名 年龄 爱好 薪资期望, 并有一个打印自身信息的方法, 可以输出自身信息; var obj = {
name: 'jx' ,
age: 18 ,
like: 'playfoot' ,
moeny: '50k' ,
mony: function () {
console.log(`姓名${ this .name} 年龄${ this .age} 爱好${ this .like} 薪资期望${ this .moeny}`);
}
}
obj.mony() // 2, 创建一个锤子对象hammer, 有属性:宽,高,重; 方法:可以锤钉子 var hammer = {
weight: 180 ,
height: 200 ,
zhong: 152 ,
action : function (){
console.log(可以锤钉子);
}
}
console.log(hammer); // 3, 有一辆50km/h车,跑在一条1000km路上，问多少小时跑完？ // 对象: // 车Car 属性: 速度speed 50km/h // 功能: 跑在路上runOnRoad(Road) // 路Road 属性: 长度length 1000km var Car = {
speed : '50km/h' ,
action: function (Road){
console.log( '全程要'+parseInt(Road.length)/parseInt(this.speed)+'h'); },
} var Road = {
length : '1000km' }
Car.action(Road)
4.
<!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>Document</title>
<style> .box1 {
width: 100px;
height: 20px;
margin: 0 auto;
margin - top: 100px;
border: 1px dotted #ccc;
} </style>
</head>
<body>
<div class="box1">
<div id="progressBar" style="background-color: red;width:10px;height: 20px;"></div>
<span id="baifenbi"></span>
</div>
</body>
</html>
// 3, 使用定时器实现进度条, // 提示: 获取标签对象, 并改变style属性的width值 // var proBar = document.getElementById("progressBar"); // proBar.style.width = barW + "px"; var proBar = document.getElementById("progressBar" ); var baifenbi =document.getElementById('baifenbi' ) var i = 0 function fn() { var ms =setInterval( function () {
i ++ proBar.style.width = i + "px" ;
baifenbi.innerHTML = i + '%' if (i >= 100 ) {
clearInterval(ms)
}
}, 100 )
}
proBar.onclick = fn
5.
// 1, 计算2019年11月11日 11时 11分 11秒 距离当前日期的时间差, 并以指定的格式 // (天/时/分/秒)的形式显示. function fn1(){ var date = new Date() var date1 = new Date('2019/11/11/ 11:11:11' )
console.log(date1); var time = date - date1 // var d = parseInt(time/1000/60/60/24) // var h = parseInt(time/1000/60/60%24) // var m = parseInt(time/1000/60%60) // var s = parseInt(time/1000%60) return `${parseInt(time/1000/60/60/24)}日${parseInt(time/1000/60/60%24)}时${parseInt(time/1000/60%60)}分${parseInt(time/1000%60 )}秒`
}
console.log(fn1()); // 2, 实现秒表功能, 包含时,分,秒,毫秒，点击按钮1开始计时，点击按钮2结束计时 var showTime = document.getElementById('showTime' ) var kai =document.getElementById('kai' ) var jiesu = document.getElementById('jiesu' ) var ms = 0 function fn2(){ var i = 0 ms =setInterval ( function (){
i ++ showTime.innerHTML =`${fn(parseInt(i/3600000%24))}时:${fn(parseInt(i/60000%60))}分:${fn(parseInt(i/1000%60))}秒:${fn(parseInt((i%1000)))}毫秒` },1 )
} function fn(number){ if (number<10 ){ return '0' + number
} else { return number
}
} function fn3(){
clearInterval(ms)
}
kai.onclick = fn2
jiesu.onclick = fn3
6.
<!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>Document</title>
</head>
<body>
<b id="jishi">到计时：00天00时00分00秒</b><input type="submit" id="kai" value="计算">
</body>
</html>
<script>
// 4, 倒计时， 给定一个未来的日期，计算和当前时间的差值，并倒计时，
// 当倒计时为0时， 弹出提示框“活动结束”
var jishi =document.getElementById('jishi' ) var kai = document.getElementById('kai' ) function fn(){ var date = new Date() var date1 = new Date('2022/8/2 21:49:00' ) var time = date1 - date var i = 1
var ms= 0 console.log(time);
jishi.innerHTML =`${parseInt(time/1000/60/60/24)}天${parseInt(time/1000/60/60%24)}时${parseInt(time/1000/60%60)}分${parseInt(time/1000%60 )}秒`
ms =setInterval( function (){
i ++ jishi.innerHTML =`${parseInt((time-1000*i)/1000/60/60/24)}天${parseInt((time-1000*i)/1000/60/60%24)}时${parseInt((time-1000*i)/1000/60%60)}分${parseInt((time-1000*i)/1000%60 )}秒` if ((time-1000*i)<=0 ){
clearInterval(ms)
alert( '结束' )
}
}, 1000 )
}
kai.onclick = fn </script> 7.
<!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>Document</title>
<style> #box{
background - color: yellow;
width: 300px;
height: 150px;
} </style>
</head>
<body>
<div id="box"> 当前还剩 <span id="s">5</span>秒关闭
</div>
</body>
</html>
<script>
var i = 5
var timer =setInterval( function (){
i -- document.getElementById( 's').innerHTML = i if (i==0 ){
clearInterval(timer)
}
}, 1000 )
setTimeout ( function (){
document.getElementById( 'box').style.display='none' }, 5000 ) </script>