js实现移动端滑块显示对应时间小时和分钟

实现移动端滑块显示对应时间小时和分钟，可以使用HTML5的input元素中的range类型，结合JavaScript进行实现。具体步骤如下：

1. 创建一个input元素，设置type为range，同时设置min、max、step等属性，用于控制滑块的取值范围和步长。

2. 在页面中创建两个span元素，用于显示当前选中的小时和分钟。

3. 使用JavaScript监听input元素的change事件，获取当前选中的值，并将其转换为小时和分钟。

4. 将转换后的小时和分钟显示在对应的span元素中。

代码示例：

HTML：

<div>
  <input type="range" min="0" max="1439" step="1" onchange="showTime()"/>
  <div>
    <span id="hour">00</span>:<span id="minute">00</span>
  </div>
</div>

CSS：

input[type=range] {
  width: 100%;
}

div {
  text-align: center;
  margin-top: 50px;
}

span {
  font-size: 30px;
}

JavaScript：

function showTime() {
  let time = document.querySelector('input[type=range]').value;
  let hour = Math.floor(time / 60);
  let minute = time % 60;
  document.getElementById('hour').innerHTML = hour.toString().padStart(2, '0');
  document.getElementById('minute').innerHTML = minute.toString().padStart(2, '0');
}

通过以上代码，可以实现一个移动端滑块显示对应时间小时和分钟的功能。其中，input元素设置了type为range，min、max、step等属性，用于控制滑块的取值范围和步长。使用JavaScript监听input元素的change事件，获取当前选中的值，并将其转换为小时和分钟。最后，将转换后的小时和分钟显示在对应的span元素中。