在某网课学习前端笔记整理js篇23-日期对象和它的一些方法、几个时间问题

最新推荐文章于 2024-07-29 01:14:07 发布

低调的帅

最新推荐文章于 2024-07-29 01:14:07 发布

阅读量268

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_34338676/article/details/104715818

版权

web前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

日期对象和它的一些方法、几个时间问题

一、日期对象和它的一些方法

日期对象Date有很多与日期有关的方法。

1.日期对象的创建

example1

var date1 = new Date(),
    date2 = new Date,
    date3 = Date();
console.log(date1);//Wed Feb 28 2018 19:03:36 GMT+0800 (中国标准时间)
console.log(date2);//Wed Feb 28 2018 19:03:36 GMT+0800 (中国标准时间)
console.log(date3);//Wed Feb 28 2018 19:03:36 GMT+0800 (中国标准时间)

example2

var date = new Date('2018-1-1 8:00:00');
console.log(date);//Mon Jan 01 2018 08:00:00 GMT+0800 (中国标准时间)
date = new Date(0);
console.log(date);//Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)

注：Date（）方法的参数是数值时，指的是距离1970年1月1日8点的时间，单位毫秒

2.一些方法

表格复制于w3cschool。世界时UT即格林尼治平太阳时间，是指格林尼治所在地的标准时间，也是表示地球自转速率的一种形式。

Date 对象方法

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

example3

var date1 = Date.parse('2018-1-1 9:0:0');//返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
var date2 = Date.UTC(2018,0,1,9-8,0,0);//根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。与中国（我这是东8区）差8小时
var date3 = new Date('2018/1/1 9:0:0').getTime();//返回 1970 年 1 月 1 日至今的毫秒数。
console.log(date1);//1514768400000
console.log(date2);//1514768400000
console.log(date3);//1514768400000

example4

var date = new Date();
year = date.getFullYear(),
  month = date.getMonth()+1,
  dat = date.getDate();
day = (date.getDay() == 0) ? '日':date.getDay(),
  hour = date.getHours(),
  min = date.getMinutes(),
  sec = date.getSeconds(),
  millsec = date.getMilliseconds();
console.log(`当前时间：${year}年${month}月${dat}, 星期${day}, ${hour}:${min}:${sec}:${millsec}`);//当前时间：2018年2月28, 星期3, 20:43:26:39

这里的``（反引号，esc下的那个键）加上${}的组合叫模板字符串（模板字面量）。

example5

var date = new Date();
year = date.getUTCFullYear(),
    month = date.getUTCMonth()+1,
    dat = date.getUTCDate();
	day = (date.getUTCDay() == 0) ? '日':date.getUTCDay(),
    hour = date.getUTCHours(),
    min = date.getUTCMinutes(),
    sec = date.getUTCSeconds(),
    millsec = date.getUTCMilliseconds();
console.log(`当前世界时间：${year}年${month}月${dat}, 星期${day}, ${hour}:${min}:${sec}:${millsec}`);//当前世界时间：2018年3月1, 星期4, 8:6:0:809

example6

//日期输出的几种格式
var date = new Date();
console.log(date.toString());//Thu Mar 01 2018 19:17:43 GMT+0800 (中国标准时间)下午7:17:43
console.log(date.toLocaleString());//19:17:43 GMT+0800 (中国标准时间)
console.log(date.toTimeString());//2018/3/1 
console.log(date.toLocaleTimeString());//下午7:17:43
console.log(date.toDateString());//Thu Mar 01 2018
console.log(date.toLocaleDateString());//2018/3/1
console.log(date.toUTCString());//Thu, 01 Mar 2018 11:17:43 GMT

example7

var date = new Date();
console.log(date.getTime());//1519903459927 距离1970年1月1日的时间（毫秒）
console.log(Number(date));//1519903459927
console.log(date.getTimezoneOffset());//-480  与格林尼治标准时间（0时区）的时差(单位分钟)

setInterval(function, time)： 定时器，每隔time毫秒执行一次function，返回当前定时器的唯一id标识。第一个参数可以是字符串包裹着函数。

clearInterval(id)： id是当前定时器的唯一id标识，用于清除定时器。

setTimeout(function, time)： 定时器，time毫秒后执行function（只执行一次）。

clearTimeout(id)： id是当前定时器的唯一id标识，用于清除定时器。

两者的差异可参照：http://www.cnblogs.com/ppforever/p/4344912.html?tvd，http://blog.csdn.net/xygg0801/article/details/51925149的解释

example8

//每隔1秒打印一次，3次结束
var time = 3; 
var timer = setInterval(function(){	
    time--?console.log(time):clearInterval(timer);
},1000);
//2
//1
//0

example9

//3秒后打印
var timer = setTimeout(function(){
    console.log("over");
},3000);//over	
//clearTimeout(timer); //加了这句话就不会打印了，因为js是单线程的，settimeout的函数会先放入等待队列，而不是创建一个新的线程。

example9

//每隔一秒打印一次
function print(){
    console.log(1);
    setTimeout(print,1000);
}
print();//每隔一秒打印一次1

setTimeout和setInterval实现循环做动作，前者需要等待前面代码执行完，二后面则会往执行队列一直塞，不管是否执行完。两者各有优劣。前者会等待回调函数执行完才开始准备创建一个新的回调函数，后者则是每隔一定时间一定会创建一个新的回调函数。前者的执行时间至少是设置的时间，后者可能更短，甚至一次性都执行。

example10

<style>
    #block{
        position:relative;
        width:100px;
        height: 100px;
        background-color: red;
    }
</style>
<button onclick="move()">开始</button>
<div id="block"></div>
<script>
     // 定时器在使用的时候 记得先清理一下之前的
        // 定时器用完了 记得删除
    var timer = null;
    function move(){
        var left = 0;
        var top = 0;
        clearInterval(timer);
        timer = setInterval(function(){
            left++;
            top++;
            if(top == 300) clearInterval(timer);
            //id dom元素可以直接id引用到该元素。
            block.style.top = top + 1 +'px';
            block.style.left = left + 1 +'px';
        },30);
    }
</script>

点击开始，红色方块右下方移动，这里为了说明：定时器在使用的时候记得先清理一下之前的；定时器用完了记得删除。

example11

//计算两个时间的时间差
var date1 = new Date('2017-1-2 8:00:00');
var date2 = new Date('2018-3-2 9:00:01');
var time = date2 - date1;//这里有隐式转换Number(date2)-Number(date1)
var day =  time / 1000 / 60 / 60 / 24 | 0;
var hour = time / 1000 / 60 / 60 % 24 | 0;
var min = time / 1000 / 60 % 60 | 0;
var sec = time / 1000 % 60 | 0;
var millsec =  time % 1000;
console.log(`${day}天 ${hour}时 ${min}分 ${sec}秒 ${millsec}毫秒`);//424天 1时 0分 1秒 0毫秒

上面的是计算两个时间时间差的方法。

example12

//获取不同时区的在当前时区的时间给回调函数,并每隔一秒执行回调函数
function getZonetime(num,callback){
    var date = new Date();
    var offset = date.getTimezoneOffset() * 60 * 1000;//获取o时区与当前时区的时间差
    var zerotime = new Date(date.getTime() + offset);
    var localtime =  new Date(zerotime.getTime() + num * 60 * 60 *1000);
    var year = localtime.getFullYear(),
        month = localtime.getMonth()+1,
        date = localtime.getDate(),
        day = localtime.getDay(),
        hour = localtime.getHours(),
        min = localtime.getMinutes(),
        sec = localtime.getSeconds(),
        millsec = localtime.getMilliseconds();
    var json = {year, month, date, day, hour, min ,sec, millsec};
    callback&&callback(json);
    setTimeout(function(){
        getZonetime(num,callback);
    },1000);
}
var p = document.getElementById('p');
getZonetime(-1,function(json){
    var day = json.day == 0 ?'日':json.day;
    p.innerHTML = `${json.year}-${json.month}-${json.date} 周${day} ${json.hour}:${json.min}:${json.sec}:${json.millsec}`;
});//每隔一秒刷新下页面的时间显示

上面是回调函数的一种应用，将每隔一秒的动作交给调用者去定义，只提供获取时间和刷新时间的功能。

二、几个时间问题

1.如何获取当月天数

example13

// 1. 如何获取当月的天数
var date = new Date(2018,2,3);//注意，这里的2是指3月，外国人月从0开始的。
console.log(getDays(date.getFullYear(),date.getMonth()));//31  
function getDays(year, month){
    var temp = new Date(year, month+1, 0);
    return temp.getDate();
}

当使用var date = new Date(yyyy, mon, date)这种初始化日期的方法时，当date是0时，那么会回到上个月的月底，通过该方法获取上个月的天数。

#####2.如何获取当月第一天是星期几

example14

// 2. 如何获取当月第一天是星期几
var date2 = new Date(2018,2);
date2.setDate(1);
console.log(date2.getDay());//4

低调的帅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在某网课学习前端笔记整理js篇23-日期对象和它的一些方法、几个时间问题

日期对象和它的一些方法、几个时间问题一、日期对象和它的一些方法日期对象Date有很多与日期有关的方法。1.日期对象的创建example1var date1 = new Date(), date2 = new Date, date3 = Date();console.log(date1);//Wed Feb 28 2018 19:03:36 GMT+0800 (中国标...
复制链接

扫一扫