Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   анимированне изменение числа (https://javascript.ru/forum/jquery/39492-animirovanne-izmenenie-chisla.html)

Tek 02.07.2013 12:12

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

рони 02.07.2013 13:16

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>

Tek 02.07.2013 13:33

Цитата:

Сообщение от рони (Сообщение 259625)
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>

Спасибо то что нужно

dambar 13.01.2015 22:51

Отличный скрипт, кто может подсказать чтобы таймер для первого числа прибавлял по 50, а не по единице?

рони 13.01.2015 23:31

dambar,
var result = Math.floor(((to - from) * progress + from)/50)*50;

dambar 14.01.2015 14:47

Цитата:

Сообщение от рони (Сообщение 351297)
dambar,
var result = Math.floor(((to - from) * progress + from)/50)*50;

Спасибо!

anna4 18.08.2016 09:43

Помогите пожалуйста
 
А сделать чтоб эти числа начинались после нажатия кнопки

рони 18.08.2016 09:49

anna4,
а в чём проблема прописать клик на кнопку?

anna4 18.08.2016 10:11

Я не знаю как((
 
Помогите пожалуйста это сделать

anna4 18.08.2016 10:46

рони,
Помогите пожалуйста. Очень нужно. Уже неделю ищу ни как не могу найти.
как сделать чтоб этот скрипт срабатывал только после нажатия на кнопку
<!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>


Часовой пояс GMT +3, время: 05:20.