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

рони 18.08.2016 10:55

anna4,
вы умеите клик поставить на кнопку? если да покажите код хотябы алерт по клику на кнопку.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 18.08.2016 11:03

anna4,
<!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);
}
document.querySelector('#but').addEventListener('click', function() {
number_to("example",900,1500,3000);
number_to("test",10,-5,15000)
        });


};
</script>
</head>
<body>
  <div id="example"></div>
  <div id="test"></div>
  <input id="but" name="" type="button" value="это кнопа">
</body>
</html>

anna4 18.08.2016 12:54

Огромное спасибо
 
Вы мне очень помогли, спасибо большое. Еще бы можно было чтоб кнопка стояла отдельно в любом другом месте.

рони 18.08.2016 13:28

Цитата:

Сообщение от anna4
Еще бы можно было чтоб кнопка стояла отдельно в любом другом месте.

поставьте куда вам нужно, от этого ничего не изменится

Manyasha 18.08.2016 13:40

Цитата:

Сообщение от anna4 (Сообщение 425944)
чтоб кнопка стояла отдельно в любом другом месте.

Цитата:

Сообщение от рони (Сообщение 425958)
поставьте куда вам нужно

что-то вдруг пошутить захотелось))
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
 <style>
 #but {
	border: thin solid black;
    width: 150px;
	text-align: center; 
	padding:10px
}
 #but:hover{
	border: medium solid #ff0000;
}
 </style>
  <script>
window.onload=function(){
$('#but').draggable();
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);
}
document.querySelector('#but').addEventListener('click', function() {
number_to("example",900,1500,3000);
number_to("test",10,-5,15000)
});

};
</script>
</head>
<body>
  <div id="example"></div>
  <div id="test"></div>
  <div id="but">
  это кнопа (тащи меня, куда надо)
  </div>
</body>
</html>

the_little 12.04.2018 15:07

Помогите...

Попытался прикрутить этот скрипт к себе, не совсем получилось
Проблема какая.

Есть переменная, которая высчитывается при изменении полей и заносится в див.

И собственно мне нужно чтобы ее изменение анимировалось.

Скрипт прикрутил. Но не получается сделать чтобы анимация шла от того значения, которое уже стоит.

От 0 до текущего значения работает отлично. А если от текущего ставлю, то при анимации 2 числа отображаются, в конце одно пропадает.

Код вот такой.

var price = gaz_price + montaj + works + kond + gaz;
    var from = $('#itog-price').html();

    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("itog-price",from,price,1000);

рони 12.04.2018 16:28

the_little,
а так?
var from = +($('#itog-price').html());


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