时间戳

首页 > 解决方案 > 动态进度条高度

javascript - 动态进度条高度

问题描述

我有一个对象：

myObj = [
{
    word_id : "...",
    sub_word : {
       "attr1" : "....",
       "attr2" : "....",
    },
    "level" : 0
},
{
    word_id : "...",
    sub_word : {
       "attr1" : "....",
       "attr2" : "....",
    },
    "level" : 1
},
{
    word_id : "...",
    sub_word : {
       "attr1" : "....",
       "attr2" : "....",
    },
    "level" : 2
},
.
.
.
.]

我有三个进度条，显示每个单词的百分比取决于它的水平。例如，如果myObj包含17个单词：13个2级单词，2个1级单词和2个0级单词。三个进度条将分别填充CSS/JS，使用每个级别的单词数乘以10 .为此，我写了类似的东西：

$(".progressBar").css("height", numberOfWords*10 + '%');

这里的问题是，如果我有超过 10 个单词的某个级别，进度条将被完全填满，因为计算出的高度将是进度条的 100%。

有没有办法根据myObj长度动态制作进度条？

标签： javascriptjquerycss

解决方案

您可以像这样计算百分比：（级别与您的示例相匹配）

var words = [
  { "level": 2, "word_id": "Never" },
  { "level": 2, "word_id": "Gonna" },
  { "level": 2, "word_id": "Give" },
  { "level": 2, "word_id": "You" },
  { "level": 2, "word_id": "Up" },
  { "level": 2, "word_id": "Never" },
  { "level": 2, "word_id": "Gonna" },
  { "level": 2, "word_id": "Let" },
  { "level": 2, "word_id": "You" },
  { "level": 2, "word_id": "Down" },
  { "level": 2, "word_id": "Never" },
  { "level": 2, "word_id": "Gonna" },
  { "level": 2, "word_id": "Run" },
  { "level": 0, "word_id": "Around" },
  { "level": 0, "word_id": "And" },
  { "level": 1, "word_id": "Desert" },
  { "level": 1, "word_id": "You" }
];

var levels = [...new Set(words.map(a => a.level))]
levels.sort();

for (var level of levels) {
  var wordsPerLevel = words.filter(a => a.level == level).length;
  var percentage = Math.round((wordsPerLevel/words.length)*100);
  console.log("Level " + level + ": " + percentage + "%");
}

这将显示words数组中包含的每个级别的百分比。级别将被排序。

推荐阅读