编辑1

Question

我正在尝试使用HTML和Javascript创建运行状况栏，在单击链接时会删除一颗心脏。那似乎对我有用。但是我也希望它在重新加载时显示与以前相同的运行状况。到目前为止，我所拥有的如下。它似乎部分起作用。例如，当我单击链接后，它将删除一颗心。当我重新加载时，尽管所有的心都显示了出来。如果我再次单击链接两次，则表明我失去了两颗心，但显示了弹出窗口，显示“您已死亡！”。除了不正确地显示心意之外，它似乎在表现我想要的方式。我在做什么错了？

if (sessionStorage.getItem("loaded") !== "loaded"){
    sessionStorage.setItem("heartcount",3);
    sessionStorage.setItem("loaded","loaded");
}

function playerLoose(){
    sessionStorage.setItem("heartcount", sessionStorage.getItem("heartcount")-1);
    if (sessionStorage.getItem("heartcount") == 2){
        document.getElementById("heart1").style.display = "none";
        document.getElementById("noheart1").style.display = "inline";
    }
    if (sessionStorage.getItem("heartcount") == 1){
        document.getElementById("heart2").style.display = "none";
        document.getElementById("noheart2").style.display = "inline";
    }
    if (sessionStorage.getItem("heartcount") == 0){
        document.getElementById("heart3").style.display = "none";
        document.getElementById("noheart3").style.display = "inline";
        setTimeout(playerDie, 100);
    }
}
function playerDie(){
    
    alert("You died!")
}

function playerLoad(){
    if (sessionStorage.getItem("heartcount") <= 2){
        document.getElementById("heart1").style.display = "none";
        document.getElementById("noheart1").style.display = "inline";
    }
    if (sessionStorage.getItem("heartcount") <= 1){
        document.getElementById("heart2").style.display = "none";
        document.getElementById("noheart2").style.display = "inline";
    }
    if (sessionStorage.getItem("heartcount") <= 0){
        document.getElementById("heart3").style.display = "none";
        document.getElementById("noheart3").style.display = "inline";
    }
}

#lifebar{
    position: absolute;
    bottom: 2%;
    background-color: white;
    padding: 1%;
    z-index: 30;
    border-radius: 20vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 0.25%;
    box-shadow: 0px 0px 10px lightgray;
}

#hearts{
    list-style-type: none;
    display: inline;
    padding: 0px;
}

li{
    display: inline;
    color: red;
}

#noheart1{
    display: none;
}

#noheart2{
    display: none;
}

#noheart3{
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page 2</title>
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body onload="return changeColor();playerLoad()">
        <script src="lives.js"></script>
        <div id="lifebar">
            <ul id="hearts">
                <li id="heart1">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite</sub></i>
                </li>
                <li id="heart2">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite</sub></i>
                </liv>
                <li id="heart3">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite</sub></i>
                </li>
                <li id="noheart1">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite_border</sub></i>
                </li>
                <li id="noheart2">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite_border</sub></i>
                </li>
                <li id="noheart3">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite_border</sub></i>                
                </li>
            </ul>
        </div>
        
        <h1 id="temp"><a href="#" onclick="playerLoose()">Page 1A</a></h1>
        <script src="lives.js"></script>
                    
    </body>
</html>

Answer 1

在playerLoose()中尝试使用===而不是==，因为===会更精确，因为与==相比，它将获得更好的结果< / p>

编辑1

尝试一下，它为我工作。如果您不满意，请尝试更改函数名称或其他内容。

if (sessionStorage.getItem("loaded") !== "loaded"){
    sessionStorage.setItem("heartcount",3);
    sessionStorage.setItem("loaded","loaded");
}

function playerLoose(){
    sessionStorage.setItem("heartcount", sessionStorage.getItem("heartcount")-1);
    switch (sessionStorage.getItem("heartcount") {
      case 2:
        document.getElementById("heart1").style.display = "none";
        document.getElementById("noheart1").style.display = "";
        break;
      case 1:
        document.getElementById("heart2").style.display = "none";
        document.getElementById("noheart2").style.display = "";
        break;
      case 0:
        document.getElementById("heart3").style.display = "none";
        document.getElementById("noheart3").style.display = "";
        setTimeout(playerDie, 100);
        break;
    }
}
function playerDie(){
    
    alert("You died!")
}

function playerLoad(){
    if (sessionStorage.getItem("heartcount") <= 2){
        document.getElementById("heart1").style.display = "none";
        document.getElementById("noheart1").style.display = "inline";
    }
    if (sessionStorage.getItem("heartcount") <= 1){
        document.getElementById("heart2").style.display = "none";
        document.getElementById("noheart2").style.display = "inline";
    }
    if (sessionStorage.getItem("heartcount") <= 0){
        document.getElementById("heart3").style.display = "none";
        document.getElementById("noheart3").style.display = "inline";
    }
}

#lifebar{
    position: absolute;
    bottom: 2%;
    background-color: white;
    padding: 1%;
    z-index: 30;
    border-radius: 20vw;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 0.25%;
    box-shadow: 0px 0px 10px lightgray;
}

#hearts{
    list-style-type: none;
    display: inline;
    padding: 0px;
}

li{
    display: inline;
    color: red;
}

#noheart1{
    display: none;
}

#noheart2{
    display: none;
}

#noheart3{
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page 2</title>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body onload="return changeColor();playerLoad()">
        <div id="lifebar">
            <ul id="hearts">
                <li id="heart1">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite</sub></i>
                </li>
                <li id="heart2">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite</sub></i>
                </liv>
                <li id="heart3">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite</sub></i>
                </li>
                <li id="noheart1">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite_border</sub></i>
                </li>
                <li id="noheart2">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite_border</sub></i>
                </li>
                <li id="noheart3">
                    <i class="material-icons" style="font-size: 50px"><sub>favorite_border</sub></i>                
                </li>
            </ul>
        </div>
        
        <h1 id="temp"><a href="#" onclick="playerLoose()">Page 1A</a></h1>
                    
    </body>
</html>

编辑2

您还可以将负载侦听器更改为document.addEventListener(‘load’,()=>{//the function you want to execute//};

Answer 2

document.addEventListener（'load'，（）=> {

////从存储中获取项目并设置为变量 playerLoad（）; //您甚至可以在此处将该变量作为参数传递

})

function playerLoad（）;

在健康栏上显示正确的心数

2 个答案:

编辑1

编辑2