Визуальное уменьшение числа
Есть число 1000, и нужно что-бы оно визуально уменьшилось до 500, типа как в таймере мс.
Звучит просто, но Я почему-то не могу решить, помогите пожалуйста. |
|
или
place = getElementById("counter");
start = 1000;
stop = 500;
function timer() {
if (start-- > stop) {
place.innerHTML = start;
setTimeout(timer,10);
}
}
timer();
|
Palama, рекурсия,конечно, хорошо, но что, если я захочу сделать так
timer(document.geElementById('counter'), 1000, 500);
p.s открыл твой профиль - уже появился единомышленник=), точнее кто-то сказал это другими словами=) |
Цитата:
http://jsfiddle.net/qvyuLhn9/17/ |
Lemme Спасибо, скопипастил)
|
join, спасибо за замечание, проглядел ;) Ведь
from-=1 === --from; AntonMs, отредактируй.
if (from === to){
clearInterval(timer);
return;
}
|
Lemme, если с return то итоговое число будет всегда на 1 больше.
|
AntonMs, с return
from--; container.innerHTML = from; или container.innerHTML = --from; или container.innerHTML = from-=1 Для понимания var i = 1; console.log(i--); // 1 - выводим значение переменной i, а потом уменьшаем сonsole.log(i); // 0 var i = 1; console.log(--i); // 0 - уменьшаем значение переменной i, а потом выводим. Тоже самое, что i-=1 сonsole.log(i); // 0 |
Спасибо, а то Я сначала не понял что это: --from
Или какая разница - from--; container.innerHTML = from;//// container.innerHTML = from--; |
AntonMs, не за что=)
|
Цитата:
var timer = function(e,a,b,step,delay) {
var q = function() {if (Math.abs(a-b)>=Math.abs(step)) e.innerHTML=(setTimeout(q,delay),a=a+step);}
q();
}
timer(document.geElementById('counter'),1000,500,-1,1);
|
действительно заклинание +)
|
таймер для анимации чисел
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test{
background-color: rgb(51, 153, 0);
color: rgb(102, 255, 255);
}
</style>
</head>
<body>
<span class="time"></span>
<script>
function timer(a) {
var c = performance.now();
requestAnimationFrame(function d(b) {
b = (b - c) / a.duration;
1 < b && (b = 1);
a.elem.innerHTML = a.from + (a.to - a.from) * b | 0;
b == 1 && a.callback && a.callback();
1 > b && requestAnimationFrame(d)
})
};
var span = document.querySelector('.time');
timer({
from : 1000,
to : 500,
duration: 5 *1000,
elem : span,
callback : function() { span.classList.add('test')}
})
</script>
</body>
</html>
|
рони, круто, не лень было?=)
|
|
В этом его кредо: брать у богатых и давать бедным :) Однако не всем джобсам удается на этом разбогатеть.
|
| Часовой пояс GMT +3, время: 12:59. |