Как сделать круговой счетчик чисел на js?

Question

[Иван Лыков]

Народ, доброго времени, подскажите пожалуйста.
Как сделать такую вещь, есть окошко в окошке есть число, число должно меняться с 029 на 033 на 025 и снова на 029 по кругу, эффект счетчика, с некоторой задержкой в момент, когда число полностью видно. Как сделать такую вещь?

Comments

[Алексей Юдов]

Вы можете чуток конкретнее вопрос сформулировать?

[alexalexes]

Вам нужен элемент ввода, наподобие выпадающего списка, или неуправляемая пользователем анимация?

[Иван Лыков]

TCloud, alexalexes, меня интересует JS и только. А так все и так ясно, я с js дружу нормально. Тут думал попробовать циклом сделать. Но в голову ничего не приходит
Вопрос и так ясно написан...

[Алексей Юдов]

Иван Лыков, если вы отлично знаете js уже давным давно вспомнили про SetInterval и не несли фигню про циклы...

[Иван Лыков]

TCloud, Это ясно что SetInterval . Но мне еще нужно на каждый раз в блок закинуть новое значение

[Алексей Юдов]

Так вы не можете записать значение?
Выберите элемент, застильте его css, обработайте js и все. А если вам нужно готовое решение, то идите гуглите

[Иван Лыков]

TCloud, Мне готовое не нужно... короче спасибо за советы....

[Алексей Юдов]

Иван Лыков, так вы не о чем конкретном не спрашиваете. А после просьбы уточнить, говорите что все итак точно.

[twobomb]

Не совсем понятно, типа такого?

[alexalexes]

Вероятно, эти числа будут крутится в каруселе.
Проще в неуправляемый слайдер этот функционал определить, но можно свой велосипед написать.

[xtala zen]

есть окошко в окошке есть число, число должно меняться с 029 на 033 на 025 и снова на 029

Домики деревянные. Можно грабить корованы.

[Иван Лыков]

twobomb, да такое. Но я щас сделал так

var height_box = 30;
var dealySlider = 6000;
var sliderTimer;

$(function() {
	var text = $('#window_port').height($('#window_port').children().size()*height_box);
		sliderTimer = setInterval(loopNummber,dealySlider);
	    $('.wrapper_loop').hover(function(){
	        clearInterval(sliderTimer);
	    },function(){
	         sliderTimer = setInterval(loopNummber,dealySlider);
	});
});

function loopNummber(){
    var currentSlide = parseInt($('#window_port').data('current'));
    currentSlide++;
    if(currentSlide >= $('#window_port').children().size())
    {
        $('#window_port').css('top',+(currentSlide+2)*height_box);  
        $('#window_port').append($('#window_port').children().first().clone()); 
        $('#window_port').children().first().remove();
        currentSlide--;                        
    }
        $('#window_port').animate({top: -currentSlide*height_box},30).data('current',currentSlide);
    
}

Типо слайдера

Answer 1

[Сергей Соколов]

Наверное, вам понадобится имитировать движение: без этого смотреться будет как медленно щелкающие значения.
Для имитации движения нужно создавать размытие движения (motion blur) – в любой отдельный кадр видно не четкое значение, а размытое вдоль вектора движения.

Отображаемые на экране кадры как бы идут слишком медленно, чтобы уместить все происходящие события, поэтому на один кадр накладывается несколько событий: число появилось вверху, проехало расстояние X, исчезло внизу, появилось следующее число, успело проехать пол-экрана. Всё это "засвечивает" всего один отображаемый кадр, на котором числа выглядят размазнно. Первое просто оставляет след во всю высоту, второе в пол-высоты.

Как я понял, вам потребуется создать серию таких состояний:

1. все смазано
   
2. смазанно, но видно более ли менее значение 1 из 3
   
3. все смазано
   
4. смазанно, но читается значение 2 из 3
   
5. все смазано
   
6. смазанно, но читается значение 3 из 3
   

Кадры для "всё смазано" можно заготовить заранее. Кадры с видимостью определённых значений генерить заранее наложением на полностью смазанные нескольких близких положений видимого числа.