Question

我的设置

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

班级以这种方式运作：
<div id="chart" class="c100 p20 small dark center">

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

现在我还有一个Java脚本代码来生成一个随机数并将其显示在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

要删除上一个课程，您必须知道之前有哪个课程，为了得到它，我将其存储在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);

Answer 2

声明当前范围的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);

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

Answer 3

一般来说，您希望将最后一节课保留在closure中：

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

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

3 个答案: