javascript - 为 RANGE 类型的 INPUT 设置动画

Question

我有以下内容input： <input id="meepmeep" type="range" min="0" max="128" step="1" value="0" />

我正在打一个基本setInterval()电话：

setInterval(function() {
    var newVal = $('#meepmeep').val() + 1;
    $('#meepmeep').val(newVal);
}, 500);

但是增量val() + 1似乎有val() + 50什么想法？！

懒惰的小提琴：http: //jsfiddle.net/neuroflux/SNYsa/

Answer 1

该值被解析为字符串。将数据类型转换为数字以解决问题：

setInterval(function() {
    var newVal = parseInt($('#meepmeep').val()) + 1;
    $('#meepmeep').val(newVal);
}, 500);

Answer 2

那是因为.val()返回一个字符串，你应该在添加之前将字符串转换为数字：

setInterval(function() {
    $('#meepmeep').val(function(i, str) { return ++str; });
}, 500);

http://jsfiddle.net/SNYsa/1/

Answer 3

这是一个通用函数，它将滑动到给定 jQuery 元素范围内的给定值。

$("button").on("click", function(){
   slideToValue(75, $("#slider"));
});

function slideToValue(num, $input) {
	const interval = function() {
  	const cur = $input.val();
  	
    if (cur < num) {
    	console.log(`Value is ${cur}. Incrementing!`);
    	$input.val(parseInt(cur) + 1);
    } else if (cur > num) {
    	console.log(`Value is ${cur}. Decrementing!`);
    	$input.val(parseInt(cur) - 1);
    } else {
    	console.log(`Arrived at ${num}!`);
    	clearInterval(slowly);
    }
  }
	const slowly = setInterval(interval, 10);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Set to 75</button>
<input type="range" id="slider">

Answer 4

setInterval(function() {
    var newVal = parseInt($('#meepmeep').val()) + 1.0;
    $('#meepmeep').val(newVal);
}, 500);

工作正常 ;）

Answer 5

var newVal = $('#meepmeep').val() + 1;

结果

Run 
1st time value = 1
2nd time  = 11
3rd time = 111
4th time = 1111

因为您要添加string不将其转换为integer value

正确的代码 Jsfiddle

setInterval(function() {
    var newVal = $('#meepmeep').val(function(i, val) {
       return +val + 1;
    });
}, 500);

或Jsfiddle

setInterval(function() {
    var newVal = parseInt($('#meepmeep').val()) + 1;
    $('#meepmeep').val(newVal);
}, 500);

读取parseInt()