对象及日期定时器

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 设置时间（重点记忆，把该记得的关键词都记得）这个是设置时间，是自己设置的世界

// 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" 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>