如何用JavaScript/jQuery实现数字热度从高到低的排名展示

看起来你已经搞定了每10秒在无序列表展示新数字的功能，要加有序列表的热度排名其实很简单——核心就是统计每个数字的出现次数，然后按次数从高到低排序渲染就行。我给你一步步拆解具体实现：

1. 先搞个统计容器 #

首先得有个地方存每个数字的出现次数，用对象最方便，键是数字，值是对应的次数：

// 初始化数字统计对象，页面加载时是空的
const numberCounts = {};

2. 每次新增数字时更新统计 #

当你从API拿到新数字并加到ul之后，顺手更新这个统计对象：

function updateCount(newNumber) {
  // 如果数字已经在统计里，次数+1；第一次出现就设为1
  numberCounts[newNumber] = (numberCounts[newNumber] || 0) + 1;
}

3. 排序并渲染热度排名 #

接下来写个函数，把统计好的数据排序，然后生成有序列表的内容：

function renderRankingList() {
  const rankingOl = document.querySelector('ol');
  // 把统计对象转成数组，格式是 [数字字符串, 次数]
  const sortedNumbers = Object.entries(numberCounts)
    // 按次数降序排，如果次数相同，按数字大小升序排（可选，避免排序混乱）
    .sort((a, b) => b[1] - a[1] || Number(a[0]) - Number(b[0]));

  // 先清空现有列表，避免重复渲染
  rankingOl.innerHTML = '';

  // 遍历排序后的数组，生成每个列表项
  sortedNumbers.forEach(([num, count]) => {
    const li = document.createElement('li');
    // 可以自定义显示内容，比如加上热度标记
    li.textContent = `数字 ${num}：出现 ${count} 次${count === sortedNumbers[0][1] ? ' 🔥' : ''}`;
    rankingOl.appendChild(li);
  });
}

4. 整合到你的现有逻辑里 #

把上面的函数插到你每10秒获取数字的流程里就行，大概是这样：

// 假设你现有获取随机数字的函数是这样的，根据你的实际代码调整
setInterval(async () => {
  try {
    // 调用你的API获取随机数字
    const res = await fetch('你的REST API地址');
    // 若API返回的是数字数组，记得取随机项：const numbers = await res.json(); const newNumber = numbers[Math.floor(Math.random() * numbers.length)];
    const newNumber = await res.json();

    // 你的现有逻辑：把数字加到ul里
    const numberUl = document.querySelector('ul');
    const newLi = document.createElement('li');
    newLi.textContent = newNumber;
    numberUl.appendChild(newLi);

    // 新增的逻辑：更新统计+渲染排名
    updateCount(newNumber);
    renderRankingList();
  } catch (err) {
    console.error('获取数字出错啦:', err);
  }
}, 10000);

额外的小优化 #

• 如果想要页面刷新后热度数据不丢失，可以把统计对象存在localStorage里：

  // 初始化时从localStorage读取，没有的话就新建空对象
  const numberCounts = JSON.parse(localStorage.getItem('numberHeat')) || {};
  
  // 更新统计后记得存回去
  function updateCount(newNumber) {
    numberCounts[newNumber] = (numberCounts[newNumber] || 0) + 1;
    localStorage.setItem('numberHeat', JSON.stringify(numberCounts));
  }
  

• 可以给排名靠前的数字加个样式，比如高亮：

  if (count === sortedNumbers[0][1]) {
    li.style.color = '#ff5722';
    li.style.fontWeight = 'bold';
  }
  

这样就能完美实现你要的热度排名啦，逻辑很清晰，和你现有的代码也能无缝结合。

内容的提问来源于stack exchange，提问作者pawlow8