html 输入类型=”time“,如果仅获取小时值,则返回NAN

iqxoj9l9  于 2023-05-15  发布在  其他
关注(0)|答案(4)|浏览(155)

我有一个输入,用户可以输入 * 时间 *。
我想得到 * 小时 * 只是因为我将使用它对我的一些条件。但是使用下面的代码,我得到了NAN值。有没有一种方法可以只使用<input type="time">来获取 hour不包括的 * 分钟 *?

  • 示例1:用户输入=>上午10:32获取=>10
  • 示例2:用户输入=>03:11 pmget =>15//24小时。
  • 需要使用**<input type="time">**。

下面是我的示例代码(仅限尝试)。

function showTime(){
  let time = document.getElementById('myTime');
  let output = document.getElementById('output');
  let getHours = new Date('time').getHours()
  console.log(getHours)
  getHours < 12 ? output.innerText = 'Morning'
  : getHours < 18 ? output.innerText = 'Afternoon'
  : getHours < 24 ? output.innerText = 'Evening'
  : output.innerText = 'Error getting hour!';

}
span{
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}
<label>Time In: </label><input id='myTime' type='time'/>
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
gopyfrb3

gopyfrb31#

new Date(time)返回 null,您正在尝试使用getHours()。您可以拆分time value 并使用[0]index 获取数组的第一个元素以获取小时数。

代码示例:

function showTime(){
  let time = document.getElementById('myTime');
  let output = document.getElementById('output');
  let getHours = time.value.split(":")[0];
  console.log(getHours);
  getHours < 12 ? output.innerText = 'Morning'
  : getHours < 18 ? output.innerText = 'Afternoon'
  : getHours < 24 ? output.innerText = 'Evening'
  : output.innerText = 'Error getting hour!';
}
span{
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}
<label>Time In: </label><input id='myTime' type='time'/>
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
w8f9ii69

w8f9ii692#

格式不对,你需要年,月和秒。

function showTime() {
  let time = document.getElementById('myTime').value;
  let output = document.getElementById('output');
  let now = new Date()
  let getHours = new Date(`${now.getFullYear()}-${now.getMonth()}-${now.getDate()} ${time}:00`).getHours();
  output.innerText = getHours < 12 ? 'Morning' : getHours < 18 ? 'Afternoon' : getHours < 24 ? 'Evening' : 'Error getting hour!'
}
<label>Time In: </label><input id='myTime' type='time' />
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
bhmjp9jg

bhmjp9jg3#

你应该使用time.value,但输入值只是时间组件,而不是完整的日期,这样你就无法实现所需的输出。这是你想要的工作代码。
从时间中只提取小时部分,然后检查它是否有效,然后输出它。

function showTime() {
  let time = document.getElementById('myTime');
  let output = document.getElementById('output');
  let hours = parseInt(time.value.substr(0, 2)); 
  console.log(hours);
  if (!isNaN(hours)) {
    output.innerText = hours < 12 ? 'Morning' :
      hours < 18 ? 'Afternoon' :
      hours < 24 ? 'Evening' :
      'Error getting hour!';
  } else {
    output.innerText = 'Invalid input';
  }
}
span {
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}
<label>Time In: </label><input id='myTime' type='time' />
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>
wwtsj6pe

wwtsj6pe4#

编辑js的第4行为:

let getHours = new Date('1/1/1 '+ time.value).getHours()

一定会成功的

function showTime(){
  let time = document.getElementById('myTime');
  let output = document.getElementById('output');
  let getHours = new Date('1/1/1 '+ time.value).getHours()
  console.log(getHours)
  getHours < 12 ? output.innerText = 'Morning'
  : getHours < 18 ? output.innerText = 'Afternoon'
  : getHours < 24 ? output.innerText = 'Evening'
  : output.innerText = 'Error getting hour!';

}
span{
  border: 1px solid gray;
  background-color: gray;
  color: darkred;
  width: 12rem;
  height: 12rem;
}
<label>Time In: </label><input id='myTime' type='time'/>
<br><br>
<button onclick="showTime()">Show Hour Only</button>
<br><br>
<span id='output'></span>

相关问题