标签：function console log day07 Js 学习 var date new

今日学习内容⏲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>

标签：function,console,log,day07,Js,学习,var,date,new
来源： https://www.cnblogs.com/liu-2001/p/16544919.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。