Javascript-форум - Скрипт бегущих чисел + скрипт калькулятора

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Скрипт бегущих чисел + скрипт калькулятора (https://javascript.ru/forum/misc/67210-skript-begushhikh-chisel-skript-kalkulyatora.html)

Скрипт бегущих чисел + скрипт калькулятора

Дорогие Js умельцы нид хелп.
Возникла проблема, есть два скрипта:
1)считает сумму в чеке.
2) анимирует увеличение числа.

1.

function costCalculator() {
//Типы флажков
var pol = document.getElementById("pol");
var kor = document.getElementById("kor");
var nal = document.getElementById("nal");
var dob = document.getElementById("dob");
var fur = document.getElementById("fur");
//Результаты флажков
var result = document.getElementById("pol");
var result = document.getElementById("kor");
var result = document.getElementById("nal");
var result = document.getElementById("dob");
var result = document.getElementById("fur");
//Общий результат
var result = document.getElementById("result");
//Цена для флажков по умолчанию
var polPrice = 0;
var korPrice = 0;
var nalPrice = 0;
var dobPrice = 0;
var furPrice = 0;
//Общая цена
var price = 0;
//Умножаем значение на *ЧИСЛО
polPrice += (pol.checked == true) ? parseInt(pol.value) : 0;
korPrice += (kor.checked == true) ? parseInt(kor.value) : 0;
nalPrice += (nal.checked == true) ? parseInt(nal.value) : 0;
dobPrice += (dob.checked == true) ? parseInt(dob.value) : 0;
furPrice += (fur.checked == true) ? parseInt(fur.value) : 0;
//Складываем типы флажков + имя списка
price=polPrice + korPrice + nalPrice + dobPrice + furPrice;
//Результат для полей
polRezult.innerHTML = polPrice;
korRezult.innerHTML = korPrice;
nalRezult.innerHTML = nalPrice;
dobRezult.innerHTML = dobPrice;
furRezult.innerHTML = furPrice;
//Общий результат
result.innerHTML = price;
};

2-ой.

$('.timer').countTo({
        from: 50,
        to: 2500,
        speed: 1000,
        refreshInterval: 50,
        formatter: function (value, options) {
            return value.toFixed(5);
        },
        onUpdate: function (value) {
            console.debug(this);
        },
        onComplete: function (value) {
            console.debug(this);
        }
    });

есть проблема, нужно чтобы цифры бежали не с нуля а с текущей суммы и далее.
тоесть если ставим в to переменную 'price'. считает с нуля, а если и в form поставить 'price' . то соответственно перестает считать вообще, т.к. анимировать становиться нечего.
подскажите решение. или может есть какой другой скрипт анимации, все которые пробовал работают по похожему принципу.

j0hnik,
что мешает в from поставить текущую сумму ?

ставил, но получается если и в form и в to поставить price то анимировать нечего будет, число же одинаковое будет. А конкретно цифрой поставить нельзя.

можно в from поставить, но что тогда поставить в to?

простите если что-то недопонимаю, я js не знаю просто. пытаюсь вот хоть немного освоить.

да и еще одна проблемка, если анимировать значение каждого чекбоска, тут как раз с нуля нужно, по независимо от го чтогае мы конкретный чекбокс или нет, начинают бежать все цифры в чекбоксах.

j0hnik,
делайте полноценнный макет

http://codepen.io/anon/pen/qRYKNL - вот посмотрите плиз!

j0hnik,
ок ... не торопливо гляну

спасибо вам =)

калькулятор с анимацией

j0hnik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .chekBlock {
  position: relative;
  display: block;
  float: right;
  width: 20%;
  padding: 1%;
  border: 1px solid rgba(71,71,71,1.00);
  -webkit-box-shadow: 4px 5px 6px rgba(71,71,71,1.00);
  box-shadow: 4px 5px 6px rgba(71,71,71,1.00);
  background-color: rgba(255,140,0,.2);
}
.chekCont {
  position: relative;
  display: block;
}
.chekTitle{
  margin-bottom: 16px;
  padding: 1%;
  text-align: center;
  color: rgba(134,68,38,1.00);
  font: 20px "BebasBold";
}
.chekItemLine {
  display: inline-block;
  clear: both;
  width: 100%;
  color: rgba(120,120,120,1.00);
  border-bottom-width: 1px;
  border-bottom-style: dotted;
}
.lineItem {
  color: rgba(134,68,38,.90);
  display: inline-block;
  float: left;
  font-size: 18px;
}
.lineItem2 {
  color: rgba(134,68,38,1.00);
  display: inline-block;
  float: left;
  font-size: 22px;
}
.linePrice {
  float: right;
}
.lineItem .fa{
  font-size: 16px;
}
.linePrice2 {
  float: right;
  font-size: 22px;
  color: rgba(100,100,100,1.00);
}
.linePrice2 .fa{
  font-size: 20px;
}
.chekSmall {
  display: inline-block;
  font-size: 12px;
  margin-top: 8px;
  border-bottom: 1px dotted rgba(134,68,38,1.00);
}
.chekSmall .fa{
  margin-right: 5px;
}
.chekSmall a:hover, .lineItem a:hover{
  color: rgba(200,50,00,1.00);
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.min.js"></script>
  <script>
$(function() {
    var chec = $(".lineItem :checkbox"),
        price = 0;

    function count(el, from, to) {
        $(el).countTo({
            from: from,
            to: to,
            speed: 1E3,
            refreshInterval: 50,
            formatter: function(value, options) {
                return value.toFixed(0)
            }
        })
    }

    function costCalculator() {
        var sum = 0;
        var self = this;
        chec.each(function(indx, elem) {
            var el = $(elem).parents(".chekItemLine").find(".linePrice span");
            var from = elem.checked ? 0 : +elem.value;
            var to = elem.checked ? +elem.value : 0;
            sum += to;
            elem == self && count(el, from, to)
        });
        count("#result", price, sum);
        price = sum
    }
    chec.on("change",costCalculator)
});
  </script>
</head>

<body>
<div class="chekBlock">
          <div class="chekCont">
            <div class="chekTitle">Стоимость комплекта</div><br>
            <div class="chekItemLine">
              <div class ="lineItem">
                <input type="checkbox" form="form" id="pol" value="4000" name="Полотно:"  checked="checked"/><label for="pol"><span></span></label>Полотно</div>
                <div class="linePrice"><span id="polRezult">4000</span> <i class="fa fa-rub" aria-hidden="true"></i>
                </div>
              </div>
              <div class="chekItemLine">
                <div class ="lineItem">
                  <input type="checkbox" form="form" id="kor" value="950" name="Коробка"  checked/><label for="kor"><span></span></label><a class="tooltip ttOrange yellow-tooltip">Коробка <i class="fa fa-info" aria-hidden="true"></i><span>Дверная коробка: </span></a></div>
                  <div class="linePrice"><span id="korRezult">950</span> <i class="fa fa-rub" aria-hidden="true"></i></div>
                </div>
                <div class="chekItemLine">
                  <div class ="lineItem">
                    <input type="checkbox" form="form" id="nal" value="990" name="Наличник"  checked/><label for="nal"><span></span></label><a class="tooltip ttOrange yellow-tooltip">Наличник <i class="fa fa-info" aria-hidden="true"></i><span>Дверной наличник</span></a></div><div class="linePrice"><span id="nalRezult">990</span> <i class="fa fa-rub" aria-hidden="true"></i>
                  </div>
                </div>
                <div class="chekItemLine">
                  <div class ="lineItem">
                    <input type="checkbox" form="form" id="dob" value="750" name="Добор"  checked/><label for="dob"><span></span></label><a class="tooltip ttOrange yellow-tooltip">Добор <i class="fa fa-info" aria-hidden="true"></i><span>Дверной добор комплект </span></a></div><div class="linePrice"><span id="dobRezult">750</span> <i class="fa fa-rub" aria-hidden="true"></i>
                  </div>
                </div>
                <div class="chekItemLine">
                  <div class ="lineItem">
                    <input type="checkbox" form="form" id="fur" value="780" name="Фурнитура"  checked/><label for="fur"><span></span></label><a class="tooltip ttOrange yellow-tooltip">Фурнитура <i class="fa fa-info" aria-hidden="true"></i><span>В комплкт входит </span></a></div><div class="linePrice"><span id="furRezult">780</span> <i class="fa fa-rub" aria-hidden="true"></i>
                  </div>
                </div>
                <div class="chekItemLine">
                  <div class ="lineItem2">Итого:</div>
                  <div class="linePrice2"><span id="result">7470</span> <i class="fa fa-rub" aria-hidden="true"></i></div>
                </div>
                <div class="blockButt"><a href="#form" class="zakazButtBig">Заказать</a></div>

              </div>
            </div>

</body>
</html>

спасибо огромное, так его переделать я бы сам точно не смог.

подскажите пожалуйста как в этот калькулятор добавить выпадающий список

manager011,
если нужна анимация, то не представляю.
если добавить значение, то в конце строки 105 дописать обработку селектора.
sum += $("ваш список").val();

облазил весь интернет, нашел только здесь анимацию цифр в калькуляторе, но знаний конечно же нет самому сделать. а увидел я это вот на этом сайте http://www.obivochka.ru , там работает анимация и в выпадающем списке.

manager011,
анимаций чисел полон интернет, в примере не увидел никакой анимации в выпадающем списке.
анимация идёт только результата (всей суммы).

мне как раз сумма и нужна

анимаций чисел примеров много, но вот прикрутить к калькулятору у меня мозгов не хватает, а здесь готовый пример. я еще только учусь

manager011,
весь алгоритм

price = 0;


 function costCalculator() {
        var sum = 0;
        //....сосчитали новую сумму (sum)
        count("#result", price, sum); //показали анимацию из старого значения(из price) в новое  (в sum)
        price = sum  //новое значение сохранили
    }

спасибо, буду разбираться.