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”。

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

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

相关文章

  • javascript系统时间设置操作示例

    下面是关于”JavaScript系统时间设置操作示例”的完整攻略。 1. 简介 时间是计算机世界中的基本元素,而JavaScript也提供了一些相关的API允许我们进行时间操作。系统时间设置是其中的一项,它可以帮助我们动态的调整JavaScript代码中的时间,也可以帮助我们进行一些测试与调试。 2. 设置系统时间 2.1 系统时间获取 在设置系统时间之前,…

    JavaScript 2023年5月27日
    00
  • 用Javascript 获取页面元素的位置的代码

    获取页面元素的位置是前端开发中的一个基本需求,Javascript提供了多种方法来获取元素的位置信息。下面是获取页面元素位置的代码攻略: 1. 通过getBoundingClientRect方法获取元素的位置 getBoundingClientRect方法是Javascript提供的获取元素位置的函数,它返回一个矩形对象,包括一个元素的左上角、右下角的坐标、…

    JavaScript 2023年6月10日
    00
  • js防抖函数和节流函数使用场景和实现区别示例分析

    JS防抖函数和节流函数是前端开发中常用的函数优化方法,可以有效提升页面性能和用户体验。它们的使用场景和实现区别如下: 防抖函数 防抖函数的作用是在函数触发频繁的情况下,限制函数执行的次数,确保函数在触发后的一定时间内只执行一次。 使用场景 防抖函数通常用于以下场景: 搜索框输入联想:用户在输入框中快速输入字符时,会触发搜索请求,而防抖函数可以限制请求发送的次…

    JavaScript 2023年5月28日
    00
  • 怎么使用javascript深度拷贝一个数组

    下面是详细讲解使用JavaScript深度拷贝一个数组的攻略。 什么是深度拷贝? JavaScript中的对象和数组都是引用类型,当我们对某个对象或数组进行赋值、传参、扩展等操作时,实际上是将其内存地址进行了操作。而如果我们希望得到一个完全独立的新对象或数组,且其值和原对象或数组相等,就需要进行深度拷贝操作。 一、使用JSON对象进行深度拷贝 JSON.st…

    JavaScript 2023年5月27日
    00
  • 详解Javascript ES6中的箭头函数(Arrow Functions)

    我可以为您详细讲解一下Javascript ES6中的箭头函数。 什么是箭头函数? 箭头函数,也被称为lambda函数,是ES6新引入的一种函数定义方式,使用 => 来定义函数,相比传统的函数定义有着更为简洁的语法。箭头函数语法如下所示: (param1, param2, …, paramN) => { statements } 其中,参数列…

    JavaScript 2023年5月27日
    00
  • js date 格式化

    当我们在使用Javascript时,经常需要对日期进行格式化操作。本篇攻略将介绍如何使用JS对日期进行格式化。 了解JS的Date对象 在进行日期格式化之前,我们需要先了解Javascript的Date对象。Date对象代表了时间戳,可以通过new操作符来实例化一个Date对象。例如: let now = new Date(); 使用toLocaleStri…

    JavaScript 2023年5月27日
    00
  • 如何使用JS在HTML中自定义字符串格式化

    要在HTML中自定义字符串格式化,我们通常使用JavaScript来实现。以下是使用JS在HTML中自定义字符串格式化的完整攻略: 1. String.prototype.format 方法 Javascript 的字符串对象 String.prototype 中提供了一个 format 方法,可以通过占位符的方式快速格式化字符串。 代码示例: const …

    JavaScript 2023年5月19日
    00
  • 微信小程序按钮点击动画效果的实现

    下面是关于“微信小程序按钮点击动画效果的实现”的完整攻略: 简介 在微信小程序中,用户交互体验至关重要。为了增强用户的交互体验,为小程序中按钮添加点击动画效果是非常必要的。本节将详细讲解如何实现一个简单的点击动画效果。 实现步骤 1.添加点击事件 首先,我们需要为按钮添加一个点击事件,这个很简单,只需要在 WXML 文件中绑定点击事件即可: <view…

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