需求：每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>
