js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、相关插件等

js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、相关插件等
原文链接：https://blog.51cto.com/u_15715491/5465185

创建时间日期对象

登录后复制

new Date()
1.

登录后复制

new Date("2017/09/06 09:00:00")
1.

不常用的方法

登录后复制

var date3 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)');
var date4 = new Date(2017, 1, 27);
1.
2.

获取时间日期

登录后复制

var date = new Date();  
"现在的时间是："+date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒。" 
1.
2.

当前时间：2018年6月13日6时4分30秒。

• getTime()，获取时间戳，返回毫秒数，//setTime()，以毫秒设置日期，会改变整个日期。

• getFullYear()，返回年份，以4位数表示。//setFullYear()，设置日期的年月，必须以4位数表示。

• getMonth()，返回月份，0~11。

• getDate()，返回天数，1~31。

• getDay()，返回星期几，0~6。

• getHours()，返回小时数，0~23。

• getMinutes()，返回分钟数，0~59。

• getSeconds()，返回秒数，0~59。

• getMilliseconds()，返回毫秒数。

登录后复制

// 我在执行这行代码时，当前时间为 2019年2月4日，周一，13:23:52
  var myDate = new Date();

  console.log(myDate); // 打印结果：Mon Feb 04 2019 13:23:52 GMT+0800 (中国标准时间)
  console.log(myDate.getDate()); // 打印结果：4
  console.log(myDate.getDay()); // 打印结果：1
  console.log(myDate.getMonth()); // 打印结果：1
  console.log(myDate.getFullYear()); // 打印结果：2019
  console.log(myDate.getHours()); // 打印结果：13
  console.log(myDate.getMinutes()); // 打印结果：23
  console.log(myDate.getSeconds()); // 打印结果：52
  console.log(myDate.getMilliseconds()); // 打印结果：393
  console.log(myDate.getTime()); // 获取时间戳。打印结果：1549257832393
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

昨天、明天、N天前后

登录后复制

// 昨天
let yesterday = new Date()
yesterday.setDate(new Date().getDate() - 1)

// n天前
let NdaysBefore = new Date()
NdaysBefore.setDate(new Date().getDate() - n)
1.
2.
3.
4.
5.
6.
7.

登录后复制

// 明天
let tomorrow = new Date()
tomorrow.setDate(new Date().getDate() + 1)

// n天后
let NdaysLater= new Date()
NdaysLater.setDate(new Date().getDate() + n)
1.
2.
3.
4.
5.
6.
7.

时间比较

字符串格式的日期格式为 2015/01/12 或 2017-8-13
需先转换成统一标准格式，再转换为时间戳进行比较

登录后复制

//非标准的字符串时间
let date_string = '2019-9-8'
//转换成统一标准格式 输出：2019/9/8
let date_standard_string = date1.replace(/\-/g,'/') 
//將字符串格式日期转化为时间戳，就是1970年到当前日期的毫秒数 
let date_timestamp = Date.parse(date_standard_string ) 
if(date_timestamp <= new Date()){
    alert('该日期早于当前时间')
}else{
    alert('该日期晚于当前时间')
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

时间计算

计算日期的和——天

登录后复制

let days = 40
let date = new Date();
date.setDate(date.getDate() + days);
1.
2.
3.

2016-16-13，加40天，结果为：2016-07-23

计算日期的差——秒

登录后复制

(date1 - date2) / 1000
1.

计算日期的差——分

登录后复制

(date1 - date2) / 1000*60
1.

计算日期的差——时

登录后复制

(date1 - date2) / 1000*60*60
1.

计算日期的差——天

登录后复制

(date1 - date2) / 1000*60*60*24
1.

计算日期的差——月

登录后复制

let months1 = date1.getFullYear() * 12 + date1.getMonth();
let months2 = date2.getFullYear() * 12 + date2.getMonth();
months1 - months2;
1.
2.
3.

时间日期格式化

登录后复制

Date.prototype.format = function(fmt) { 
     var o = { 
        "M+" : this.getMonth()+1,                 //月份 
        "d+" : this.getDate(),                    //日 
        "h+" : this.getHours(),                   //小时 
        "m+" : this.getMinutes(),                 //分 
        "s+" : this.getSeconds(),                 //秒 
        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
        "S"  : this.getMilliseconds()             //毫秒 
    }; 
    if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
     for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
         }
     }
    return fmt; 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

登录后复制

//格式化为 2019-12-7 16:00:00
var time1 = new Date().format("yyyy-MM-dd hh:mm:ss");

//格式化为 2019-12-7
var time2 = new Date().format("yyyy-MM-dd");

//将 "时间戳" 转换为 "2014年-6月-8日" 
var da = 1402233166999;
da = new Date(da);
var year = da.getFullYear()+'年';
var month = da.getMonth()+1+'月';
var date = da.getDate()+'日';
console.log([year,month,date].join('-'));
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

星期汉化

登录后复制

// 星期汉化
weekCN(val) {
  switch (val) {
    case 1:
      return "一"
      break;
    case 2:
      return "二"
      break;
    case 3:
      return "三"
      break;
    case 4:
      return "四"
      break;
    case 5:
      return "五"
      break;
    case 6:
      return "六"
      break;
    case 0:
      return "天"
      break;
    default:
      return "参数必须为1-7"
  }
},
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

实战范例

登录后复制

// 格式化日期为  11月04日(星期三)
formatDate(date) {
  return date.getMonth() + 1 + '月' + date.getDate() + '日（星期' + this.weekCN(date.getDay()) + '）'
},
1.
2.
3.
4.

时间间隔

登录后复制

var start=1491789600000;//2017-4-10 10:00
var end=1494381600000;//2017-5-10 10:00

var utc=end-start;

utc/(24*60*60*1000);// 天

utc/(60*60*1000);//小时

utc/(60*1000); // 分
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

时间戳

时间戳：指的是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数（1秒 = 1000毫秒）。

计算机底层在保存时间时，使用的都是时间戳。时间戳的存在，就是为了统一时间的单位。

登录后复制

var myDate = new Date("1970/01/01 0:0:0");

  console.log(myDate.getTime()); // 获取时间戳
1.
2.
3.

打印结果（可能会让你感到惊讶） -28800000

为啥打印结果是-28800000，而不是0呢？这是因为，我们的当前代码，是在中文环境下运行的，与英文时间会存在8个小时的时差（中文时间比英文时间早了八个小时）。如果代码是在英文环境下运行，打印结果就是0。

时间戳转时间

登录后复制

var timestamp4 = new Date(1472048779952);
1.

常用插件

​ ​day.js​​

实战案例（重要）：每次打开页面时显示当前的日期

登录后复制

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 800px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div></div>

<script>
        //模拟日历
        //需求：每天打开这个页面都能定时显示年月日和星期几

        //1.创建一个当前日期的日期对象
        var date = new Date();
        //2.然后获取其中的年、月、日和星期
        var year = date.getFullYear();
        var month = date.getMonth();
        var hao = date.getDate();
        var week = date.getDay();
//        console.log(year+" "+month+" "+hao+" "+week);
        //3.赋值给div
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var div = document.getElementsByTagName("div")[0];
        div.innerText = "今天是："+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];

</script>

</body>
</html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

实战案例（重要）：倒计时

登录后复制

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 1210px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
<div></div>

<script>
    var div = document.getElementsByTagName("div")[0];
    var timer = setInterval(fn, 1);

    function fn() {
        var nowtime = new Date();
        var future = new Date("2019/02/03 11:20:00");
        var timeSum = future.getTime() - nowtime.getTime();  //获取时间差：发布会时间减去此刻的毫秒值
        var day = parseInt(timeSum / 1000 / 60 / 60 / 24);
        var hour = parseInt(timeSum / 1000 / 60 / 60 % 24);
        var minu = parseInt(timeSum / 1000 / 60 % 60);
        var sec = parseInt(timeSum / 1000 % 60);
        var millsec = parseInt(timeSum % 1000);

        //问题处理：所有的时间小于10的时候，在前面自动补0，毫秒值要补双0（比如如，把 8 秒改成 08 秒）
        day = day < 10 ? "0" + day : day;  //day小于10吗？如果小于，就补0；如果不小于，就是day本身
        hour = hour < 10 ? "0" + hour : hour;
        minu = minu < 10 ? "0" + minu : minu;
        sec = sec < 10 ? "0" + sec : sec;
        if (millsec < 10) {
            millsec = "00" + millsec;
        } else if (millsec < 100) {
            millsec = "0" + millsec;
        }
//        console.log(day);
//        console.log(parseInt(timeSum/1000/60/60/24));
        if (timeSum < 0) {
            div.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
            clearInterval(timer);
            return;
        }
        div.innerHTML = "距离苹果发布会还有" + day + "天" + hour + "小时" + minu + "分" + sec + "秒" + millsec + "毫秒";
    }
</script>
</body>

</html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.