对于日期对象的基本操作

最新推荐文章于 2022-10-25 09:29:29 发布

Zack Not In Amoy

最新推荐文章于 2022-10-25 09:29:29 发布

阅读量134

点赞数

分类专栏：项目实用小片段文章标签：日期转换时间格式 JavaScript 实时显示字符串操作

本文链接：https://blog.csdn.net/No_Bug_Please/article/details/122991425

版权

项目实用小片段专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在项目过程中经常会对日期格式进行一个处理，下面有两种情况：

存在已经知道的日期，希望转换成客户的需求并传递给后台，也就是对已有的日期格式进行加工
时间是客户端的本地时间，会时刻改变，我们需要把日期变成一个符合客户需求的日期格式

第一种情况：

let time = '2022-2-15 17:24:50'
//将时间字符串变为自己需要呈现的格式 如：
//2022年2月15日 17时25分12秒
//2022年2月15日
//02/15 17:25
//...

//1.replace写法
time.replace('-','年').replace('-','月').replace(' ','日').replace(':','时').replace(':','分')+"秒"

//2.获取年月日小时分钟秒这几个值后，最后想拼成什么效果就拼成什么效果
//基于indexOf获取索引，基于substring一点点截取
    let time = '2022-2-15 17:35:04'
    let indexY = time.indexOf('-')//年的索引
    let indexM = time.lastIndexOf('-')//月份索引
    let indexD = time.lastIndexOf(' ')//日索引
    let indexClo = time.indexOf(':')//小时索引
    let indexMin = time.lastIndexOf(':')//分钟索引
    let year = time.substring(0,indexY)//获取年份
    let month = time.substring(indexY+1,indexM)//获取月份
    let day = time.substring(indexM+1,indexD)//获取日期
    let clock = time.substring(indexD+1,indexClo)//获取小时
    let minute = time.substring(indexClo+1,indexMin)//获取分钟
    let seconds = time.substring(indexMin+1)//获取秒
    console.log(year,month,day,clock,minute,seconds)

//基于split获方法进行一项一项拆分
    let arr = time.split(' ')//['2022-2-15', '17:35:04']
    let bigTime = arr[0].split('-')//['2022', '2', '15']
    let dateTime = arr[1].split(':')//['17', '35', '04']
   //利用正则开挂：
    let arr = time.split(/(?: |-|:)/g) //['2022', '2', '15', '17', '35', '04']
   //补充个方法，不足两位数补0
    let addZero = val => val.length<2? '0'+val : val;
    time = arr[0] + "年" + addZero(arr[1]) + "月" + addZero(arr[2]) + "日"
		console.log(time)//2022年02月15日

第二种情况：

<!--时钟案例-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #clockBox{
      position: absolute;
      right: 0;
      top: 0;
      padding: 3px 15px;
      line-height: 46px;
      font-size: 16px;
      color: white;
      /* 设置背景渐变色 */
      background: black;
      background: -webkit-linear-gradient(top left,#ffa5a5,#854ae5,#663fbb);
    }
  </style>
</head>
<body>
  <div id="clockBox">
    2022年2月17日 星期四 16:35
  </div>
  <script>
    let clockBox = document.getElementById("clockBox");
    /*
    queryDate:获得日期转换为想要的格式
      @params:
      @return:
    by Zack on 2022年2月17日
    */
   function queryDate(){
    let time = new Date(),
        year = time.getFullYear(),
        month = time.getMonth() + 1,
        day = time.getDate(),
        week = time.getDay(),
        hours = time.getHours(),
        minutes = time.getMinutes(),
        seconds = time.getSeconds();
    let result = year + "年" + addZero(month) + "月" + addZero(day) + "日";

    let weekArr = ['日','一','二','三','四','五','六']
    result += " 星期" + weekArr[week] + " "
    result += addZero(hours) + ":" + addZero(minutes) + ":" + addZero(seconds)
    clockBox.innerHTML = result
   }
   //定时器控制运动：每隔1000ms执行一次queryDate方法
   setInterval(queryDate, 1000);
   /*
    addZero:不足两位数不零
      @params: 
        value 需要补0的值
      @return：
        补完后的vlaue
    by Zack on 2022年2月17日
   */
  function addZero(val){
    val = Number(val)
    return val <10 ? "0" + val : val
  }

  </script>
</body>
</html>