526互联

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

发布时间 2023-07-12 18:18:07作者: sunny123456

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.