Question

我正在玩HTML并希望了解某些事情是否可行。我有一张五首歌曲的表格，其中包含以下数据元素：歌曲名称，艺术家，持续时间和专辑。我把它们变成了一张桌子，现在我想制作一张统计表，显示有多少首歌曲，多少艺术家，以及播放整首歌曲列表的总时间。我想帮助找出如何从表中添加所有时间而不仅仅是对实际数字进行硬编码。这可能吗？

到目前为止，这是我的代码（我不知道要添加多少，但我不想把整个内容放在一边）：

<script>
    var playlist = [
    {
        "Song Name": "X",
        "Artist": "Schoolboy Q",
        "Duration": "4:27",
        "Album": "Black Panther the Album"
    },
    {
        "Song Name": "White Sand",
        "Artist": "Migos",
        "Duration": "3:22",
        "Album": "Culture 2"
    },
    {
        "Song Name": "Goat 2.0",
        "Artist": "Eric Bellinger",
        "Duration": "3:07",
        "Album": "Goat 2.0"
    },
    {
        "Song Name": "No Drama",
        "Artist": "Tinashe",
        "Duration": "3:20",
        "Album": "No Drama"
    },
    {
        "Song Name": "Telephone Calls",
        "Artist": "A$AP Mob",
        "Duration": "3:50",
        "Album": "Cozy Tapes Vol. 1 Friends -"
    }

<body>
    <h1>Music Playlist</h1>
    <h2>Music Table</h2>
    <table id="music"></table><br><br>
    <h2>Updated Music Table</h2>
    <table>
        <thead>
            <tr><th>Song</th><th>Artist</th><th>Duration</th><th>Album</th></tr>
        </thead>
        <tbody id="playmusic">

        </tbody>
    </table>
    <script>
        /*document.write(music[0].First);*/
        var text = "";
        var newtext = "";
        /*var x;*/
        for (var x in playlist) {
            if (playlist.hasOwnProperty(x)) {
                var obj = playlist[x];
                for (var y in obj) {
                    if (obj.hasOwnProperty(y)) {
                        text += "<tr><td align='right'>" + y + "</td><td>" + obj[y] + "</td></tr>";
                        /*document.write(y + " -> " + obj[y] + '\n');*/
                    }
                }
                newtext += "<tr><td>" + obj['Song Name'] + "</td><td>" + obj['Artist'] + "</td><td>" + obj['Duration'] + "</td><td>" + obj['Album'] + "</td><tr>";
            }
        }
        document.getElementById("music").innerHTML = text;
        document.getElementById("playmusic").innerHTML = newtext;
        document.getElementByID("music").innerHTML = text;
    </script>
    <p>
        To go back to the Index page: <a href="http://wlr3iii.github.io/index.html">Click</a>
    </p>

我会尝试循环“持续时间”并找到一个允许我添加找到的数字的函数吗？

Answer 1

您可以使用map将持续时间转换为单独的数组，reduce将所有数字相加，并使用几行额外的代码来纠正分钟/秒：

var playlist=[{"Song Name":"X","Artist":"Schoolboy Q","Duration":"4:27","Album":"Black Panther the Album"},{"Song Name":"White Sand","Artist":"Migos","Duration":"3:22","Album":"Culture 2"},{"Song Name":"Goat 2.0","Artist":"Eric Bellinger","Duration":"3:07","Album":"Goat 2.0"},{"Song Name":"No Drama","Artist":"Tinashe","Duration":"3:20","Album":"No Drama"},{"Song Name":"Telephone Calls","Artist":"A$AP Mob","Duration":"3:50","Album":"Cozy Tapes Vol. 1 Friends -"}]

function addDurations(data) {
  const total = playlist
    .map(el => el.Duration.split(':'))
    .reduce((p, c) => {
      p.minutes += Number(c[0]);
      p.seconds += Number(c[1]);
      return p;
    }, { minutes: 0, seconds: 0 });

  const whole = Math.floor(total.seconds / 60);
  total.minutes += whole;
  total.seconds = total.seconds % 60;
  return total;
}

console.log(addDurations(playlist))

从歌曲列表中添加时间

1 个答案: