如何使用javascript实时移动范围类型输入的滑块而不刷新页面？

发布于 2024-10-16 05:19:29 字数 254 浏览 8 评论 0原文

<input type="range" value="0" min="0" max="100">

我确实尝试了以下操作，但滑块没有响应。

var i = 0;
setInterval(function(){
    document.querySelector('input[type=range]').value = i++;
}, 1000);

或者不可能？

原文

<input type="range" value="0" min="0" max="100">

I did try the following, but the slider no response.

var i = 0;
setInterval(function(){
    document.querySelector('input[type=range]').value = i++;
}, 1000);

or impossible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

戏蝶舞 2024-10-23 05:19:29

来实现

document.getElementById("myslider").stepUp(1);
document.getElementById("myslider").stepDown(1);

您可以使用 stepUp 和 stepDown 函数工作演示 ：http://jsfiddle.net/dp6cwoom/

you can do it with stepUp and stepDown functions

document.getElementById("myslider").stepUp(1);
document.getElementById("myslider").stepDown(1);

working demo : http://jsfiddle.net/dp6cwoom/

回复收藏 0 原文

所谓喜欢 2024-10-23 05:19:29

<input type="range" value="0" min="0" max="100">
<script type="text/javascript"><!--
document.querySelector('input[type=range]').value = 30;
--></script>

在 Safari4 (Win) 中工作正常。
确保您的代码位于输入元素之后，或者在 onload 或类似函数内调用。

<input type="range" value="0" min="0" max="100">
<script type="text/javascript"><!--
document.querySelector('input[type=range]').value = 30;
--></script>

Works ok in Safari4 (Win).
Ensure, your code is after input element or is called inside onload or similar function.

回复收藏 0 原文

红ご颜醉 2024-10-23 05:19:29

在 Chrome 中工作正常 http://jsfiddle.net/gCSFV/

回复收藏 0 原文

夜血缘 2024-10-23 05:19:29

它应该有效。

As per the MDC doc on document.querySelector
Its dsupported by IE8, FF3.5, Chrome1, Safari3.2 and so is input type=range

句法

element = document.querySelector(selectors);

如果没有找到匹配则返回null；
否则，它返回第一个
匹配元素。

请注意，querySelector 仅返回匹配元素的第一个元素。
因此，document.querySelector('input[type=range]')不会像document.querySelector('#myrange')那样理想

It should work.

As per the MDC doc on document.querySelector
Its dsupported by IE8, FF3.5, Chrome1, Safari3.2 and so is input type=range

Syntax

element = document.querySelector(selectors);

Returns null if no matches are found;
otherwise, it returns the first
matching element.

Be careful that querySelector returns only first element of the matched ones.
So, document.querySelector('input[type=range]') wont be as desirable as something like document.querySelector('#myrange')

回复收藏 0 原文

我家小可爱 2024-10-23 05:19:29

我找到了一个方法，但不是很好：动态修改输入的样式。

var i = 0,
    oRange = document.querySelector('input[type=range]');

setInterval(function(){
    oRage.value = i;
    oRage.style.fontSize = i + 'px';
    i++;
}, 1000);

I found a way but not very good: to modify the style of input dynamically.

var i = 0,
    oRange = document.querySelector('input[type=range]');

setInterval(function(){
    oRage.value = i;
    oRage.style.fontSize = i + 'px';
    i++;
}, 1000);

回复收藏 0 原文

~没有更多了~