处理获取当前日期---------------年月日//时分秒

当前时间,先分组匹配,以数组下标索引匹配定义的汉字进行替换

处理日期方法

/* 日期格式化 */
const formatTime = function formatTime(time, template) {
    if (typeof time !== "string") {
        time = new Date().toLocaleString('zh-CN', { hour12: false });
    }
    if (typeof template !== "string") {
        template = "{0}年{1}月{2}日 {3}:{4}:{5}";
    }
    let arr = [];
    if (/^\d{8}$/.test(time)) {
        let [, $1, $2, $3] = /^(\d{4})(\d{2})(\d{2})$/.exec(time);
        arr.push($1, $2, $3);
    } else {
        arr = time.match(/\d+/g);
    }
    return template.replace(/\{(\d+)\}/g, (_, $1) => {
        let item = arr[$1] || "00";
        if (item.length < 2) item = "0" + item;
        return item;
 

  导入定义的工具方法

import _ from '../assets/utils'

import React, { useMemo, useEffect } from 'react'
import timg from '../assets/images/timg.jpg'
import './HomeHead.less'
import { connect } from 'react-redux'
import action from '../store/action'
import { useNavigate } from 'react-router-dom'

const HomeHead = function HomeHead(props) {
  const navigate = useNavigate()

  /* 计算时间中的月和日 */
  let { today, info, queryUserInfoAsync } = props
  let time = useMemo(() => {
    //通过正则取数字
    let [, year, month, day] = today.match(/^\d{0}(\d{4})(\d{2})(\d{2})$/),
      area = [
        '零','一', '二', '三', '四','五','六','七','八','九','十','十一','十二',
      ]
    return {
      year: +year + '年',
      month: area[+month] + '月',
      day: +day + '日',
    }
  }, [today])

  // 第一次渲染完:如果info中没有信息,我们尝试派发一次,获取到登陆者信息
  useEffect(() => {
    if (!info) {
      queryUserInfoAsync()
    }
  }, [])

  return (
    <header className="home-head-box">
      {/* 时间,标题 */}
      <div className="info">
        <div className="time">
          <span>{time.year}</span>
          <div className="month_day">
            <span>{time.month}</span>
            <span>{time.day}</span>
          </div>
        </div>
        <h2 className="title">知乎日报</h2>
      </div>
      {/* {头像} */}
      <div
        className="picture"
        onClick={() => {
          navigate('/personal')
        }}
      >
        <img src={info ? info.pic : timg} alt="" />
      </div>
    </header>
  )
}
export default connect((state) => state.base, action.base)(HomeHead)

截取获取当前时分秒

new Date().toLocaleString().split('/').join('').slice(-8)
'16:30:09'

截取掉冒号,获取当前时分秒

new Date().toLocaleString().split('/').join('').slice(-8).split(':').join('')

//'163037'


let time = new Date().toLocaleString().split('/').join('').slice(-8).split(':').join('')
 
console.log(time.match(/^\d{0}(\d{2})(\d{2})(\d{2})$/));

使用数组解构接收,

 
 
let time = new Date().toLocaleString().split('/').join('').slice(-8).split(':').join('')
let [,hour,minute,second]= time.match(/^\d{0}(\d{2})(\d{2})(\d{2})$/)
console.log(hour,minute,second);

截取掉/ (斜杠)获取当前年月日

new Date().toLocaleString().split('/').join('').slice(0,8)
//'20231212 '
new Date().toLocaleString().split('/').join('').slice(0,8).match(/^\d{0}(\d{4})(\d{2})(\d{2})$/)

使用数组解构接收,

   let time = new Date().toLocaleString().split('/').join('').slice(0,8).match(/^\d{0}(\d{4})(\d{2})(\d{2})$/)
      let [, year, month, day] = time
      
      console.log(year, month, day);

//不需要的直接 , 为空就行

注意:获取的是string类型,如果需要数字类型,使用+号转义

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/241893.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【学习笔记】Linux(基础知识)

第1章 Linux概况 1.1 Linux起源 四个重要的支柱: ①Unix操作系统; ②Minix操作系统; ③GNU计划; ④Internet网络。 1. Unix操作系统 UNIX的诞生 1971年,用汇编语言首先开发成功16位UNIX系统 1973年,用C语言重写了UNIX系统 创始人:Ken Thompson & Dennis Ritch…

phpstudy搭建WordPress教程

一、phpstudy新建配置WordPress 打开phpstudy&#xff0c;启动Apache&#xff08;或者Nginx&#xff09;和MySQL服务 来到数据库部分&#xff0c;点击[创建数据库]&#xff0c;填写新建数据库的名称&#xff0c;用户名以及密码&#xff0c;完成后点击确认 来到网站部分&#x…

mysql更新某个字段=这个字段+字符串

当我们像c#中用拼接执行sql语句时&#xff0c;如下&#xff1a; UPDATE abpusers set UserNameqyUserName where UserNameqy-wh 会出现以下错误&#xff1a; 在mysql中通过concat函数来实现 UPDATE abpusers set UserNameCONCAT(qy_,UserName) where UserNameqy-wh

逆向思考 C. Fence Painting

Problem - 1481C - Codeforces 思路&#xff1a;逆序考虑&#xff0c;因为每一块木板都是被最后一次粉刷所决定的。 从后往前开始&#xff0c;对于 c i c_i ci​来说&#xff0c; 如果这个颜色还有没有涂的木板&#xff0c;那么涂到其中一个木板即可如果这个颜色下没有未涂的…

“公益向善”|邦邦机器人积极传递企业责任感

2023年12月4日&#xff0c;由中山市场监督管理所党支部主办的“公益向善 支援接力 宪法在心中”主题活动在中山幸福里举办&#xff0c;邦邦机器人作为捐赠单位&#xff0c;用创新技术及产品赋能大众及公益&#xff0c;积极传递企业责任感&#xff0c;点亮向善之路。 邦邦机器人…

汽车电子 -- 时间同步

时间同步有两种形式&#xff0c;一种是NTP的网络校准时间&#xff0c;一种是可以CAN通信的时间同步。 一、NTP时间同步 参看&#xff1a;什么是NTP&#xff1f; 参看&#xff1a;NTP协议详解及C语言实现 网络时间协议NTP&#xff08;Network Time Protocol&#xff09;是TC…

搭建消息时光机:深入探究RabbitMQ_recent_history_exchange在Spring Boot中的应用【RabbitMQ实战 二】

&#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 搭建消息时光机&#xff1a;深入探究RabbitMQ_recent_history_exchange在Spring Boot中的应用 引言前言第一&#xff1a;开启插件支持第二&#xff1a;springboot整合第三&am…

js 转换为数组并返回(Array.of())

Array提供了方法直接将一组值转换为数组并返回 Array.of()方法 Array.of(1,2,3) 结果

哈工大《软件工程专业导论》复习指南

哈工大软件工程专业导论复习指南 文章目录 哈工大软件工程专业导论复习指南前言引言——软件工程专业导论课程引言第一章 软件工程专业初步认知第二章 软件体系结构与生命周期第三章 软件需求工程第四章 软件设计与实现第五章 软件质量与软件工程管理第六章 软件工程教育与职业…

Python码上行动系列丛书(由北京大学出版社出版)

前言 Python码上行动系列丛书火热来袭&#x1f4a5;&#x1f4a5;&#x1f4a5; 三册在手&#xff0c;Python全掌握&#xff01;无论是初学者还是进阶玩家&#xff0c;我们都有你想要的&#xff01; 让ChatGPT带你轻松入门Python编程&#xff0c;享受编程带来的乐趣&#xff0…

MATLAB——二维小波的单层分解

%% 学习目标&#xff1a;二维小波的单层分解 %% 二维小波适合图像处理和分析&#xff0c;将图像分解为4个图像 两个维度 低通&#xff0c;高通 clear all; close all; load woman.mat; %% which woman.mat Yind2gray(X,map); %将索引图像转换为灰度图像 [c…

C51--小车——L9110s电机驱动模块

电机模块开发&#xff1a; L9110s&#xff1a; 接通VCC&#xff0c;GND 模块电源指示灯亮。 IA1输入高电平&#xff0c;IA1输入低电平&#xff0c;【OA1 OB1】电机正转&#xff1b; IA1输入低电平&#xff0c;IA1输入高电平&#xff0c;【OA1 OB1】电机反转&#xff1b; IA2…

跨域解决方案详解

文章目录 同源策略PostMessageWebsocket跨域资源共享&#xff08;CORS&#xff09;两种请求简单请求基本流程withCredentials 属性 需预检的请求预检请求预检请求的回应浏览器的正常请求和回应示例 Nginx反向代理Node中间件代理搭建node代理服务使用现成的node代理服务 JSONP前…

JavaEE进阶学习: SpringBoot 日志文件

1.日志有什么用 日志的主要作用是记录系统的运行状态、事件和错误信息等。具体来说&#xff0c;日志可以用于以下几个方面&#xff1a; 故障排除&#xff1a;当系统出现故障或错误时&#xff0c;日志可以帮助开发人员定位问题的具体原因和位置&#xff0c;从而更快地修复系统。…

GB28181学习(十八)——图像抓拍

前言 本文主要介绍图像抓拍功能&#xff0c;通过自研的sip库&#xff08;mysipsdk.dll&#xff09;对接真实设备&#xff0c;使用http方式实现图像数据传输&#xff0c;最终达到图像抓拍与保存的目的。 基本要求 图像格式宜使用JPEG&#xff1b;图像分辨率宜采用与主码流相同…

初识人工智能,一文读懂贝叶斯优化和其他算法的知识文集(8)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

Backtrader 文档学习-Platform Concepts

Backtrader 文档学习-Platform Concepts 1.开始之前 导入backtrader &#xff0c;以及backtrader 的指示器、数据反馈的模块 。 import backtrader as bt import backtrader.indicators as btind import backtrader.feeds as btfeeds看看btind模块下有什么方法和属性&#x…

SpringBoot3-实现和注册拦截器

1、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.…

sylar高性能服务器-配置(P12-p14)内容记录

文章目录 p12&#xff1a;复杂类型解析一、方法函数二、结果展示 p13&#xff1a;复杂类型解析完善一、方法函数二、结果展示 p14&#xff1a;自定义类型解析一、方法函数二、小结 p12&#xff1a;复杂类型解析 ​ 本节内容主要针对完了配置类中对于复杂类型的转换。之前只实现…

JAVAEE-8-线程池

池 我们之前也接触过,比如说常量池,数据库连接池,线程池,进程池,内存池等等, 池的共性: 1.提前把要用的对象准备好 2.把用完的对象也不要立即释放,先留着以备下次使用 来提高效率!!! 最开始,进程能够解决并发编程的问题,因为频繁创建销毁进程的开销成本太大了,所以我们引…