Question

我需要在我的网站上创建移动条纹（我不知道如何命名）。像这样：

|--@---------|

用户可以将@从一侧移动到另一侧，当单击该栏时，它会发送该值，但不能通过手动请求完成，因此用户可以选择要发送的值。我只需要一些技巧如何做到这一点。我认为它可以通过闪存完成，但我甚至不知道应该使用互联网搜索关键字来查找更多信息。

Answer 1

正如Wainage建议的那样，<input>类型range也许是一个简单的解决方案。请参阅下面的示例。

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
    var slider = document.getElementById('rangeValue');
    var output = document.getElementById('valueOutput');

    function updateOutput() {
      output.innerHTML = slider.value;
    }

    //set the value initially
    updateOutput();

    //subscribe to any change/drag - not supported by IE
    slider.addEventListener('input', updateOutput);

    //use change event for updates when drag is ended
    slider.addEventListener('change', updateOutput);
});

＆＃13;

<input id="rangeValue" type="range" name="rangeValue" value="3" max="10" />
<div>Value: <span id="valueOutput"></span></div>

＆＃13;

移动条纹不断变化的价值

1 个答案: