在JavaScript中使用随机数修改类名

我的计划

我有一个饼图css，我用它以百分比显示饼图

该类的工作方式如下：

第二个类p20意味着它应该显示一个20%的图表，因此如果我将其更改为p70，它将显示一个70%的图表

现在我还有一个Java脚本代码来生成一个随机数并将其显示在div中

setInterval(function() {
    var random = (Math.floor((Math.random() * 100) + 1));
    document.getElementById("demo").innerHTML = random;
}, 1000);

它起作用了

我想要什么

但是我也希望随机数改变chart div的类，比如

如果随机数为30，则图表的类别更改为 p30

,

如果随机数为80，则图表的类将更改为 p80

我已经试过了，但它不起作用，它只更新第一个随机数并停止

 setInterval(function() {
     var random = (Math.floor((Math.random() * 100) + 1));
     document.getElementById("demo").innerHTML = random;
     //remove the default class and add the new class
     document.getElementById("chart").classList.remove('p20');
     document.getElementById("chart").classList.add('p' + random);
 }, 1000);

---

要删除以前的类，您必须知道以前存在哪个类，要获得它，我将它存储在prevClass属性中

setInterval(function() {
     var random = (Math.floor((Math.random() * 100) + 1));
     var ele = document.getElementById("chart");
     ele.innerHTML = random;
     //remove the default class and add the new class
     var prev = ele.getAttribute("prevClass");
     ele.classList.remove(prev||"");
     ele.classList.add('p' + random);
     ele.setAttribute("prevClass",'p' + random);
 }, 1000);

可以说，全局地在当前范围的外侧声明previousRandom变量将允许您跟踪在最后一个间隔中生成的随机值

var previousRandom;
setInterval(function() {
  var random = (Math.floor((Math.random() * 100) + 1));
  document.getElementById("demo").innerHTML = random;
  //remove the previous (random) class and add the new (random) class
  document.getElementById("chart").classList.remove(previousRandom ? ('p' + previousRandom) : false);
  document.getElementById("chart").classList.add('p' + random);
  previousRandom = random;
}, 1000);

---

通过这种方式，我们可以生成一个新的随机值，将其添加到元素中，并在下一个间隔中删除以前的随机值。

一般来说，您希望将最后一个类保留在：

---

您真的要为100个不同的类创建css选择器吗？您需要跟踪旧的编号以正确删除关联的类名。代码中也没有声明变量ran，您的意思是“p”+random？document.getElementByIdchart.classList.remove“p20”；如果在第一次添加类似p50的内容后，这将不起任何作用。@JaredSmith我将其更改为random，我很高兴您理解了这个问题，那么如何跟踪以前的随机数呢？或者，我可以随时将第二类更改为新的随机数，而不管前一类如何number@staynjokede查看我的答案。我不知道为什么我一直得到这个未捕获的DomeException:未能在“DOMTokenList”上执行“remove”：提供的令牌不能为空。我的错误，请稍后检查编辑。问题是.remove不允许在没有以前的随机值的情况下在第一次迭代时出现空字符串。Uncaught TypeError:无法设置null的属性'innerHTML'，这意味着您的DOM没有正确加载，但id为demo的元素还不存在，因此getElementById'demo'返回null，作为回报，它没有方法。innerHtml。要么将整个-标记放在window.onload=function{…myanswer…}函数中提供的代码前面，要么将窗口中提供的整个代码包装起来。这样JS将在DOM完全加载时执行。出于好奇，有没有办法让数组中的前一个Random保持有序，这样我就可以用它们来绘制图表或其他东西。？我一直得到未捕获的TypeError:无法读取的属性“classList”null@staynjokede那么此时DOM中没有id为chart的元素。确保此代码在DOM准备就绪后执行。无论如何，您都应该这样做。

setInterval((function() {
  var last = 0;
  var element = document.getElementById('chart');
  // this is the function that will actually be run by setInterval
  // and it has access to last and element
  return function () {
    element.classList.remove('p' + last);
    last = Math.random() * 100 | 0; // binary or with 0 truncates to int
    element.innerHTML = last;
    element.classList.add('p' + last);
  };
})(), 1000); // note the invocation here that returns the inner function