对定时器初始化的认识（day 07 对象及其定时器与日期）
导读：对象及日期定时器...
对象及日期定时器
Date日期
日期对象的定义（使用new关键词）1.获取当前的时间（本地的时间）！！！
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 设置时间（重点记忆 ，把该记得的关键词都记得）这个是设置时间 ，是自己设置的世界
// 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)//毫秒值设置
{**重点 月份 0-11 月（获取的月份比实际会小1） 星期天为0**}
其他的方法
//其他方法
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")); //以特定的格式进行转换 得到的是一个毫秒值
对象
概述：对象是一个引用数据类型 ，所有引用数据类型都是对象 ，（使用new 关键词开辟的内存空间都是对象空间）Array（typeof 是object） 。
==比对 比对的是地址值（栈地址） === 比对的是对应俩个是否是同一个
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存在于函数内）
全局的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的属性 可以通过window[属性名]进行访问
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）
//先走同步 再走异步
不要再setInterval里面套setInterval
如果setInterval 套了setInterval 里面的执行时间要比外面的要短
练习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"></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>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！