javascript - 在 JavaScript 中用随机数修改类名

Question

我的设置

我有一个饼图 CSS，用于以百分比显示饼图，

这个类是这样工作的:
<div id="chart" class="c100 p20 small dark center">

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

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

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

有效

我想要什么

但是我也想要随机数来改变图表div的类，比如

• 如果随机数是30 , 然后图表的类别变为 p30

  <div id="chart" class="c100 p30 small dark center"> ,

  如果随机数是80 , 然后图表的类别变为 p80

  <div id="chart" class="c100 p80 small dark center">

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

 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);

Answer 1

在当前范围之外声明一个 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);

这样我们可以生成一个新的随机值，将其添加到元素中，在下一个间隔中我们将删除先前的随机值。