js实现更新数据_js函数更新数值-CSDN博客

本文链接：https://blog.csdn.net/2302_80798583/article/details/138645830

需求：每5秒请求一次接口（json假数据），将页面的数据进行更新，同时json假数据为： [{ name：’商品名‘, money：10， }] 这样的数据格式，有10条，每5秒更新1条的数据将价格上升1元，每次更新一条，更新完一轮后再开始继续更新

<!DOCTYPE html>
<html>
<head>
    <title>更新数据</title>
</head>
<body>
    <div id="dataDisplay"></div>

    <script>
        //JSON 数据
        let jsonData = [
            { name: '商品1', money: 10 },
            { name: '商品2', money: 10 },
        ];

        // 显示数据的函数
        function displayData(data) {
            let displayDiv = document.getElementById('dataDisplay');
            displayDiv.innerHTML = ''; // 清空原有内容
            data.forEach(item => {
                displayDiv.innerHTML += `<p>${item.name} - ￥${item.money}</p>`;
            });
        }

        // 更新数据的函数
        function updateData() {
            let index = 0;
            let intervalId = setInterval(() => {
                // 更新当前条目的价格
                jsonData[index].money += 1;
                // 显示更新后的数据
                displayData(jsonData);
                // 移动到下一条数据，如果已经是最后一条，则重新从第一条开始
                index = (index + 1) % jsonData.length;
                if (index === 0) {
                    // 如果更新完一轮，清除定时器并重新开始更新
                    clearInterval(intervalId);
                    intervalId = setInterval(updateData, 5000);
                }
            }, 5000);
        }

        // 页面加载完成后开始更新数据
        window.onload = updateData();
    </script>
</body>
</html>