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(无效日期),这是为什么呢?还请大佬来解答一哈。猜想可能是手机上面的日期和电脑的格式不一样?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以使用JavaScript中的Date对象来获取当前时间,然后根据时间显示不同的问候语。例如: ```javascript const now = new Date(); const currentHour = now.getHours(); let greeting; if (currentHour < 12) { greeting = 'Good morning!'; } else if (currentHour < 18) { greeting = 'Good afternoon!'; } else { greeting = 'Good evening!'; } console.log(greeting); ``` 以上代码会根据当前时间显示不同的问候语。如果当前时间早于中午12点,则显示"Good morning!";如果当前时间在中午12点到晚上6点之间,则显示"Good afternoon!";否则显示"Good evening!"。你可以根据需要自定义问候语和时间段。 ### 回答2: 用JavaScript编写一个根据当前时间显示问候语的程序是非常简单的。我们可以通过获取当前时间,然后根据时间的范围来确定显示的问候语。 首先,我们可以使用`new Date()`来获取当前的日期和时间。然后,使用`getHours()`方法获取当前的小数。根据小数的范围,我们可以确定要显示的问候语。 下面是一个示例程序: ```javascript // 获取当前时间 var currentTime = new Date(); // 获取当前数 var currentHour = currentTime.getHours(); // 根据当前数确定问候语 if (currentHour >= 6 && currentHour < 12) { document.write("早上好!"); } else if (currentHour >= 12 && currentHour < 18) { document.write("下午好!"); } else if (currentHour >= 18 && currentHour < 24) { document.write("晚上好!"); } else if (currentHour >= 0 && currentHour < 6) { document.write("凌晨好!"); } ``` 在以上示例中,我们定义了四个范围来确定显示的问候语。6点到12点是早上,12点到18点是下午,18点到24点是晚上,0点到6点是凌晨。 你可以根据自己的需要来修改这些范围,并自定义你想要显示的问候语。只需将`document.write()`中的文字修改为你想要显示的内容即可。 这是一个简单的根据当前时间显示问候语的JavaScript程序。希望能对你有所帮助! ### 回答3: 根据当前时间显示问候语可以通过JavaScript实现。首先,我们需要获取当前时间。这可以通过JavaScript中的`Date`对象来实现。然后,我们可以使用条件语句来判断当前时间所处的时间段,并根据不同的时间段显示不同的问候语。 以下是一个实现的例子: ```javascript // 获取当前时间 var currentTime = new Date(); // 获取当前 var currentHour = currentTime.getHours(); // 根据当前显示不同的问候语 var greeting; if (currentHour < 6) { greeting = "凌晨好!"; } else if (currentHour < 9) { greeting = "早上好!"; } else if (currentHour < 12) { greeting = "上午好!"; } else if (currentHour < 14) { greeting = "中午好!"; } else if (currentHour < 18) { greeting = "下午好!"; } else if (currentHour < 22) { greeting = "晚上好!"; } else { greeting = "夜深了,注意休息!"; } // 显示问候语 console.log(greeting); ``` 通过以上代码,根据当前时间不同的时间段显示相应的问候语。每个时间段都有不同的问候语,根据实际需要可以自行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jet_closer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值