如何根据JavaScript生成的1-30随机数选择对应CSS精灵图？

嘿，这问题很常见，其实用JS动态操作CSS类就能轻松搞定，而且这也是最符合前端最佳实践的方式——毕竟你已经用SpriteCow生成了现成的类，直接用就好！

方法一：动态添加/替换CSS类（推荐） #

这种方式能保持样式和逻辑分离，后续修改精灵图位置只需要调整CSS，不用碰JS，维护起来超方便。

步骤：

1. 先在HTML里准备一个承载精灵的元素，给它基础的spriteBigPart类：

<div id="spriteWrapper" class="spriteBigPart"></div>

2. 用你的随机数生成逻辑拿到1-30的数字，然后给元素添加对应的part_N类。记得先移除之前的part_*类，避免多个类叠加导致样式冲突：

// 生成1-30的随机数（你的现有逻辑）
const randomPartNumber = Math.floor(Math.random() * 30) + 1;

// 获取精灵容器元素
const spriteElement = document.getElementById('spriteWrapper');

// 移除所有已存在的part_*类（可选，但更稳妥）
spriteElement.classList.forEach(className => {
  if (className.startsWith('part_')) {
    spriteElement.classList.remove(className);
  }
});

// 添加对应的目标类
spriteElement.classList.add(`part_${randomPartNumber}`);

方法二：直接操作元素样式（不推荐，但可行） #

如果你不想依赖CSS类，也可以直接通过JS设置backgroundPosition、width和height，但这样会把样式逻辑写进JS里，后期维护成本高。不过如果你需要这种方式，也可以参考：

// 假设你把所有精灵的样式数据存在一个对象里
const spriteData = {
  1: { x: '-26px', y: '-20px', width: '121px', height: '121px' },
  2: { x: '-187px', y: '-21px', width: '121px', height: '121px' },
  // ... 把30个精灵的对应数据都填进去
};

const randomNum = Math.floor(Math.random() * 30) + 1;
const spriteEl = document.getElementById('spriteWrapper');
const currentSprite = spriteData[randomNum];

spriteEl.style.backgroundPosition = `${currentSprite.x} ${currentSprite.y}`;
spriteEl.style.width = currentSprite.width;
spriteEl.style.height = currentSprite.height;

小提示 #

• 确保你的随机数生成逻辑是正确的：Math.floor(Math.random() * 30) + 1确实能生成1到30之间的整数，不会出现0或者31。
• 如果你的精灵容器是动态创建的，只需要在创建元素后给它添加对应的类就行，逻辑是一样的。

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