\n \n\n\n`\n\n---\n---\n\n### Giải thích\n\n- **UIkit CSS**: Được sử dụng để làm giao diện đơn giản và đẹp mắt.\n Sử dụng `uk-container`, `uk-heading-medium`, và `uk-text-center` để căn chỉnh và định dạng.\n\n \n- **JavaScript**:\n Hàm `incrementCounter`:\n `elementId`: ID của phần tử chứa số.\n\n - `targetValue`: Giá trị mà số sẽ tăng đến.\n\n - `duration`: Tổng thời gian hiệu ứng (tính bằng ms).\n\n - Tính thời gian giữa mỗi bước (`interval`) để tăng đều.\n\n - Sử dụng `setTimeout` để tăng số dần dần thay vì tăng ngay lập tức.\n\n- **Hoạt động**:\n Khi tải trang, số sẽ tăng dần từ `0` đến `100` trong vòng `2 giây`.\n\nBạn có thể thay đổi `targetValue` hoặc `duration` theo nhu cầu. 😊","keywords":" JavaScript","about":[{"@type":"Thing","name":" JavaScript"}],"interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"comment":[]}
TopDev

Hàm javascript load số tăng dần đẹp mắt như google analytics

minhu 📖 1 phút đọc

Để tạo hiệu ứng số tăng dần từ 0 đến 100 khi trang web được tải, bạn có thể sử dụng kết hợp HTML, CSS (UIkit)JavaScript. Dưới đây là một đoạn mã ví dụ:

HTML#

`

Tăng dần số

0

Số sẽ tăng dần đến 100!

<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.25/dist/js/uikit.min.js"></script>
<script>
    // Hàm tăng số
    function incrementCounter(elementId, targetValue, duration) {
        const element = document.getElementById(elementId);
        let currentValue = 0;
        const interval = Math.ceil(duration / targetValue); // Tính khoảng thời gian mỗi lần tăng
        const step = () => {
            if (currentValue < targetValue) {
                currentValue++;
                element.textContent = currentValue;
                setTimeout(step, interval);
            }
        };
        step();
    }

    // Gọi hàm khi tải trang
    document.addEventListener('DOMContentLoaded', () => {
        incrementCounter('counter', 100, 2000); // Tăng đến 100 trong 2 giây
    });
</script>
`

Giải thích#

  • UIkit CSS: Được sử dụng để làm giao diện đơn giản và đẹp mắt. Sử dụng uk-container, uk-heading-medium, và uk-text-center để căn chỉnh và định dạng.

  • JavaScript: Hàm incrementCounter: elementId: ID của phần tử chứa số.

    • targetValue: Giá trị mà số sẽ tăng đến.

    • duration: Tổng thời gian hiệu ứng (tính bằng ms).

    • Tính thời gian giữa mỗi bước (interval) để tăng đều.

    • Sử dụng setTimeout để tăng số dần dần thay vì tăng ngay lập tức.

  • Hoạt động: Khi tải trang, số sẽ tăng dần từ 0 đến 100 trong vòng 2 giây.

Bạn có thể thay đổi targetValue hoặc duration theo nhu cầu. 😊

Bài liên quan trong # JavaScript

✓ Đã sao chép link