在輸入範圍上懸停時顯示時間

當您將鼠標懸停在搜索滑塊的某個部分上時，它會向您顯示您在其上徘徊的時間碼。我想抓住該值並將其顯示在此滑塊的標題屬性中。我該怎麼做？在輸入範圍上懸停時顯示時間

<input type="range" min="0" max="100" step="1" title="javascript:hoverTimeFunction()"/>

這就是我需要：你看，那個視頻的當前時間是2:04 但我徘徊在 3:27時間碼，它顯示了我 3:27標題中的值不拖動拇指。但問題是我需要顯示視頻時間，而不僅僅是滑塊值。我正在使用這個功能：

seekSlider = document.getElementById("seekSlider"); 

function videoTimeUpdate(){ 
"use strict"; 
    var timeInterval = vid.currentTime * (100/vid.duration); 
    seekSlider.value = timeInterval; 
    var currentMinutes = Math.floor(vid.currentTime/60); 
    var currentSeconds = Math.floor(vid.currentTime - currentMinutes * 60); 
    var durationMinutes = Math.floor(vid.duration/60); 
    var durationSeconds = Math.floor(vid.duration - durationMinutes * 60); 
    if(currentSeconds < 10) {currentSeconds = "0"+ currentSeconds;} 
    if(durationSeconds < 10) {durationSeconds = "0"+ durationSeconds;} 
    if(currentMinutes < 10) {currentMinutes = "0"+ currentMinutes;} 
    if(durationMinutes < 10) {durationMinutes = "0"+ durationMinutes;} 
    currentTime.innerHTML = currentMinutes + ":" + currentSeconds; 
    vidDuration.innerHTML = durationMinutes + ":" + durationSeconds; 
}

順便說一下，我需要一個解決方案，而不使用jQuery。

來源

2017-05-09 Eugen Eray

這裏有一個純JavaScript + CSS的解決方案。只有一個問題：除非您將滑塊放大，否則顯示的數字將不是它將在滑塊上設置的實際值（如果單擊）。這是因爲鼠標所在的座標不符合滑塊在該位置設置的值。

var slider = document.getElementById("slider"); 
 
var slidertitle = document.getElementById("slidertitle"); 
 

 
var sliderOffsetX = slider.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left; 
 
var sliderOffsetY = slider.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top; 
 

 
var sliderWidth = slider.offsetWidth - 1; 
 

 
slider.addEventListener('mousemove', function(event) { 
 
    var currentMouseXPos = (event.clientX + window.pageXOffset) - sliderOffsetX; 
 
    var sliderValAtPos = Math.round(currentMouseXPos/sliderWidth * 100 + 1); 
 
    // this... 
 
    if(sliderValAtPos < 0) sliderValAtPos = 0; 
 
    // ... and this are to make it easier to hover on the "0" and "100" positions 
 
    if(sliderValAtPos > 100) sliderValAtPos = 100; 
 
    slidertitle.innerHTML = sliderValAtPos; 
 
    slidertitle.style.top = sliderOffsetY - 15 + 'px'; 
 
    slidertitle.style.left = currentMouseXPos + 'px'; 
 
});

#slider { 
 
    margin-top: 10px; 
 
} 
 

 
#slidertitle { 
 
    display: none; 
 
    position: absolute; 
 
    cursor: default; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#container:hover > #slidertitle { 
 
    display: block; 
 
}

<div id="container"> 
 
    <input type="range" min="0" max="100" step="1" id="slider"/> 
 
    <span id="slidertitle"></span> 
 
</div>

來源

2017-05-09 08:37:49 nonzaprej

請閱讀我的編輯，這很重要。 – nonzaprej

哦，快點。這太遺憾了。但無論如何，誰在乎？我只是讓視頻播放器看起來更酷。 –

我認爲我有一個醜陋的解決方案來始終顯示正確的價值，但我現在無法嘗試。 – nonzaprej

收聽滑塊上的input事件以更改標題屬性。

下面是一個例子。

var slider = document.querySelector('input[type="range"]'); 
 

 
// set the initial value 
 
slider.title = slider.value; 
 

 
// add listener to input event 
 
slider.addEventListener('input', function(e) { 
 
\t e.target.title = e.target.value; 
 
})

<input type="range" min="0" max="100" step="1" title="" />

來源

2017-05-09 07:26:19 DavidDomain

更新的問題。 –

在輸入範圍上懸停時顯示時間

回答

相關問題