JS date对象 时间戳

date对象

是JavaScript中,提供的,存储时间的对象;使用时,需要先创建一个时间对象;使用 JavaScript 提供的方法,创建一个时间对象;通过 Date() 创建的 对象中,包含很多的方法,都是JavaScript规定好的,可以直接使用;
存储的时间信息,是程序执行时的 当前时间
var d = new Date();
console.log(d); // 向控制台输出内容
console.dir(d); // 查看对象的内容信息

1. getFullYear() 获取4位年份数值
    var year = d.getFullYear() ;
    console.log(year);
2. getMonth() 获取月份

JavaScript规定,获取的月份,数值是 0-11 , 0表示1月份,11表示12月份
实际月份的数值,是获取结果 +1
var month = d.getMonth() + 1;
console.log(month);

3. getDate() 获取日期

var date = d.getDate();
console.log(date);

4. getDay() 获取星期

JavaScript规定,获取星期的结果是 0-6的数值
0表示 星期日 1表示 星期一 … 6表示 星期六
var week = d.getDay();
console.log(week);

5. getHours() 获取小时

var house = d.getHours();
console.log(house);

6. getMinutes() 获取分钟

var minute = d.getMinutes();
console.log(minute);

7. getSeconds() 获取秒

var second = d.getSeconds();
console.log(second);
总结:
获取的月份 是 0 - 11 的数值
实际月份与获取的数值,相差1
获取星期 程序语法 是 getDay()
获取星期 结果是 0 - 6 的数值 0 表示星期日

时间戳

在JavaScript程序中,所谓的时间戳,指得是:当前时间和 格林尼治时间 1970年1月1日,0点0分0秒,相差的毫秒数
简单理解,就是从 格林尼治时间 1970年1月1日,0点0分0秒,到现在,过了多少毫秒

    var d = new Date();
    var times = d.getTime();
    console.log(times); 
    // 实际项目中,时间戳,往往用于计算时间,来衡量时间差
    // 例如 : 秒杀倒计时  
    //     秒杀 是 4月1日 0点0分0秒开始
    // 4月1日 0点0分0秒 这个时间有 时间戳
    // 当前时间 也会有 时间戳
    // 两个时间戳相减 结果是 两个时间之间的时间差,单位是毫秒
    // 再将这个毫秒,转化为 天,小时,分钟,秒,就是我们要的结果

    // 获取2020年4月1日0点0分0秒的时间戳
    // 获取指定时间的时间对象, Date()参数是要获取的时间的字符串
    //     '年-月-日 空格 小时:分钟:秒'
    // 有参数,获取指定时间的时间对象
    var end = new Date('2020-4-1 0:0:0'); 
    
    // 当前的时间对象,没有参数,获取当前时间对象
    var start = new Date(); 
    
    // 计算时间差,应该是 最终的事件的时间戳,减去当前时间的时间戳
    // 时间单位是 毫秒, 需要转化为秒 1秒 = 1000毫秒
    // 转化的秒数,是小数,我们只要整数部分,取整
    // parseInt()   Math.ceil()   Math.floor() 
    
    // end - start 直接使用时间对象相减 也可以获取 时间差
    // 一些低版本的浏览器,还有一些IE版本的浏览器,对这样时间对象直接相减,操作不支持

    var times = parseInt( ( end.getTime()  - start.getTime()  ) / 1000 ) ;
    console.log(times); 

需要将时间差的秒数 转化为 天,小时,分钟,秒等信息

  1. 将秒,转化为天
    秒数 / 一天的秒数 对结果取整 只获取整数部分
    parseInt() 或者 Math.floor()
    var day = parseInt( times / (246060) ) ;
    console.log(day);

  2. 将 转化为 天数之后, 剩余的秒数, 转化为 小时
    而不是所有的秒数
    方法1: 总秒数 - 天数所代表的秒数 — 是我们要转化为小时的秒数
    var a = times - day*(246060);
    console.log(a);
    方法2: 总秒数 % 一天的秒数 求余数
    将所有的秒数,都转化为天,之后剩余的余数,就是我们要求的数值,也就是转化为小时的秒数
    var b = times % (246060);
    console.log(b);
    转化为小时的秒数 / 一小时有多少秒 结果,获取整数部分
    var hour = parseInt( ( times % (246060) ) / (60*60) );
    console.log(hour);

  3. 将 剩余的秒数,转化为分钟
    方法1:总秒数 - 天数的秒数 - 小时的秒数
    方法2: 总秒数 % 小时的秒数
    剩余的秒数 / 分钟的秒数 获取整数部分
    var minute = parseInt( ( times % (60*60) ) / 60 );
    console.log(minute);

  4. 求剩余的秒数
    方法1 : 总秒数 - 天的秒数 - 小时的秒数 - 分钟的秒数
    方法2 : 总秒数 % 一分钟的秒数
    var second = times % 60 ;
    console.log(second);
    document.write( 距离结束时间,还有${day}天,${hour}小时,${minute}分钟,${second}秒,请您抓紧时间付款,或者找老公付款 );

<div id="d"></div>

    <script>
        function setTime(end){
            var endTime = new Date(end);
            var startTime = new Date();
            var times = parseInt( ( endTime.getTime() - startTime.getTime() ) / 1000 );
        
            var day = parseInt(times / (24*60*60));
            var house =  parseInt( (times % (24*60*60)) / (60*60) );
            var minute = parseInt( (times % (60*60)) / (60) );
            var second = times % 60;
        
            return  `距离终止时间,还有${day}天,${house}小时,${minute}分钟,${second}秒`;
        }

        d.innerHTML = setTime('2020-4-1 0:0:0');

        setInterval( function(){
            d.innerHTML = setTime('2020-4-1 0:0:0');
        }  , 1000 );

定时器

根据设定的时间间隔,来循环执行程序
只要定时器不停止,程序就会一直执行
setInterval( 参数1 , 参数2 )
参数1:要执行的程序,必须是一个函数的形式 function(){ 定义程序 }
参数2:执行程序的间隔时间 单位是毫秒
时间间隔不能无限小,与计算机的刷新频率有关
60Hz 60赫兹 代表,1秒刷新60次
1次就是 1000 / 60 ---- 16.666… 毫秒
你定义的程序的时间间隔,不能小于 16.6666… 毫秒
我们一般都定义最少 0.1秒,也就是 100毫秒

    // 每间隔1000毫秒,也是一秒,重复执行 function(){}中的程序
    // 将定时器,存储在一个变量中
    var interval1 = setInterval( function(){
        document.write('张老师帅极了' + '<br>');
    } , 1000);
    var interval2 = setInterval( function(){
        document.write('张老师不仅帅,还是非常帅' + '<br>');
    } , 1000);
终止定时器

要终止定时器的执行,需要有两个条件

  1. 使用一个变量,来存储定时器
  2. 使用清除定时器方法,参数是这个定时器的变量
    如果程序中,有多个定时器,清除哪个,就停止哪个
    即时写多个参数,也只对第一个参数清除定时器
    clearInterval(interval1);
		如何间隔一段时间,再来停止定时器?
		 定义一个变量,来存储执行的次数
         // 定义一个变量,存储执行次数
        var int = 0;
        var interval3 = setInterval( function(){
            document.write('123456' + '<br>');
            // 每次执行,变量自增
            int++;
            // 当满足某个我们设定的条件时
            if(int == 10){
                // 清除定时器,终止程序的执行
                clearInterval(interval3);
            }
        } , 1000);
        console.log(interval3);

说明:
变量中,到底存储的是什么?
变量中,存储的是当前 这个定时器 的 序号
这个序号,表示当前这个定时器,是整个程序中的第几个定时器
编号是从1开始编号的
所谓的清除定时器,实际上就是关闭整个程序中的第几个定时器
将定时器赋值给变量,只是将定时器的序号赋值给变量,不会影响定时器的执行

延时器

按照设定的时间,延迟程序的执行
延时器中的程序,只能执行一次
可以简单的理解为 定时炸弹 到了指定的时间就会执行,并且只会执行一次
语法:
setTimeout( 函数 , 延迟的时间 );
第一个参数,也是函数形式,来定义要执行的程序内容
第二个参数,定义延迟时间,单位也是毫秒
setInterval(function(){} , 1000);

        // 延时5秒钟之后,执行程序
        var timeout1 = setTimeout( function(){
            console.log('123456');
        } , 5000 )    
        console.log(timeout1);

清除延时器
使用给一个变量存储延时器
清除延时器,参数是这个变量
clearInterval(timeout1);
特别说明

  1. 变 量存储的也是序号,表示的是第几个延时器
  2. JavaScript中,定时器和延时器,的计数是不做区分的
    也就是第几个定时器,和第几个延时器,是一起计算的,不做区分
    setInterval(function(){} , 1000); 1
    setInterval(function(){} , 1000); 2
    settimeout(function(){} , 1000); 3
    setInterval(function(){} , 1000); 4
    settimeout(function(){} , 1000); 5
  3. clearInterval 和 clearTimout 是不做区分的
    clearInterval 可以清除定时器,也可以清除延时器
    clearTimout 可以清楚延时器,也可以清除定时器
<style>
       div{
           width: 300px;
           line-height: 150px;
           text-align: center;
           border:1px solid red;
           position: relative;
       }

       div button{
           position: absolute;
           top:0;
           right: 0;
       }

   </style>
</head>
<body>
   <!-- 流氓广告效果 -->

   <div id="d">
       <button id="btn">关闭</button>
       我是一个广告内容
   </div>

   <script>
       // 点击button按钮
       // 点击事件,咱们之后再讲,先理解思路方法
       btn.onclick = function(){
           // 设定div的显示属性为none,隐藏消失
           d.style.display = 'none';

           // 定义一个延时器,间隔一段时间之后,再给div演示属性设定为block,再次显示
           setTimeout(function(){
               d.style.display = 'block';
           } , 1000);
       }

定时器的最后一个小问题
定时器最大的问题
程序的第一次执行,是在间隔规定的时间之后,才会执行
在走完第一个时间间隔之前,程序是不会执行的
为了防止时间间隔执行完毕之前,页面没有执行结果
会将程序,先 提前执行一次

       // 为了防止5秒钟之内,页面内有输出内容
        document.write('123456'+'<br>');            
        // 第一次向页面输出内容,是在间隔规定的5秒之后
        setInterval( function(){
            document.write(' 123456'+'<br>');            
        } , 5000 )

倒计时demo详解

<body>
    距离十一放假,还有:
    <div id="d1"></div><br><br><br>

    距离五一放假,还有:
    <div id="d2"></div><br><br><br>

    距离清明节放假,还有:
    <div id="d3"></div><br><br><br>
 
    <script>
        // 倒计时demo

        // 思路:
        //    1,获取起始时间(当前时间)的时间戳和终止时间的时间戳
        //    2,通过时间戳 计算出时间差 将单位转化为秒
        //    3,总的时间差秒数,转化为天数,小时数,分钟数,秒数
        //    4,通过定时器,每间隔一秒,向页面输出一次
        // 注意的问题:
        //    1,使用定时器,第一秒会没有输出内容
        //      要先提前输出一次
        //    2,程序比较复杂,如果要提前输出,还要写在定时器中,最好定义成函数形式
        //      方便重复使用
        //    3,定义函数,参数是终止时间

        d1.innerHTML = setTime('2020-10-1 0:0:0');

d1.innerHTML=setTime('2020-10-1 0:0:0');

        // 通过定时器,每间隔一秒执行一次
        // 但是第一秒没有内容,要提前执行一次
        setInterval(function(){
            d1.innerHTML = setTime('2020-10-1 0:0:0');
        } , 1000);

        d2.innerHTML = setTime('2020-5-1 0:0:0');
        setInterval(function(){
            d2.innerHTML = setTime('2020-5-1 0:0:0');
        } , 1000);

        d3.innerHTML = setTime('2020-4-4 0:0:0');
        setInterval(function(){
            d3.innerHTML = setTime('2020-4-4 0:0:0');
        } , 1000);

    setInterval(function(){
        d1.innerHTML=setTime('2020-10-1 0:0:0');
    },1000);
    d2.innerHTML=setTime('2020-5-1 0:0:0');
    setInterval(function(){
        d2.innerHTML=setTime('2020-4-4 0:0:0');
    },1000);
    d3.innerHTML=setTime('2020-4-4 0:0:0');
    setInterval(function(){
        d3.innerHTML=setTime('2020-4-4 0:0:0');
    },1000); 
     
        // 计算时间差,返回字符串的函数
        function setTime(endTime){
            // 1,建立起始时间对象和终止时间对象 
            // 起始时间,就是当前时间 
            var start = new Date();

            // 终止时间,就是输入参数表示的事件
            var end = new Date(endTime);

            // 2,通过时间戳,来计算时间差
            // 将时间差--毫秒,转化为秒,取整
            var times = parseInt( ( end.getTime() - start.getTime() ) / 1000 );

            // 3,将时间差转化为天数,小时数,分钟数,秒数

            // 转化为天数 : 总秒数 / 一天的秒数   取整
            var d = parseInt(times / (24*60*60)); 

            // 转化为小时 : 总秒数 % 一天的秒数 再除以 一小时的秒数   取整
            var h = parseInt( (times % (24*60*60) ) / (60*60)); 

            // 转化为分钟 : 总秒数 % 一小时的秒数 再除以 一分钟的秒数   取整
            var m = parseInt( (times % (60*60) ) / 60 ); 

            // 转化为秒 : 总秒数 % 一分钟的秒数
            var s = times % 60; 

            // 将结果,写成字符串,作为返回值
            return `距离结束时间,还有${d}天,${h}小时,${m}分钟,${s}秒,请您抓紧时间抢购`;
        } 
        //var 
        //var d=parseInt((times%(24*60*60));
        //var h=parseInt((times%(24*60*60))/60);
        //var s=times%60;

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值