cevek · June 21, 2016 16:36
diff --git a/counter.html b/counter.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
 </head>
 <body>
 <style>
    body {
    }
    .test {
        display: flex;
        line-height: 15px;
        height: 15px;
        overflow: hidden;
        float: left;
        margin: 5px;
    }

    .slot {
        width: 10px;
        will-change: transform;
    }

    .slot.animate {
        transition: transform .5s ease;
    }

    .slot:before {
        content: '\A 9 \A 8 \A 7 \A 6 \A 5 \A 4 \A 3 \A 2 \A 1 \A 0 \A 9 \A 8 \A 7 \A 6 \A 5 \A 4 \A 3 \A 2 \A 1 \A 0';
        white-space: pre;
    }

    .slot.empty-zero:before {
        content: '\A 9 \A 8 \A 7 \A 6 \A 5 \A 4 \A 3 \A 2 \A 1 \A   \A 9 \A 8 \A 7 \A 6 \A 5 \A 4 \A 3 \A 2 \A 1 \A  ';
        white-space: pre;
    }

    .digit {
    }


 </style>
 <script>
    function digits(current, diff, minSlots = 0) {
        var test = document.createElement('div');
        test.className = 'test';
        document.body.appendChild(test);
        var slots = [];

        for (var j = 0; j < minSlots; j++) {
            addSlot();
        }
        var height = 15;
        var startPos = -height * 10;

        function addSlot() {
            var slot = document.createElement('div');
            slots.push(slot);
            slot.className = 'slot animate';
            test.appendChild(slot);
        }

        function removeSlot() {
            var last = slots.shift()
            last.parentNode.removeChild(last);
        }

        function setNumber(oldNumber, number, force) {
            var numStr = number.toString();
            var oldStr = oldNumber.toString();
            var max = Math.max(numStr.length, oldStr.length);
            for (let i = slots.length; i < max; i++) {
                addSlot();
            }
            for (let i = slots.length; i > max; i--) {
                removeSlot();
            }
 //            var max = 3;
            var fromTop = number > oldNumber;
            for (var i = 0; i < max; i++) {
                var digit = +numStr[numStr.length - i - 1] || 0;
                var oldDigit = +oldStr[oldStr.length - i - 1] || 0;
                console.log(max - i - 1, oldDigit, digit, fromTop, force, ((fromTop ? oldStr : numStr).length - 1 < i) && numStr.length !== oldStr.length);
                var pos = max - i - 1;
                if (force) {
                    setForceDigit(pos, digit, 1, numStr.length - 1 < i);
                } else {
                    setDigit(pos, oldDigit, digit, fromTop, false, ((fromTop ? oldStr : numStr).length - 1 < i) && numStr.length !== oldStr.length);
                }
            }
        }

        function setForceDigit(pos, num, area, emptyZero) {
            var slot = slots[pos];
            var moveToPos = startPos * area + num * height;
            slot.classList.remove('empty-zero');
            if (emptyZero) {
                slot.classList.add('empty-zero');
            }
            slot.classList.remove('animate');
            slot.style.transform = 'translateY(' + moveToPos + 'px)'
            slot.offsetHeight; // force reflow
            slot.classList.add('animate');
        }


        function setDigit(pos, oldNum, num, fromTop, force, emptyZero) {
            console.log(arguments);
            if (oldNum === num && !force) {
                return;
            }
            var slot = slots[pos];
            slot.classList.remove('empty-zero');
            if (emptyZero) {
                slot.classList.add('empty-zero');
            }
            var moveToPos = (startPos * (oldNum >= num ? 2 : 1) + oldNum * height);
            var nextPosToAnimate = (startPos * (fromTop ? 1 : 2) + num * height);
            if (force) {
                slot.style.transform = 'translateY(' + nextPosToAnimate + 'px)'
                return;
            }

            slot.classList.remove('animate');
            if (moveToPos !== nextPosToAnimate) {
                slot.style.transform = 'translateY(' + moveToPos + 'px)'
                slot.offsetHeight; // force reflow
                slot.classList.add('animate');
            }
            if (!force) {
                slot.style.transform = 'translateY(' + nextPosToAnimate + 'px)'
            }
        }

        function setNext() {
            var nextNumber = current + diff;
            setNumber(current, nextNumber);
            current = nextNumber;
            setTimeout(setNext, 1000 + Math.random() * 0);
        }

        setNumber(current, current, true);
        setTimeout(setNext, 1000);
    }
    for (var i = 0; i < 1; i++)
        digits(Math.random() * 1000 | 0, Math.random() * 5 | 0);
    digits(120, -5);


 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<style>
	body {
	}
	.test {
	display: flex;
	line-height: 15px;
	height: 15px;
	overflow: hidden;
	float: left;
	margin: 5px;
	}

	.slot {
	width: 10px;
	will-change: transform;
	}

	.slot.animate {
	transition: transform .5s ease;
	}

	.slot:before {
	content: '\A 9 \A 8 \A 7 \A 6 \A 5 \A 4 \A 3 \A 2 \A 1 \A 0 \A 9 \A 8 \A 7 \A 6 \A 5 \A 4 \A 3 \A 2 \A 1 \A 0';
	white-space: pre;
	}

	.slot.empty-zero:before {
	content: '\A 9 \A 8 \A 7 \A 6 \A 5 \A 4 \A 3 \A 2 \A 1 \A \A 9 \A 8 \A 7 \A 6 \A 5 \A 4 \A 3 \A 2 \A 1 \A ';
	white-space: pre;
	}

	.digit {
	}


	</style>
	<script>
	function digits(current, diff, minSlots = 0) {
	var test = document.createElement('div');
	test.className = 'test';
	document.body.appendChild(test);
	var slots = [];

	for (var j = 0; j < minSlots; j++) {
	addSlot();
	}
	var height = 15;
	var startPos = -height * 10;

	function addSlot() {
	var slot = document.createElement('div');
	slots.push(slot);
	slot.className = 'slot animate';
	test.appendChild(slot);
	}

	function removeSlot() {
	var last = slots.shift()
	last.parentNode.removeChild(last);
	}

	function setNumber(oldNumber, number, force) {
	var numStr = number.toString();
	var oldStr = oldNumber.toString();
	var max = Math.max(numStr.length, oldStr.length);
	for (let i = slots.length; i < max; i++) {
	addSlot();
	}
	for (let i = slots.length; i > max; i--) {
	removeSlot();
	}
	// var max = 3;
	var fromTop = number > oldNumber;
	for (var i = 0; i < max; i++) {
	var digit = +numStr[numStr.length - i - 1] \|\| 0;
	var oldDigit = +oldStr[oldStr.length - i - 1] \|\| 0;
	console.log(max - i - 1, oldDigit, digit, fromTop, force, ((fromTop ? oldStr : numStr).length - 1 < i) && numStr.length !== oldStr.length);
	var pos = max - i - 1;
	if (force) {
	setForceDigit(pos, digit, 1, numStr.length - 1 < i);
	} else {
	setDigit(pos, oldDigit, digit, fromTop, false, ((fromTop ? oldStr : numStr).length - 1 < i) && numStr.length !== oldStr.length);
	}
	}
	}

	function setForceDigit(pos, num, area, emptyZero) {
	var slot = slots[pos];
	var moveToPos = startPos * area + num * height;
	slot.classList.remove('empty-zero');
	if (emptyZero) {
	slot.classList.add('empty-zero');
	}
	slot.classList.remove('animate');
	slot.style.transform = 'translateY(' + moveToPos + 'px)'
	slot.offsetHeight; // force reflow
	slot.classList.add('animate');
	}


	function setDigit(pos, oldNum, num, fromTop, force, emptyZero) {
	console.log(arguments);
	if (oldNum === num && !force) {
	return;
	}
	var slot = slots[pos];
	slot.classList.remove('empty-zero');
	if (emptyZero) {
	slot.classList.add('empty-zero');
	}
	var moveToPos = (startPos * (oldNum >= num ? 2 : 1) + oldNum * height);
	var nextPosToAnimate = (startPos * (fromTop ? 1 : 2) + num * height);
	if (force) {
	slot.style.transform = 'translateY(' + nextPosToAnimate + 'px)'
	return;
	}

	slot.classList.remove('animate');
	if (moveToPos !== nextPosToAnimate) {
	slot.style.transform = 'translateY(' + moveToPos + 'px)'
	slot.offsetHeight; // force reflow
	slot.classList.add('animate');
	}
	if (!force) {
	slot.style.transform = 'translateY(' + nextPosToAnimate + 'px)'
	}
	}

	function setNext() {
	var nextNumber = current + diff;
	setNumber(current, nextNumber);
	current = nextNumber;
	setTimeout(setNext, 1000 + Math.random() * 0);
	}

	setNumber(current, current, true);
	setTimeout(setNext, 1000);
	}
	for (var i = 0; i < 1; i++)
	digits(Math.random() * 1000 \| 0, Math.random() * 5 \| 0);
	digits(120, -5);


	</script>
	</body>
	</html>