学习Js-day07

今日学习内容⏲js中的日期，对象，定时器

日期及对象

<script>
    // 日期对象的定义（使用new关键词
    // 1.获取当前的时间（本地的时间
    var date = new Date()//不传参获取的就是当前时间
    console.log(date);
    // 获取指定的时间
    var date = new Date(123456)//一个参数毫秒值 将这个毫秒值去加上对应的1970.1.1 0：0：0
    console.log(date);
    var date = new Date('2001/1/1 00:00:00')//指定一个字符串 来指定对应的时间 规定格式 
    console.log(date);
    var date = new Date(2000,10,5,12,15,15)//年月日时分秒
    console.log(date);

    // 日期对象的方法
    // 重点 月份（获取的月份比实际小1
    // get获取时间 年月日时分秒星期 对应的时间戳 （毫秒值 离1970/1/1的毫秒值
    var date = new Date()
    console.log(date.getFullYear());
    console.log(date.getMonth());//最大11月，没有12月
    console.log(date.getDate());//一个月中的第几天
    console.log(date.getDay());//一个星期中的第几天 星期天是第一天0 0-11
    console.log(date.getHours());//获取时间 24为0 0-23
    console.log(date.getMinutes());//0-59 60为0
    console.log(date.getSeconds());//0-59
    console.log(date.getTime());//获取离1970/1/1的毫秒值
    console.log(date.getTimezoneOffset());//获取时区


    // set设置时间
    date.setFullYear(1999,10,10);//同时设置年和月
    date.setMonth(10,20)//同时设置月和天
    date.setDate(30)//设置天
    date.setHours(10,10,20,128)//分 秒 毫秒
    console.log(date);

    // 转换的方法
    // date.toDateString();  以特定的格式显示星期几、月、日和年
    // date.toTimeString();  以特定的格式显示时、分、秒和时区
    // date.toLocaleDateString();  以特定地区格式显示年、月、日
    // date.toLocaleTimeString();  以特定地区格式显示时、分、秒
    // date.toUTCString();  以特定的格式显示完整的 UTC 日期: 年,月,日,时,分,秒。
    var date = new Date()
    // 转为字符串
    console.log(date.toString());//普通字符串转换
    console.log(date.toDateString()); //以特定的格式显示星期几、月、日和年
    console.log(date.toTimeString());  //以特定的格式显示时、分、秒和时区
    console.log(date.toLocaleDateString());  //以特定地区格式显示年、月、日
    console.log(date.toLocaleTimeString());  //以特定地区格式显示时、分、秒
    console.log(date.toUTCString());
    console.log(date.toLocaleString());  //以utc格式显示完整的 UTC 日期: 年,月,日,时,分,秒。
    console.log(Date.parse("2012|12|12"));//说明时间是number值，可以相加减
    console.log(Date.parse("2012/12/12"));//得到毫秒值
    var current = new Date()
    var old = new Date(2015,12,12)
    console.log(current-old);

    // 对象 是一个引用数据类型，所有引用数据类型都是对象（使用new关键词开辟的内存空间
    // 都是对象空间）Array（typeof是object）。
    // 对象的定义：
    // 1.字面量的形式
    var obj = {} //{}表示的是对象
    // 2.new关键词来构建对象
    var obj = new Object()
    // 对象的结构（容器 他具备存储数据的功能）
    // 对象的结构是key：value 的形式体现（键值对的形式key是唯一的value可以是任意类型）
    var obj = {name:'jack',age:18,isGirl:true,likeFoods:
    ['西瓜','南瓜','北瓜'],likeUser:{name:'rose',age:15}}
    console.log(obj.name);//第一种访问jack
    console.log(obj['name']);//第二种访问jack
    console.log(obj.likeFoods[1]);//对象里面嵌套数组 南瓜
    console.log(obj.likeUser.age);//对象里面嵌套数组 15
    // 添加和修改 其实就是设置对应的值
    // 如果当前这个key在对应的对象里面可以找到他就修改 
    // 如果找不到就是添加
    var obj2 ={name:'hello'}
    obj2.age = 10;
    obj2.name = 'world'
    console.log(obj2);
    // 删除里面的属性 删除操作 remove delete
    delete obj2.name
    console.log(obj2);

</script>

this关键字

<script>
    function sayHell0(){
        console.log(this);//window
    }
    //函数的this 指向他的调用者 谁调用这个函数 this就是指向谁
    // 全局调用的 js的顶层对象 全局对象window 也就是全局写的变量 以及全局调用的方法都是window的
    sayHell0()//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
    var obj = {
        name:'jack',
        sayHi:function(){
            console.log(this);//{name: 'jack', sayHi: ƒ}
            console.log(this==obj);//true
            console.log(this===obj);//true
        }
    }
    obj.sayHi()
</script>

日期练习：

1.显示当前时间(显示格式: 2016年 11月 11日 11时 11分 11秒)

2.判断两个日期相差的天数(可先求毫秒数差,再转换成天)

3.根据getDate()和setDate()， 封装一个函数afterDate(date,n)，得到日期date的n天后的日期

<script>
    function formatCurrentTime(){
        var currentTime = new Date()
        return `${currentTime.getFullYear()}年${currentTime.getMonth()+1}月${currentTime.getDate()}日${currentTime.getHours()}时${currentTime.getMinutes()}分${currentTime.getSeconds()}秒`
    }
    console.log(formatCurrentTime());
</script>
<script>//判断两个日期之间相差的天数
    var date = new Date()
    var date1 = new Date('2018/12/12 12:12:12')
    function getDay(date1,date2){
        var ms = Math.abs(date1-date2)
        // 将毫秒值转为天
        var day = parseInt(ms/1000/60/60/24)
        return day
    }
    console.log(getDay(date,date1));
</script>
<script>//根据函数得到当前日期n天后的日期
    function afterDate(date,n){
        date.setDate(date.getDate()+n)
        console.log(date);
    }
    afterDate(date,10)
</script>

对象练习

<script>
    var people = {
    name:'小刘',
    age:'21',
    hobby:'make money',
    wish : '1.8k',
    print:function(){
        console.log(`姓名:${this.name} 年龄:${this.age} 爱好:${this.hobby} 期望薪资:${this.wish}`);
    }
}
people.print()
</script>
<script>
    var hammer={
           width  : 100,
           height : 100,
           weight : 100,
         action:function(){
            console.log('可以锤钉子');
        }
    }
</script>
<script>
    var car = {
        speed:'50km/h',
        runOnRoad:function(Road){
            console.log('跑完全程需要'+parseInt(Road.length)/parseInt(this.speed)+'h');

        }   
    }
    var Road = {
            length:'1000km'
          }
    car.runOnRoad(Road)
</script>

定时器

<script>
    // setTimeout（延时器 延迟执行里面的代码 只执行一次
    // window.setTimeout(函数，延迟的时间(毫秒值)，传递的参数) //window可以省略
    // 延时器 延迟执行 异步的 （多线程操作 开一个线程）（同步单线程操作 顺序执行） 
    // js引擎的解析为单线程 同步的内容相当于加了把锁（同步锁） 异步就不是顺序执行
    console.log('hello world');
    setTimeout(function(){
        console.log('hello');
    },0)//异步的 eg:支付的消息通知，关闭广告 销毁等
    console.log('hello jack');
    // 代码执行的顺序是先同步再异步
    setTimeout(function(arg,message){
        console.log(arg,message);
    },1000,'hanger','yes')//参数可以任意的传，对应的函数内需要用形参去接收
    // clearTimeout（延时器id）清除延时器 销毁对应的延时器
    var id = setTimeout(function(){
        console.log('hello');
    },1000)
    clearTimeout(id)
</script>
<script>
    // setInterval 定时器 定时去执行里面的代码 执行多次
    // window.setInterval(执行的函数，执行一次的时间，参数) 他也是异步操作
    // 不要在定时器里面声明变量 会无限执行
    /* var i = 0
    var id = setInterval(function(){
        console.log('定时器执行');
        i++
        if(i==10){
            clearInterval(id)
        }
    },1000) 
    setInterval(function(arg){
        console.log(arg);
    },100,'hello') */
    // 倒计时 轮播图的动画（js）
    // 先走同步 再走异步
    // 不要在setInterval里面套setInterval
    // 如果setInterval 套了setInterval 
</script>

计时器练习！！

<!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>
<link rel='stylesheet' href=''>
</head>
<body>
    <span id="showTime">00时00分00秒</span>
    <input type="button" value="点我开始计时" id="btn">
    
</body>
</html>
<script>
    var showTime = document.getElementById('showTime')
    var action = document.getElementById('btn')
    function timing(){
        var i = 0
        var s = 0
        var m = 0
        var h = 0
        setInterval(function(){
            i++
            s = fn(parseInt(i%60))
            m = fn(parseInt(i/60%60))
            h = fn(parseInt(i/3600%24))
            showTime.innerHTML = `${h}时：${m}分：${s}秒：`
        },1000)
    }
    function fn(number){
            if(number<10){
                return '0'+number
            }
            return number
        }
    btn.onclick = timing
</script>