如何将数值格式化为两位数以实现HH:MM时间码显示？

我希望实现HH:MM格式的时间码，例如02:30。

现有代码片段：

<input type="range" min="0" max="480" value="0" class="slider" id="myRange" oninput="myslider(this.value)">

var hours = Math.floor(value / 60);
var minutes = value % 60;

完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slidecontainer">
  <h3 id="displayValue">
   <span id="hours">min</span>
   <span id="minutes">hour</span>
  </h3>
  <input type="range" min="0" max="480" value="0" class="slider" id="myRange" oninput="myslider(this.value)">
</div>

function myslider(value) {
//var slider = document.getElementById("myRange");
var output = document.getElementById("displayValue");

var hours = Math.floor(value / 60);
var minutes = value % 60;

var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];

hourOutput.innerHTML = hours+':';
minuteOutput.innerHTML = minutes

$('.slider').change(function() {
                var hours = Math.floor(value / 60);
        var minutes = value % 60;
        hourOutput.innerHTML = hours+":";
        minuteOutput.innerHTML = minutes;
        console.log(minutes);
});
}

解决方法 #

要让数值始终显示为两位数，可以使用JavaScript的padStart()方法，它能在字符串开头补全指定字符直到达到目标长度。

修改后的JavaScript代码如下：

function myslider(value) {
  var hourOutput = $("#hours")[0];
  var minuteOutput = $("#minutes")[0];

  // 计算小时和分钟
  var hours = Math.floor(value / 60);
  var minutes = value % 60;

  // 格式化为两位数，不足补0
  var formattedHours = hours.toString().padStart(2, '0');
  var formattedMinutes = minutes.toString().padStart(2, '0');

  // 更新显示内容
  hourOutput.innerHTML = formattedHours + ':';
  minuteOutput.innerHTML = formattedMinutes;
}

// 绑定change事件（无需放在myslider函数内，避免重复绑定）
$('.slider').change(function() {
  var value = this.value;
  var hours = Math.floor(value / 60);
  var minutes = value % 60;
  var formattedHours = hours.toString().padStart(2, '0');
  var formattedMinutes = minutes.toString().padStart(2, '0');
  
  $("#hours")[0].innerHTML = formattedHours + ':';
  $("#minutes")[0].innerHTML = formattedMinutes;
});

说明 #

• padStart(2, '0')：将数值转为字符串后，如果长度小于2，就在开头添加0，确保始终是两位数格式。
• 原代码中change事件绑定在myslider函数内会导致每次滑动都重复绑定事件，移到函数外部可避免冗余执行。

内容的提问来源于stack exchange，提问作者Markus