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日

相关文章

  • 基于JQuery的cookie插件

    关于基于JQuery的cookie插件,下面是一个完整的攻略: 简介 JQuery Cookie插件是一个方便的处理浏览器cookies的小工具,它可以用于在客户端存储和获取cookie,并且拥有设置cookie的过期时间等功能。 安装 安装JQuery Cookie插件非常简单,只需要在html文件引入jQuery和jQuery Cookie的js文件即可…

    JavaScript 2023年6月11日
    00
  • JavaScript前端超时异步操作完美解决过程

    JavaScript前端超时异步操作完美解决需要使用到Promise和async/await两种技术,下面我会分几个步骤来详细讲解: 第一步:了解问题 前端异步请求是常见的操作,但遇到超时问题需要进行特殊处理。通常情况下采用回调函数或者Promise来解决超时问题,但是它们都存在一些缺点,例如回调函数可能会导致回调地狱,而Promise虽然避免了回调地狱的问…

    JavaScript 2023年5月18日
    00
  • javascript对象小结

    Javascript对象小结 Javascript中的对象是一种复合的数据类型,它可以包含多个属性,每个属性可以是任意类型的数据。本文将对Javascript对象进行一些总结,包括如何创建对象、如何访问对象属性等。 创建对象 1. 使用字面量 使用字面量可以方便地创建一个对象,只需要使用一对大括号,并在其中添加多个属性即可。 var person = { n…

    JavaScript 2023年5月18日
    00
  • JavaScript中string对象

    下面我来为你详细讲解JavaScript中string对象的完整攻略。 概述 JavaScript中的字符串属于基本数据类型,但使用字符串时需要用到string对象来操作字符串,实现对字符串的读取、替换、删除、搜索等操作。 创建字符串 在JavaScript中,可以使用双引号(“”)或单引号(”)来创建字符串字面量。同时,也可以使用String()函数来将…

    JavaScript 2023年5月19日
    00
  • vue-router 2.0 跳转之router.push()用法说明

    来讲解一下“vue-router 2.0 跳转之router.push()用法说明”的完整攻略。 vue-router 2.0 跳转之router.push()用法说明 router.push() 是 vue-router 用来跳转页面的一个方法。在通常的前后端分离开发中,当我们需要跳转页面时,只需要使用 router.push() 就可以了。 这个方法接受…

    JavaScript 2023年6月11日
    00
  • JavaScript实现给定时间相加天数的方法

    接下来我将为你详细讲解“JavaScript实现给定时间相加天数的方法”的完整攻略。 问题描述 在实际开发中,我们常常需要对日期进行加减操作。比如,给定一个日期和一个整数days,要求计算出days天之后的日期是多少。本篇文章主要介绍JavaScript实现给定时间相加天数的方法。 解决方案 JavaScript日期对象提供了一些实用的方法,可以方便地处理日…

    JavaScript 2023年5月27日
    00
  • 原生JS实现多条件筛选

    原生JS实现多条件筛选的完整攻略如下: 1. HTML结构 首先,我们需要搭建HTML结构,例如: <div> <label for="input1">条件1:</label> <input type="text" id="input1"> </…

    JavaScript 2023年6月11日
    00
  • javascript RegExp multiline多行匹配影响的^

    JavaScript的正则表达式是一类对文本进行模式匹配的工具,其中RegExp对象是正则表达式的表示。 在正则表达式中,有一些特殊字符和元字符,用于匹配特定的文本,只要掌握这些特殊字符和元字符,就可以更加灵活和高效的处理文本。 其中^是表示字符串的起始位置,在单行模式中表示匹配以目标字符串开始的字符串,而在多行模式中,^匹配每行的起始位置。 multili…

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