React 如何使用时间戳计算得到开始和结束时间戳

 更新时间:2023年09月22日 15:35:13   作者:zhoupenghui168  
这篇文章主要介绍了React 如何拿时间戳计算得到开始和结束时间戳,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

获取需要的时间戳(开始 and 结束时间戳) 调用如下方法就行:

function getWantTimestamp(props) {
  //当前时间
  const nowDate = parseInt((new Date().getTime() / 1000).toString()); //当前时间
  switch (props) {
    // 当前时间时间戳
    case "nowData": {
      return nowDate;
    }
    // 当前零点得时间戳
    case "nowZero": {
      let nowZero = nowDate - (nowDate % 86400) - 3600 * 8;
      return nowZero;
    }
    // 过去24小时的时间戳
    case "formerlyDay": {
      let formerlyDay = nowDate - 86400;
      return formerlyDay;
    }
    // 昨天的零点的时间戳
    case "yesterdayZero": {
      let yesterdayZero = nowDate - (nowDate % 86400) - 3600 * 8 - 3600 * 24;
      return yesterdayZero;
    }
    // 本周星期一零点的时间戳
    case "thisMondayZero": {
      let nowThisWeek = new Date().getDay(); //获取当前周
      let a = nowDate - (nowThisWeek - 1) * 86400; //得到当前时间到这周
      let thisMondayZero = a - (a % 86400) - 3600 * 8;
      return thisMondayZero;
    }
    // 上周星期一零点的时间戳
    case "lastMondayZero": {
      let nowThisWeek = new Date().getDay(); //获取当前周
      let a = nowDate - (nowThisWeek - 1) * 86400; //得到当前时间到这周
      let thisMondayZero = a - (a % 86400) - 3600 * 8;
      let lastMondayZero = thisMondayZero - 86400 * 7;
      return lastMondayZero;
    }
    // 过去7天的时间戳
    case "formerlySevenDay": {
      let formerlySevenDay = nowDate - 86400 * 7;
      return formerlySevenDay;
    }
    // 本月开始第一天零点的时间戳
    case "thisMonthBeginZero": {
      let MonthDate: any = new Date();
      MonthDate.setDate(1); //set设置时间
      MonthDate.setHours(0);
      MonthDate.setSeconds(0);
      MonthDate.setMinutes(0);
      let thisMonthBeginZero = parseInt((MonthDate / 1000).toString());
      return thisMonthBeginZero;
    }
    // 过去30天的时间戳
    case "formerlyThirtyDays": {
      let formerlyThirtyDays = nowDate - 86400 * 30;
      return formerlyThirtyDays;
    }
    // 上个月的零点的时间戳
    case "lastMonthDayZero": {
      let nowMonthDate: any = new Date();
      let getMonth = nowMonthDate.getMonth() + 1;
      nowMonthDate.setMonth(getMonth - 2);
      nowMonthDate.setDate(1); //set设置时间
      nowMonthDate.setHours(0);
      nowMonthDate.setSeconds(0);
      nowMonthDate.setMinutes(0);
      let lastMonthDayZero = parseInt((nowMonthDate / 1000).toString());
      return lastMonthDayZero;
    }
    // 今年开始第一天零点的时间戳
    case "thisYearDayZero": {
      let yearDate: any = new Date();
      yearDate.setMonth(0);
      yearDate.setDate(1); //set设置时间
      yearDate.setHours(0);
      yearDate.setSeconds(0);
      yearDate.setMinutes(0);
      let thisYearDayZero = parseInt((yearDate / 1000).toString());
      return thisYearDayZero;
    }
    // 过去12个月的时间戳
    case "formerlyTwelveYearZero": {
      let now12Date: any = new Date();
      let getYear12 = now12Date.getFullYear();
      now12Date.setYear(getYear12 - 1);
      let formerlyTwelveYearZero = parseInt((now12Date / 1000).toString());
      return formerlyTwelveYearZero;
    }
    // 去年开始第一天的时间戳
    case "lastYearDayZero": {
      let nowYearDate: any = new Date();
      let getYear = nowYearDate.getFullYear();
      nowYearDate.setYear(getYear - 1);
      nowYearDate.setMonth(0);
      nowYearDate.setDate(1); //set设置时间
      nowYearDate.setHours(0);
      nowYearDate.setSeconds(0);
      nowYearDate.setMinutes(0);
      let lastYearDayZero = parseInt((nowYearDate / 1000).toString());
      return lastYearDayZero;
    }
    default: {
      console.log("时间参数错误");
      return 0;
    }
  }
}

调用getWantTimestamp()方法就能得到需要的时间戳:

getWantTimestamp("nowData")//nowData是switch的判断的参数

 计算当前时间到今晚23:59:59的时间戳:

//当前23:59:59秒时间戳
let today = new Date(new Date().toLocaleDateString()).getTime() + 24*60*60*1000-1
//当前时间戳
let nowDate = parseInt((new Date().getTime()).toString());
//当前时间距离23:59:59秒的时间戳差值
console.log((today - nowDate) / 1000));

动态获取当前年月日时分秒:

import React, { useState, useEffect } from 'react';
function CurrentDateTime() {
  const [currentDateTime, setCurrentDateTime] = useState(new Date());
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentDateTime(new Date());
    }, 1000); // 每秒更新一次
    return () => {
      clearInterval(interval);
    };
  }, []);
  const year = currentDateTime.getFullYear();
  const month = currentDateTime.getMonth() + 1; // 月份从 0 开始,因此需要加 1
  const date = currentDateTime.getDate();
  const hours = currentDateTime.getHours();
  const minutes = currentDateTime.getMinutes();
  const seconds = currentDateTime.getSeconds();
  return (
    <div>
      <p>当前年月日: {year}-{month < 10 ? `0${month}` : month}-{date}</p>
      <p>当前时分秒: {hours}:{minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds}</p>
    </div>
  );
}
export default CurrentDateTime;

到此这篇关于React 如何拿时间戳计算得到开始和结束时间戳的文章就介绍到这了,更多相关React计算开始和结束时间戳内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React-intl 实现多语言的示例代码

    React-intl 实现多语言的示例代码

    本篇文章主要介绍了React-intl 实现多语言的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React组件实例三大核心属性State props Refs详解

    React组件实例三大核心属性State props Refs详解

    组件实例的三大核心属性是:State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this,也就不存在组件实例这种说法,但由于它的特殊性(函数可以接收参数),所以存在Props这种属性
    2022-12-12
  • 30分钟带你全面了解React Hooks

    30分钟带你全面了解React Hooks

    Hooks是一种函数,该函数允许您从函数式组件 “勾住(hook into)”React状态和生命周期功能。Hooks在类内部不起作用 - 它们允许你无需类就使用 React。
    2021-05-05
  • React如何解决样式污染问题

    React如何解决样式污染问题

    这篇文章主要介绍了React如何解决样式污染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 使用Electron构建React+Webpack桌面应用的方法

    使用Electron构建React+Webpack桌面应用的方法

    本篇文章主要介绍了使用Electron构建React+Webpack桌面应用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React路由组件传参的三种方式(params、search、state)

    React路由组件传参的三种方式(params、search、state)

    本文主要介绍了React路由组件传参的三种方式,主要包括了params、search、state,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • React新扩展函数setState与lazyLoad及hook介绍

    React新扩展函数setState与lazyLoad及hook介绍

    这篇文章主要介绍了React新扩展函数setState与lazyLoad及hook,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • React应用框架Dva数据流向原理总结分析

    React应用框架Dva数据流向原理总结分析

    这篇文章主要为大家介绍了React 应用框架Dva数据流向原理总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React模仿网易云音乐实现一个音乐项目详解流程

    React模仿网易云音乐实现一个音乐项目详解流程

    这篇文章主要介绍了React模仿网易云音乐实现一个音乐项目的详细流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Remix路由模块输出对象loader函数详解

    Remix路由模块输出对象loader函数详解

    这篇文章主要为大家介绍了Remix路由模块输出对象loader函数详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-04-04

最新评论