备案控制台
开发者社区 开发与运维 文章 正文

JS(第十二课)JS中的日期对象

2023-07-16 77
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS(第十二课)JS中的日期对象

JS中的日期对象

Date 对象 的作用

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

创建 Date 对象： new Date()

以下四种方法同样可以创建 Date 对象：创建对象语法如下

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

 <script>
     // 属性
     // Sat Oct 22 2022 20: 33: 43 GMT + 0800(中国标准时间)
     // Tue Nov 22 2022 00: 00: 00 GMT + 0800(中国标准时间)
     // Tue Nov 22 2022 20: 26: 30 GMT + 0800(中国标准时间)
     // Mon Jun 20 2022 22: 34: 23 GMT + 0800(中国标准时间)
     // Sat Oct 22 2022 22: 34: 23 GMT + 0800(中国标准时间)
     // 2022
     // 日期调用的对象信息内容
     // Sat Oct 22 2022 20: 33: 43 GMT + 0800(中国标准时间)
     var NewDate = new Date();
     document.write(NewDate + "<br>");
     // Tue Nov 22 2022 00: 00: 00 GMT + 0800(中国标准时间)
     var NewDate1 = new Date(2022, 10, 22);
     document.write(NewDate1 + "<br>")
     //Tue Nov 22 2022 20: 26: 30 GMT + 0800(中国标准时间)
     var NewDate2 = new Date(2022, 10, 22, 20, 26, 30);
     document.write(NewDate2 + "<br>")
     // Mon Jun 20 2022 22: 34: 23 GMT + 0800(中国标准时间)
     var NewDate3 = new Date("Jun 20,2022 22:34:23")
     document.write(NewDate3 + "<br>")
     // Sat Oct 22 2022 22: 34: 23 GMT + 0800(中国标准时间)
     var NewDate4 = new Date("2022/10/22/ 22:34:23")
     document.write(NewDate4 + "<br>")
     // 2022
     var NewDate5 = new Date();
     // 增加属性
     Date.prototype.mark = NewDate5.getFullYear()
     document.write(NewDate5.mark + "<br>")
     if (NewDate5.constructor == Date) {
         // 2022
         // 日期调用的对象信息内容
         document.write("日期调用的对象信息内容" + "<br>")
     }
 </script>

Date 对象属性

属性 描述
constructor 返回对创建此对象的 Date 函数的引用。
prototype 使您有能力向对象添加属性和方法。 
  var NewDate5 = new Date();
     // 增加属性
     Date.prototype.mark = NewDate5.getFullYear()
     document.write(NewDate5.mark + "<br>")
     if (NewDate5.constructor == Date) {
         // 2022
         // 日期调用的对象信息内容
         document.write("日期调用的对象信息内容" + "<br>")
     }

 <script>
     // 16个方式
     var myDate = new Date();
     var a3 = myDate.getDate();
     var a4 = myDate.getDay();
     var a2 = myDate.getMonth();
     var a1 = myDate.getFullYear();
     var a = myDate.getYear();
     var a6 = myDate.getHours();
     var a7 = myDate.getMinutes();
     var a8 = myDate.getSeconds();
     var a9 = myDate.getMilliseconds();
     var a13 = myDate.getTime();
     var a14 = myDate.toTimeString();
     var a15 = myDate.toDateString();
     var a16 = myDate.toGMTString();
     var a17 = myDate.toUTCString();
     var a10 = myDate.toLocaleDateString();
     var a11 = myDate.toISOString();
     var a12 = myDate.toGMTString();
     // 设置值
     document.write(a1 + "<br>");
     document.write(a2 + "<br>");
     document.write(a3 + "<br>");
     document.write(a4 + "<br>");
     // document.write(a5 + "<br>");
     document.write(a6 + "<br>");
     document.write(a7 + "<br>");
     document.write(a8 + "<br>");
     document.write(a9 + "<br>");
     document.write(a10 + "<br>");
     document.write(a11 + "<br>");
     document.write(a12 + "<br>");
     document.write(a13 + "<br>");
     document.write(a14 + "<br>");
     document.write(a15 + "<br>");
     document.write(a16 + "<br>");
     document.write(a17 + "<br>");
 </script>

运行结果:

Date 对象方法 总结在官网上都可以找到

image.png

image.png

image.png

image.png

案例实操一  2022年倒计时

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>2021年倒计时</title>
    <style type="text/css">
      .rty{
        color: red;
      }
      .tyu{
        color: #C71585;
      }
    </style>
  </head>
  <body>
    <h1 id="res"></h1>
    <script type="text/javascript" class="rty">
      function test(year,month,day){
        var end =new Date(year,month-1,day);
        var leftTime=end.getTime()-Date.now();
        var day  =Math.floor(leftTime/1000/60/60/24);
        var h =Math.floor(leftTime/1000/60/60%24);
        var  m =Math.floor(leftTime/1000/60%60);
        var s =Math.floor(leftTime/1000/60);
        var str="距2022年结束还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒";
      res.innerHTML=str 
      }
      setInterval("test(2022,12,31)",1000);
    </script>
  </body>
</html>

案例二实操 计算明年元旦的天数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=sc, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var date1=new Date()
        var three=date1.getFullYear()+1;
        date1.setFullYear(three);
        date1.setMonth(0);
        date1.setDate(1);
        var date2=new Date();
        var date3=date1.getTime()-date2.getTime();
        var days=Math.ceil(date3/(24*60*60*10000));
        console.log(days)
    </script>
</body>
</html>

内容通俗易懂不需要过多的解释

文章标签：
JavaScript
关键词：
JavaScript对象
JavaScript日期
t75yjb52rsccc
目录
相关文章
yqcoder
|
23小时前
|
JSON 前端开发 JavaScript
前端 JS 经典：JSON 对象
前端 JS 经典：JSON 对象
yqcoder
7 0
yqcoder
|
1天前
|
前端开发 JavaScript
前端 js 经典：原型对象和原型链
前端 js 经典：原型对象和原型链
yqcoder
11 1
老板这功能得加钱
|
1天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理
老板这功能得加钱
9 0
yuanzhengme
|
1天前
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
yuanzhengme
13 1
阿珊和她的猫
|
2天前
|
设计模式 存储 消息中间件
JavaScript观察者模式：实现对象间的事件通信！
JavaScript观察者模式：实现对象间的事件通信！
阿珊和她的猫
7 1
阿珊和她的猫
|
2天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式：实现对象共享属性和方法！
JavaScript原型模式：实现对象共享属性和方法！
阿珊和她的猫
8 2
球球不吃虾
|
2天前
|
JavaScript 前端开发 开发者
深入理解JavaScript对象创建
深入理解JavaScript对象创建
球球不吃虾
8 3
蓝易云
|
3天前
|
JavaScript 前端开发
js用Date对象处理时间
以上就是JavaScript中Date对象处理时间的一些基本方法。
蓝易云
12 6
龙大吉
|
3天前
|
JavaScript 前端开发
在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象，它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性，指向原型对象。利用原型，我们可以向所有实例添加方法和属性，实现继承。例如，我们定义一个`Person`函数，向其原型添加`greet`方法，然后创建实例`john`和`jane`，它们都能调用这个方法。尽管可以直接在原型上添加方法，但推荐在构造函数内部定义以封装数据和逻辑。
龙大吉
18 2
众所周知
|
3天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM（文档对象模型）
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素（getElementById, getElementsByClassName等）、修改内容（innerHTML, innerText, textContent）、改变属性、添加/删除元素（appendChild, removeChild）和调整样式。此外，addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
众所周知
9 2

热门文章

最新文章

  • 1
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 4
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 8
    【专栏】Vue.js和Node.js如何结合构建现代Web应用
  • 9
    JavaScript 权威指南第七版（GPT 重译）（一）(1)
  • 10
    JavaScript 权威指南第七版（GPT 重译）（五）(2)
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    147
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    18
  • 3
    描述 JavaScript 中的垃圾回收机制。
    23
  • 4
    如何使用 JavaScript 操作 DOM？
    20
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    22
  • 6
    JavaScript 中的数组方法有哪些？
    11
  • 7
    JS设置日期为0时0分0秒
    36
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    27
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    23
  • 10
    深入理解JavaScript中的闭包与作用域链
    10

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • Node.js 入门教程文档
  • Node.js 入门与实战

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考