JS根据当前时间获取指定时间相差多少时刻

先看效果图请添加图片描述
开始时间默认为当前时间,结束时间可以选择(默认过年的时间),这里求当前时间到某一段时间段相差多少时间。
话不多说上代码

html代码

    <div class="search-package">
      <div class="time-package">
        <span class="time-span">开始时间</span>
        <input type="datetime-local"
          disabled
          class="date-time"
          id="startTime">
      </div>
      <div class="time-package">
        <span class="time-span">结束时间</span>
        <input type="datetime-local"
          class="date-time"
          id="endTime">
      </div> 
      <div id="time"></div>
    </div>

css代码

  <style>
    #time {
    
    
      width: 300px;
      height: 100px;
      background-color: rgba(127, 255, 202);
      margin: 0 auto 50px;
      text-align: center;
      line-height: 100px;
      border: 1px solid black;
      border-radius: 50px;
      color: rgb(31, 16, 241);
      font-size: 20px;
      font-weight: bold;
    }

    .search-package {
    
    
      padding: 16px 8px;
      text-align: center;
    }
 
    .date-time {
    
    
      width: 198px;
      height: 42px;
      line-height: 1;
      appearance: none;
      padding-left: 14px;
      font-size: 16px;
      color: #525C66;
      outline: none;
      border-radius: 4%;
    }

    input[type='datetime-local'] {
    
    
      position: relative;
    }

    input[type='datetime-local']::-webkit-calendar-picker-indicator {
    
    
      position: absolute;
      right: 0;
      padding-left: calc(100% - 20px);
      padding-right: 10px;
    }

    .time-package {
    
    
      display: inline-block;
      margin: 50px 10px 10px;
      border: 1px slateblue solid;
      background: #6152661e;
      padding: 4px 8px;
      border-radius: 2px;
    }

    .time-span {
    
    
      color: #1887e2cb;
      font-weight: bold;
      font-size: 14px;
      margin-right: 10px;
    }
  </style>

js代码

<script>
  let timer = document.getElementById('time');
  let startTime = document.getElementById('startTime')
  let endTime = document.getElementById('endTime')
  //设置结束时间默认为过年的时间
  endTime.value = '2023-01-22 00:00:00';

  setInterval(() => {
    
    
    //设置开始时间默认为当前时间
    startTime.value = getDayTime();
    dateTimes();
  })

  //封装时间的函数
  function dateTimes() {
    
    
    let start = startTime.value

    document.getElementById('spanId').innerText = start

    let end = endTime.value

    //获取当前时间
    const today = new Date(start.replace(/-/g, '/').replace('T', ' '));

    document.getElementById('spanId2').innerText = today

    //获取过年时间 
    const newYear = new Date(end.replace(/-/g, '/').replace('T', ' '));
    //相差时间
    let diffTime = newYear.getTime() - today.getTime();

    const day = Math.floor(diffTime / (1000 * 60 * 60 * 24))
    diffTime = diffTime % (1000 * 60 * 60 * 24)
    const hour = Math.floor(diffTime / (1000 * 60 * 60))
    diffTime = diffTime % (1000 * 60 * 60)
    const minute = Math.floor(diffTime / (1000 * 60))
    diffTime = diffTime % (1000 * 60)
    const seconds = Math.floor(diffTime / (1000))

    let dateStr = `还有 ${
      
      day}${
      
      hour}${
      
      minute}${
      
      seconds}`

    timer.innerText = dateStr;
  }


  //获取当前时间
  function getDayTime() {
    
    
    const today = new Date();
    const nowTime = today.getTime();
    today.setTime(parseInt(nowTime));
    const oYear = today.getFullYear();
    let oMoth = (today.getMonth() + 1).toString();
    if (oMoth.length <= 1) oMoth = '0' + oMoth;
    let oDay = today.getDate().toString();
    if (oDay.length <= 1) oDay = '0' + oDay;
    const hour = today.getHours() < 10 ? "0" + today.getHours() : today.getHours();
    const minute =
      today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes();
    const seconds =
      today.getSeconds() < 10 ? "0" + today.getSeconds() : today.getSeconds();
    return `${
      
      oYear}-${
      
      oMoth}-${
      
      oDay} ${
      
      hour}:${
      
      minute}:${
      
      seconds}`
  }

</script>

————————————END——————————
当然开始时间也可以设置成可以选择的时间

有个bug,在代码在电脑上面可以运行,但是发送到手机点击运行的时候,input日期选择器、type=datetime-local生成的时间直接报错Invalid Date(无效日期),这是为什么呢?还请大佬来解答一哈。猜想可能是手机上面的日期和电脑的格式不一样?

猜你喜欢

转载自blog.csdn.net/Jet_Lover/article/details/128471750
今日推荐