JavaScript personal "highscores"

JavaScript personal "highscores"

本文关键字：quot highscores personal JavaScript      更新时间：2023-09-26

我不是试图让它保存服务器端或任何东西，但只是一次保存，所以如果你刷新页面的数据将消失。我在这里搜索了一下，用谷歌搜索了一下，没有找到任何与我所说的完全相关的东西，但也许我搜索错了。

<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可以做到我想要的，所以这就是为什么我来到这里。这是一款速度/反应类型的游戏。如果方便的话，我想也许只过5点。

我不得不"工作"，所以它更新了一个，但是当它去更新另一个时，它删除了最后一个，这让我很生气。(我是较新的在一些编码(主要是代码整洁)

你可以删除一个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>

看来我应该介绍你的新朋友sessionStorage

sessionStorage就像localStorage，但它保留信息，只要浏览器是打开的。

保存到sessionStorage真的很容易:

sessionStorage.setItem("key", "value")

然后，检索数据

sessionStorage.getItem("key") // --> "value"
那么，一个高分的例子: 
function save(score) {
  // get the scores
  var scores = JSON.parse(sessionStorage.getItem("scores")) || []
  // add the scores to the list
  scores.push(score)
  // sort the scores into the new list
  scores = scores.sort().reverse()
  // Save inside sessionStorage
  sessionStorage.setItem("scores", JSON.stringify(scores))
}
相关文章：