JavaScript Date

声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

JavaScript Date

日期对象用于处理日期和时间。先来几个练习实例：

  • 使用 Date() 方法获取当日日期

  • 使用 getFullYear() 获取年份

  • 使用 getTime() 返回从 1970 年 1 月 1 日至今的毫秒数

  • 使用 setFullYear() 设置具体的日期

    需要注意的是在JS语言中月数是从0至11。比如：10是11月

  • 使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串

  • 使用 getDay() 和数组来显示星期几，而不仅仅是数字

  • 显示一个实时时钟

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部分方法练习整合</title>
    <style>
        h3{
            color:orange;
            font-weight:bold;
        }
    </style>
</head>
<body onload="startTime()">

<h3>1. Date() 获取当日日期</h3>
<p id="demo1"></p>

<h3>2. getFullYear() 获取年份</h3>
<p id="demo2"></p>

<h3>3. getTime() 显示1970年1月1号至今的毫秒数</h3>
<p>单击按钮显示1970年1月1号至今的毫秒数。</p>
<button onclick="getTm()">点我</button>
<p id="demo3"></p>

<h3>4. setFullYear() 设置具体日期</h3>
<p>单击按钮显示修改后的年月日。</p>
<p><b>需要注意 JavaScript 月数是从0至11。4是5月</b></p>
<button onclick="setTm()">点我</button>
<p id="demo4"></p>

<h3>5. toUTCString() 方法把 utc 日期和时间转换成字符串</h3>
<p>点击按钮把 utc 日期和时间转换成字符串。</p>
<button onclick="toUtcStr()">点我</button>
<p id="demo5"></p>

<h3>6.显示日期</h3>
<p>单击按钮显示今天周几</p>
<button onclick="displayD()">点我</button>
<p id="demo6"></p>

<h3 style="color:red">7.显示实时时钟</h3>
<div id="txt"></div>
<script>
    var d = new Date();
    var y = d.getFullYear();
    document.getElementById("demo1").innerHTML = d;
    document.getElementById("demo2").innerHTML = y;

    function getTm(){
	    var d3 = document.getElementById("demo3");
	    d3.innerHTML=d.getTime();
    }

    function setTm(){
        d.setFullYear(2020,4,3);
	    var d4 = document.getElementById("demo4");
	    d4.innerHTML=d;
    }

    function toUtcStr(){
	    var d5 = document.getElementById("demo5");
	    d5.innerHTML=d.toUTCString();
    }

    function displayD(){
	    var weekday=new Array(7);
	    weekday[0]="周日";
	    weekday[1]="周一";
	    weekday[2]="周二";
	    weekday[3]="周三";
	    weekday[4]="周四";
	    weekday[5]="周五";
	    weekday[6]="周六";
	    var d6 = document.getElementById("demo6");
	    d6.innerHTML=weekday[d.getDay()];
    }

    function startTime(){
        var today = new Date();
	    var h = today.getHours();
	    var m = today.getMinutes();
	    var s = today.getSeconds();// 在小于10的数字前加一个‘0’
	    h = checkTime(h);
	    m = checkTime(m);
	    s = checkTime(s);
	    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
	    t = setTimeout(function(){startTime()},500);
    }

    function checkTime(i){
	    if (i<10){
		    i="0" + i;
	    }
	    return i;
    }
</script>


</body>
</html>

生成页面效果

1、创建日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

有四种方式初始化日期:

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

上面的参数大多数都是可选的，在不指定的情况下，默认参数是0。

实例化一个日期的一些例子：

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
//Mon Oct 13 1975 11:13:00 GMT+0800 (中国标准时间)
var d2 = new Date(75,9,13)
//Mon Oct 13 1975 00:00:00 GMT+0800 (中国标准时间)
var d3 = new Date(75,9,13,6,6,6)
//Mon Oct 13 1975 06:06:06 GMT+0800 (中国标准时间)

2、设置日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：

var myDate=new Date();
myDate.setFullYear(2010,0,14);

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

3、比较日期

日期对象也可用于比较两个日期。

下面的代码将当前日期与 2100 年 1 月 14 日做了比较：

var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
    alert("今天是" + x + "之前");
}
else
{
    alert("今天是" + x + "之后");
}

4、补充知识

如何把日期格式化为指定格式？

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;
}

document.getElementById("demo1").innerHTML=new Date(79,5,24,11,33,0).format("MM月dd日"); 

var now = new Date();
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo2").innerHTML=new Date().format("yyyy年MM月dd日");
var nowStr = now.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("demo3").innerHTML=new Date().format("yyyy年MM月dd日hh小时mm分ss秒");

其他格式示例：

alert(new Date().format("yyyy年MM月dd日"));
alert(new Date().format("MM/dd/yyyy"));
alert(new Date().format("yyyyMMdd"));
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));
posted @   无关风月7707  阅读(41)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript数据类型转换
· JS高级教程之JavaScript对象
· JavaScript Date（日期） 对象
· JavaScript date日期
· JavaScript 学习-20.Date 日期对象
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示