Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2013, 12:12
Аватар для Tek
Tek Tek вне форума
Профессор
Отправить личное сообщение для Tek Посмотреть профиль Найти все сообщения от Tek
 
Регистрация: 22.02.2012
Сообщений: 212

анимированне изменение числа
Есть 2 числа начальное и к которому нужно привести. Как лучше сделать плавный переход от одного числа к другому в духе http://jsfiddle.net/Ev5fn/8/ Данная реализация не устраивает ввиду того что не удалось настроить скорость (слишком долго)

Последний раз редактировалось Tek, 02.07.2013 в 12:18.
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2013, 13:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Tek,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script>
window.onload=function(){
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
    var now = (new Date().getTime()) - start;
    var progress = now / duration;
    var result = Math.floor((to - from) * progress + from);
    element.innerHTML = progress < 1 ? result : to;
    if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);
}
number_to("example",900,1500,3000);
number_to("test",10,-5,15000)
};
</script>
</head>
<body>
  <div id="example"></div>
  <div id="test"></div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2013, 13:33
Аватар для Tek
Tek Tek вне форума
Профессор
Отправить личное сообщение для Tek Посмотреть профиль Найти все сообщения от Tek
 
Регистрация: 22.02.2012
Сообщений: 212

Сообщение от рони Посмотреть сообщение
Tek,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script>
window.onload=function(){
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
    var now = (new Date().getTime()) - start;
    var progress = now / duration;
    var result = Math.floor((to - from) * progress + from);
    element.innerHTML = progress < 1 ? result : to;
    if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);
}
number_to("example",900,1500,3000);
number_to("test",10,-5,15000)
};
</script>
</head>
<body>
  <div id="example"></div>
  <div id="test"></div>
</body>
</html>
Спасибо то что нужно
Ответить с цитированием
  #4 (permalink)  
Старый 13.01.2015, 22:51
Новичок на форуме
Отправить личное сообщение для dambar Посмотреть профиль Найти все сообщения от dambar
 
Регистрация: 13.01.2015
Сообщений: 2

Отличный скрипт, кто может подсказать чтобы таймер для первого числа прибавлял по 50, а не по единице?
Ответить с цитированием
  #5 (permalink)  
Старый 13.01.2015, 23:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dambar,
var result = Math.floor(((to - from) * progress + from)/50)*50;
Ответить с цитированием
  #6 (permalink)  
Старый 14.01.2015, 14:47
Новичок на форуме
Отправить личное сообщение для dambar Посмотреть профиль Найти все сообщения от dambar
 
Регистрация: 13.01.2015
Сообщений: 2

Сообщение от рони Посмотреть сообщение
dambar,
var result = Math.floor(((to - from) * progress + from)/50)*50;
Спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 18.08.2016, 09:43
Интересующийся
Отправить личное сообщение для anna4 Посмотреть профиль Найти все сообщения от anna4
 
Регистрация: 17.08.2016
Сообщений: 13

Помогите пожалуйста
А сделать чтоб эти числа начинались после нажатия кнопки
Ответить с цитированием
  #8 (permalink)  
Старый 18.08.2016, 09:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

anna4,
а в чём проблема прописать клик на кнопку?
Ответить с цитированием
  #9 (permalink)  
Старый 18.08.2016, 10:11
Интересующийся
Отправить личное сообщение для anna4 Посмотреть профиль Найти все сообщения от anna4
 
Регистрация: 17.08.2016
Сообщений: 13

Я не знаю как((
Помогите пожалуйста это сделать
Ответить с цитированием
  #10 (permalink)  
Старый 18.08.2016, 10:46
Интересующийся
Отправить личное сообщение для anna4 Посмотреть профиль Найти все сообщения от anna4
 
Регистрация: 17.08.2016
Сообщений: 13

рони,
Помогите пожалуйста. Очень нужно. Уже неделю ищу ни как не могу найти.
как сделать чтоб этот скрипт срабатывал только после нажатия на кнопку
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script>
window.onload=function(){
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1 ? result : to;
if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);
}
number_to("example",900,1500,3000);
};
</script>
</head>
<body>
<div id="example"></div>
<div id="test"></div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
перевод числа в рейтинг (звезды) djonA Общие вопросы Javascript 17 07.03.2014 11:41
Как отловить изменение computedStyle элемента danik.js Events/DOM/Window 8 25.10.2012 16:40
Расчет числа последовательностей Slavenin Оффтопик 10 20.03.2012 13:58
Как обработать изменение масштаба окна в IE8 ? v_k Events/DOM/Window 1 09.08.2010 13:35
число 76.4705882.. сделать 76.47? (числа всегда разные) TongaG Ваши сайты и скрипты 3 19.01.2010 07:35