JS obtient la différence de temps entre l'heure spécifiée en fonction de l'heure actuelle

Regardons d'abord le rendu. Veuillez ajouter une description de l'image
L'heure de début par défaut est l'heure actuelle et l'heure de fin peut être sélectionnée (l'heure par défaut est l'heure du Nouvel An chinois). Nous trouvons ici la différence entre l'heure actuelle et une certaine période de temps.
Pas grand chose à dire, parlons code

Code 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>

code 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>

code 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>

———————————— FIN ——————————
Bien entendu, l'heure de début peut également être réglée à une heure sélectionnable

Il y a un bug. Le code peut être exécuté sur l'ordinateur, mais lorsqu'il est envoyé au téléphone mobile et cliqué pour être exécuté, l'heure générée par le sélecteur de date d'entrée et type=datetime-local signale directement une erreur comme Date invalide ( date invalide ) .Pourquoi ? Veuillez demander au patron de répondre à cette question. Je suppose que le format de la date sur le téléphone est différent de celui sur l'ordinateur ?

Je suppose que tu aimes

Origine blog.csdn.net/Jet_Lover/article/details/128471750
conseillé
Classement