JavaScript个人 "highscores"

Question

我并不是试图让它保存服务器端或任何东西，而只是一次性保存，所以如果刷新页面，数据就会消失。我在这里和谷歌上搜索过，找不到任何与我所说的完全相关的东西，但也许我正在寻找错误的东西。

<div id="hs">
    <center>Past 10 scores.</center>
    <p> 1. <span id="t1">N/A</span></p>
    <p> 2. <span id="t2">N/A</span></p>
    <p> 3. <span id="t3">N/A</span></p>
    <p> 4. <span id="t4">N/A</span></p>
    <p> 5. <span id="t5">N/A</span></p>
    <p> 6. <span id="t6">N/A</span></p>
    <p> 7. <span id="t7">N/A</span></p>
    <p> 8. <span id="t8">N/A</span></p>
    <p> 9. <span id="t9">N/A</span></p>
    <p> 10. <span id="t10">N/A</span></p>
    </div>

试图使其成为 10,9,8,7,6,5,4,3,2,1，然后将其向下推并在 #1 中保留最新的，因此 1 变为 2, 2变为 3，等等

我已经尝试了很多事情，但没有任何效果(甚至不能100%确定js是否可以按照我想要的方式做到这一点，所以这就是我来这里的原因。这是一种速度/ react 类型的游戏。如果它能让它变得更容易的话，我想也许只能过五点。

我必须“工作”，所以它更新了一个，但是当它去更新另一个时，它删除了最后一个，让我很生气。(我在某些编码方面较新(尤其是代码的整洁性)

Answer 1

您可以删除 HTML 元素并添加新元素，如下所示:

function addHighScore(score) {
    var list = document.getElementById("hs").getElementsByTagName("OL")[0];
    var items = list.getElementsByTagName("LI");
    list.removeChild(items[items.length - 1]);
    var newItem = document.createElement("LI");
    newItem.innerHTML = score;
    list.insertBefore(newItem, items[0]);
}

addHighScore(200);

DIV {width: 320px;}
H1 {text-align: center;}

<div id="hs">
    <h1>Past 10 scores.</h1>
    <ol>
    <li>100</li>
    <li>90</li>
    <li>80</li>
    <li>70</li>
    <li>60</li>
    <li>50</li>
    <li>40</li>
    <li>30</li>
    <li>20</li>
    <li>10</li>
    </ol>
</div>