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

これ.val()は、文字列を返すためです。追加する前に文字列を数値に変換する必要があります。

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

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

Answer 2

これは、特定の 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 3

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

正常に動作します ;）

Answer 4

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()を読む