javascript中对Date类型的常用操作小结

Javascript中对Date类型的常用操作小结

创建Date对象

在 Javascript 中创建 Date 对象的方式有以下几种:

  1. 使用 new Date() 构造函数创建一个当前时间的 Date 对象。

    let currentDate = new Date();
    
  2. 使用 new Date(value) 构造函数创建指定时间的 Date 对象,value 为一个代表时间的数值或者字符串表达式。

    let date1 = new Date('2021-07-09');
    let date2 = new Date(2021, 6, 9, 10, 30, 0);
    

获取或设置日期/时间值

Date 对象有一些可用于获取或设置日期/时间值的方法,例如:

  1. getTime():获取一个日期对象的时间值,以毫秒为单位。

    let currentDate = new Date();
    console.log(currentDate.getTime()); // 输出当前时间的时间戳
    
  2. setTime():设置一个日期对象的时间值,以毫秒为单位。

    let currentDate = new Date();
    currentDate.setTime(currentDate.getTime() + 60 * 60 * 1000); // 将当前时间加上一小时
    console.log(currentDate); // 输出当前时间加上一小时后的时间对象
    
  3. getFullYear()getMonth()getDate()getDay()getHours()getMinutes()getSeconds()getMilliseconds() 分别用于获取一个日期对象的年、月、日、星期、时、分、秒、毫秒等信息。

    let currentDate = new Date();
    console.log(currentDate.getFullYear()); // 输出当前时间的年份
    console.log(currentDate.getMonth() + 1); // 输出当前时间的月份
    console.log(currentDate.getDate()); // 输出当前时间的日期
    console.log(currentDate.getDay()); // 输出当前时间是星期几
    console.log(currentDate.getHours()); // 输出当前时间的小时数
    console.log(currentDate.getMinutes()); // 输出当前时间的分钟数
    console.log(currentDate.getSeconds()); // 输出当前时间的秒数
    console.log(currentDate.getMilliseconds()); // 输出当前时间的毫秒数
    

还有一些方法用于设置指定值,例如:

  1. setFullYear(year, month?, date?)setMonth(month, date?)setDate(date)setHours(hour, min?, sec?, ms?)setMinutes(min, sec?, ms?)setSeconds(sec, ms?)setMilliseconds(ms) 分别用于设置一个日期对象的年、月、日、时、分、秒、毫秒等值。
    let currentDate = new Date();
    currentDate.setHours(10); // 将当前时间的小时数设为10
    console.log(currentDate); // 输出当前时间,但小时数为10
    

格式化输出日期/时间

JavaScript 中,Date 类型提供了多种不同的格式化日期/时间输出函数。其中,toLocaleDateString()toLocaleTimeString() 方法用于把时间对象转换成本地日期字符串和时间字符串。

    let currentDate = new Date();
    console.log(currentDate.toLocaleDateString()); // 输出当前时间的本地日期字符串
    console.log(currentDate.toLocaleTimeString()); // 输出当前时间的本地时间字符串

示例说明

示例1:手动创建日期对象

有时候我们需要手动创建一个日期对象并设置为某一天的开始/结束时间。例如:

function getStartOfDay(date) {
  date.setHours(0);
  date.setMinutes(0);
  date.setSeconds(0);
  date.setMilliseconds(0);
  return date;
}

function getEndOfDay(date) {
  date.setHours(23);
  date.setMinutes(59);
  date.setSeconds(59);
  date.setMilliseconds(999);
  return date;
}

let now = new Date();
let startOfDay = getStartOfDay(now);
let endOfDay = getEndOfDay(now);
console.log(startOfDay.toLocaleString()); // 输出当前日期的开始时间
console.log(endOfDay.toLocaleString()); // 输出当前日期的结束时间

在这个示例中,我们手动创建了一个 Date 对象 now,然后使用 getStartOfDay()getEndOfDay() 函数把 now 对象分别设置为当天的开始时间和结束时间,最后输出这两个时间。

示例2:倒计时

倒计时在网页开发中非常常见,我们可以使用 JavaScript 中的 Date 对象来实现。例如,下面这段代码实现了一个倒计时的效果:

<p id="demo"></p>

<script>
  // 设置倒计时结束的时间
  let countDownDate = new Date("August 31, 2021 23:59:59").getTime();

  // 每一秒更新一次倒计时
  let x = setInterval(function() {
    // 获取当前时间戳
    let now = new Date().getTime();

    // 计算距离倒计时结束还有多少毫秒
    let distance = countDownDate - now;

    // 计算倒计时剩余的小时、分钟、秒、毫秒数
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
    let milliseconds = distance % 1000;

    // 把计算出来的时间输出到网页上
    document.getElementById("demo").innerHTML = hours + "h "
    + minutes + "m " + seconds + "s " + milliseconds + "ms ";

    // 如果倒计时结束,清除倒计时计时器
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").innerHTML = "EXPIRED";
    }
  }, 10); // 每隔10毫秒更新一次倒计时
</script>

在这个示例中,我们使用 setInterval 函数每隔10毫秒计算一次距离倒计时结束还有多少时间,然后把计算出来的小时、分钟、秒、毫秒数输出到网页上。当倒计时结束后,清除计时器并把文本改为“EXPIRED”。

阅读剩余 65%

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript中对Date类型的常用操作小结 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript 对象、函数和继承

    JavaScript 中的对象和函数都是重要的概念。对象是一组键值对的集合,可以包含函数,而函数是执行任务和返回值的代码块。继承是一种机制,它允许我们在一个对象上定义对象的属性和属性行为,并通过 “继承”,使一个对象能够访问另一个对象的属性和方法。 JavaScript 对象 JavaScript 中的对象是由花括号 {} 包裹的一组键值对。例如: let …

    JavaScript 2023年5月27日
    00
  • jQuery焦点图切换简易插件制作过程全纪录

    下面我将详细讲解“jQuery焦点图切换简易插件制作过程全纪录”。 一、前言 做一个好用的网站,除了有好的设计外,交互效果和动画效果会让用户的体验更好。当我们需要制作焦点图时,可以选择使用第三方的插件。但为了更好地理解焦点图的制作原理,我们可以自己来手写一个简易焦点图切换插件。 二、需求分析 在开始编码之前,我们需要考虑一下插件的需求: 可以实现无缝轮播焦点…

    JavaScript 2023年6月11日
    00
  • cookie的secure属性详解

    Cookie的secure属性详解 什么是Cookie? Cookie是一种由Web服务器存储在Web浏览器上的小文本文件。当Web浏览器向同一服务器发出请求时,会将Cookie发送回服务器。在服务器处理请求时,Cookie提供了一种追踪用户的机制,以便在多个页面或跨站点之间保持状态信息。因此,Cookie是Web应用程序的重要组成部分。 Cookie的Se…

    JavaScript 2023年6月11日
    00
  • 理解javascript中的严格模式

    理解 JavaScript 中的严格模式需要掌握以下内容: 严格模式是什么; 为什么要使用严格模式; 如何开启严格模式; 严格模式下的限制和变化。 接下来我将逐一解释。 1. 严格模式是什么 简单来说,严格模式是 ES5 中新增的一种执行模式,它使得 JavaScript 引擎在执行 JavaScript 代码时,会对一些不规范的语法和疏忽进行提示或者直接报…

    JavaScript 2023年5月18日
    00
  • HTML中不支持静态Expando的元素的问题

    “HTML中不支持静态Expando的元素的问题”指的是在某些HTML元素上添加特定属性或JS对象时,如果该元素不支持静态Expando,则可能会导致问题。通常,此类问题表现为少量JS工作正常,大量JS工作不正常。 以下是解决“HTML中不支持静态Expando的元素的问题”的攻略: 1.了解什么是静态Expando Expando是为DOM元素添加的自定义…

    JavaScript 2023年6月10日
    00
  • JS数组(Array)处理函数整理

    JS数组(Array)处理函数整理 在JavaScript中,数组(Array)是非常常见且重要的数据类型。它可以用来存储一组有序的数据,方便数据的访问以及数据的操作。本文将对常用的JS数组处理函数进行整理,并给出一些示例说明。 forEach() forEach()方法是一个数组的遍历方法,可以用来依次访问数组中的元素,并对每一个元素执行给定的操作。用法如…

    JavaScript 2023年5月27日
    00
  • IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析

    针对“IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别实例分析”,我们可以从以下几个方面进行讲解: URL编码的区别 在使用Ajax传递参数时,中文参数需要进行URL编码,然后再进行发送。而IE浏览器和FF浏览器对URL编码的处理是不同的: IE浏览器:使用escape()函数对中文参数进行编码。 FF浏览器:使用encodeURIComponen…

    JavaScript 2023年5月19日
    00
  • js定义类的几种方法(推荐)

    JS定义类的几种方法是现代JS开发中必须了解的内容。这里我们将讲解4种主要的定义类的方法,并且推荐其中的2种。 1. 原型链方式 原型链方式是JS类的基础知识,也是最古老的一种JS定义类的方式。它通过创建一个构造函数和相应的原型链对象来实现类的定义和实例化。以下是一个简单的示例: function Person(name, age) { this.name …

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部