javascript - “输入”类型范围内的问题，以及用于设计视频播放器的 JavaScript

Question

是否可以在更新图片中指定的光标移动的同时控制周期并更改其颜色

CSS 中那个时期的名称是什么？在这种情况下，Java Script 中的代码将如何？

var video = document.querySelector('.video');
var btn = document.getElementById('play-pause');

function intializePlayer() {
  btn = document.getElementById("play-pause");
  seekslider = document.getElementById("seekslider");
  // Add event listeners
  seekslider.addEventListener("change", vidSeek, false);
  video.addEventListener("timeupdate", seektimeupdate, false);
}

window.onload = intializePlayer;

function vidSeek() {
  var seekto = video.duration * (seekslider.value / 100);
  video.currentTime = seekto;
}

function seektimeupdate() {
  var nt = video.currentTime * (100 / video.duration);
  seekslider.value = nt;
  if (video.ended) {
    btn.className = "play";
  }
}

#seekslider {
  height: 10px;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
}

input[type='range'] {
  -webkit-appearance: none !important;
  background: #000;
  border: #666 1px solid;
  height: 4px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: #FFF;
  height: 15px;
  width: 15px;
  border-radius: 100%;
}

<input id="seekslider" type="range" min="0" max="100" value="0" step="1">

标签： javascripthtmlcss

Answer 1

正如评论中提到的，只有 Internet Explorer 允许您本地设计滑块的经过和剩余部分，至少这是我从这篇写得很好的关于样式范围滑块的文章中得到的。

但是，您可能会使用其他替代方法。我尝试的一个想法是将范围滑块放入一个DIV包含元素以显示进度的元素中。背景元素将是（某种）滑块的宽度，而前景元素（“进度指示器”）将根据滑块的值扩展。请注意，我没有更改滑块本身的外观，但如果您想这样做，请阅读上面的文章，值得花时间。

---

让我们继续看相关的代码。

HTML 代码

<div class="slider-wrapper" style="width: 500px;">
  <div class="slider-underlay"></div>
  <input class="seekslider" type="range" min="30" max="60" value="0" step="1">
  <div class="slider-progress"></div>
</div>

滑块位于定义背景颜色的背景元素和指示进度的前景元素的中间。

CSS 代码

.slider-wrapper {
  display: inline-block;
  position: relative;
  height: 30px;
  width: 310px;
}
.slider-underlay {
  background-color: black;  
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: black;
  border-right: 1px solid white;
  z-index: 1;
}
.slider-progress {
  position: absolute;
  height: 100%;
  width: 0;
  left: 0;
  top: 0;
  background: #999;
  border-right: 1px solid white;
  z-index: 1;
}
.seekslider {
  width: 98%;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 3px;
}

JS代码

$(".seekslider").on('change, input', function() {
  const ratio = (this.value - this.min) / (this.max - this.min);
  const counterRatio = (0.5 - ratio) * 1.2;
  const counterWidth = counterRatio * 10 + 2;
  const width= $(this).width();
  $(this).next('.slider-progress').width(ratio * width + counterWidth);
});

由于滑块元素本身内部的内部填充（拇指滑块只会接触到控件外部宽度的左侧或右侧），我们需要进行一些调整。当滑块在左侧时，我们需要让进度指示器的宽度稍微宽一些，但是当我们向右移动时，我们需要减少额外的填充，否则进度会超过滑块上的滑块对。上面的值是通过实验配置的，可能需要调整，很有可能在网上有更好的实现。

Codepen 演示。

除了包装器之外，所有元素都按百分比缩放，因此您可以随意调整滑块的宽度。

以下是从 Codepen 中获取的一些演示图像：

火狐

边缘

铬合金

请让我知道您的想法以及这是否适合您。谢谢。