Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как сделать плавное изменения числа в калькуляторе ZeroBlock в Tilda
0
Special Offers
GET 30% OFF
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
$

Как сделать плавное изменения числа в калькуляторе ZeroBlock в Tilda

1
Создали ZeroBlock и добавили форму с ползунком и форму с калькулятором отдельно, который считает значения от ползунка
2
Полю с калькулятором задали имя total
3
Создали элемент текст в Zero и присвоили ему ссылку #numgrow
4
Добавили код на страницу, в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём плавное изменение итогового числа в форме ZeroBlock.
Длительность видео: 20 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        function divideNumberByPieces(x, delimiter) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
        };
        
        const tCalc = document.querySelectorAll(".tn-atom__form .t-calc__hiddeninput");
        tCalc.forEach(function (el, index) {
            el.addEventListener('change',function(e) {
                setTimeout(function () {
            	    $(function() {
            	        const cLnum = 'a[href="#numgrow"]';
            	        const numb_start =  +document.querySelector(cLnum).innerHTML.replace(/\D+/g,"");
            	        const numb_end = document.querySelector('input[name="total"]').value;
            	        
            	        $({numberValue: numb_start}).animate({numberValue: numb_end}, {
            			    duration: 1700, 
            			    easing: "swing",
            			    step: function(val) {document.querySelector(cLnum).innerHTML = divideNumberByPieces(Math.ceil(val));  
            			}
            		    });
            	    });
                }, 300);  
            });    
        });
    })();    
});    
</script>
Made on
Tilda