CSS 提示关闭后消失

Question

我正在尝试创建一个简单的剪刀石头布游戏。我找到了一个工作版本 here, but was trying to add custom alerts using sweetalert。现在它弹出并询问我的选择，但是当我单击我的选择时它只显示结果。我检查了 chrome 中的来源面板，它不再将我的 css 列为来源。这里发生了什么？我究竟做错了什么？提前感谢您提供的任何帮助。

body{
    color: white;
    font-size: 16vmin;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

#stat{
    font-weight: 900;
}

#pag{
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 13vmax;
    width: 100%;
    border: 0px;
    color: white;
    font-family: 'Montserrat',sans-serif;
    font-size: 5vmin;
    background-color: rgb(96, 168, 236);
    box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.438);

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Rock Paper Scissors</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="main.js"></script>
</head>
<body id="bkg">
        <iframe id="error" style="display:none;" width="100%" height="500px" src="https://www.youtube.com/embed/t3otBjVZzT0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <script>
        rockpaperscissors();
        function rockpaperscissors() {
            var rps = ["rock","paper","scissors"];
            var rand = rps[Math.floor(Math.random() * rps.length)];
            swal({
                title: "Rock, Paper, Scissors",
                text: "Please choose either rock, paper, or scissors.",
                icon: "",
                buttons: { 
                    r: {
                        text: "Rock",
                        value: "r",
                    },
                    p: {
                        text: "Paper",
                        value: "p",
                    },
                    s: {
                        text: "Scissors",
                        value: "s",
                    },
                },
                    
            })
            .then((value) => {
                switch (value) {
                case "r":
                    switch (rand) {
                        case "rock":
                            document.getElementById("bkg").style.backgroundColor = "#efe58d";
                            document.write("<span id='stat'>tie</span> ");
                            document.write(': The computer chose rock you chose rock <br>');
                            break;
                        case "paper":
                            document.getElementById("bkg").style.backgroundColor = "#ff928b";
                            document.write("<span id='stat'>loss</span> ");
                            document.write(': The computer chose paper you chose rock <br>');
                            break;
                        case "scissors":
                            document.getElementById("bkg").style.backgroundColor = "#9be592";
                            document.write("<span id='stat'>win</span> ");
                            document.write(': The computer chose scissors you chose rock <br>');
                            break;
                        default:
                            break;
                    };
                    break;
                case "p":
                    switch (rand) {
                            case "rock":
                                document.getElementById("bkg").style.backgroundColor = "#9be592";
                                document.write("<span id='stat'>win</span> ");
                                document.write(': The computer chose rock you chose paper <br>');
                                break;
                            case "paper":
                                document.getElementById("bkg").style.backgroundColor = "#efe58d";
                                document.write("<span id='stat'>tie</span> ");
                                document.write(': The computer chose paper you chose paper <br>');
                                break;
                            case "scissors":
                                document.getElementById("bkg").style.backgroundColor = "#ff928b";
                                document.write("<span id='stat'>loss</span> ");
                                document.write(': The computer chose scissors you chose paper <br>');
                                break;
                            default:
                                break;
                        };
                    break;
                case "s":
                    switch (rand) {
                            case "rock":
                                document.getElementById("bkg").style.backgroundColor = "#ff928b";
                                document.write("<span id='stat'>loss</span> ");
                                document.write(': The computer chose rock you chose scissors <br>');
                                break;
                            case "paper":
                                document.getElementById("bkg").style.backgroundColor = "#9be592";
                                document.write("<span id='stat'>win</span> ");
                                document.write(': The computer chose paper you chose scissors <br>');
                                break;
                            case "scissors":
                                document.getElementById("bkg").style.backgroundColor = "#efe58d";
                                document.write("<span id='stat'>tie</span> ");
                                document.write(': The computer chose scissors you chose scissors <br>');
                                break;
                            default:
                                break;
                        };
                    break;
            
                default:
                        document.getElementById("error").style.display = "block";
                    break;
            };
        });
    }
            
        function reload(){
            location.reload();
        };
        window.addEventListener('keydown', function(e) {
            if (e.keyCode == 13 || e.keyCode == 32){
                reload();
            }
        }
        );
    </script>
    <button onclick="reload()" id="pag">Play Again</button>
</body>
</html>

Answer 1

我想你错过了擦除整个文档的机会。如果你像

一样在分开的 div 中写 anwser，效果会更好

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Rock Paper Scissors</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <style>
body{
color: white;
font-size: 16vmin;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}

#stat{
font-weight: 900;
}

#pag{
position: absolute;
bottom: 0px;
left: 0px;
height: 13vmax;
width: 100%;
border: 0px;
color: white;
font-family: 'Montserrat',sans-serif;
font-size: 5vmin;
background-color: rgb(96, 168, 236);
box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.438);

}
    </style>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="main.js"></script>
</head>

<body id="bkg">
    <iframe id="error" style="display:none;" width="100%" height="500px" src="https://www.youtube.com/embed/t3otBjVZzT0"
        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div id="test">

        </div>
    <script>
             function reload() {
                    document.location.reload();
                };
        window.onload = function () {
            var test = document.getElementById("test");
            rockpaperscissors();
            function rockpaperscissors() {
                var rps = ["rock", "paper", "scissors"];
                var rand = rps[Math.floor(Math.random() * rps.length)];
                swal({
                    title: "Rock, Paper, Scissors",
                    text: "Please choose either rock, paper, or scissors.",
                    icon: "",
                    buttons: {
                        r: {
                            text: "Rock",
                            value: "r",
                        },
                        p: {
                            text: "Paper",
                            value: "p",
                        },
                        s: {
                            text: "Scissors",
                            value: "s",
                        },
                    },

                })
                    .then((value) => {
                        switch (value) {
                            case "r":
                                switch (rand) {
                                    case "rock":
                                        document.getElementById("bkg").style.backgroundColor = "#efe58d";
                                        test.innerHTML = "<span id='stat'>tie</span> ";
                                        test.innerHTML = ': The computer chose rock you chose rock <br>';
                                        break;
                                    case "paper":
                                        document.getElementById("bkg").style.backgroundColor = "#ff928b";
                                        test.innerHTML = "<span id='stat'>loss</span> ";
                                        test.innerHTML = ': The computer chose paper you chose rock <br>';
                                        break;
                                    case "scissors":
                                        document.getElementById("bkg").style.backgroundColor = "#9be592";
                                        test.innerHTML = "<span id='stat'>win</span> ";
                                        test.innerHTML = ': The computer chose scissors you chose rock <br>';
                                        break;
                                    default:
                                        break;
                                };
                                break;
                            case "p":
                                switch (rand) {
                                    case "rock":
                                        document.getElementById("bkg").style.backgroundColor = "#9be592";
                                        test.innerHTML = "<span id='stat'>win</span> ";
                                        test.innerHTML = ': The computer chose rock you chose paper <br>';
                                        break;
                                    case "paper":
                                        document.getElementById("bkg").style.backgroundColor = "#efe58d";
                                        test.innerHTML = "<span id='stat'>tie</span> ";
                                        test.innerHTML = ': The computer chose paper you chose paper <br>';
                                        break;
                                    case "scissors":
                                        document.getElementById("bkg").style.backgroundColor = "#ff928b";
                                        test.innerHTML = "<span id='stat'>loss</span> ";
                                        test.innerHTML = ': The computer chose scissors you chose paper <br>';
                                        break;
                                    default:
                                        break;
                                };
                                break;
                            case "s":
                                switch (rand) {
                                    case "rock":
                                        document.getElementById("bkg").style.backgroundColor = "#ff928b";
                                        test.innerHTML = "<span id='stat'>loss</span> ";
                                        test.innerHTML = ': The computer chose rock you chose scissors <br>';
                                        break;
                                    case "paper":
                                        document.getElementById("bkg").style.backgroundColor = "#9be592";
                                        test.innerHTML = "<span id='stat'>win</span> ";
                                        test.innerHTML = ': The computer chose paper you chose scissors <br>';
                                        break;
                                    case "scissors":
                                        document.getElementById("bkg").style.backgroundColor = "#efe58d";
                                        test.innerHTML = "<span id='stat'>tie</span> ";
                                        test.innerHTML = ': The computer chose scissors you chose scissors <br>';
                                        break;
                                    default:
                                        break;
                                };
                                break;

                            default:
                                document.getElementById("error").style.display = "block";
                                break;
                        };
                    });
            }
            window.addEventListener('keydown', function (e) {
                if (e.keyCode == 13 || e.keyCode == 32) {
                    reload();
                }
            }
            );
    }
    </script>
    <button onclick="reload()" id="pag">Play Again</button>
</body>

</html>

Answer 2

body{
    color: white;
    font-size: 16vmin;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

#stat{
    font-weight: 900;
}

#pag{
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 13vmax;
    width: 100%;
    border: 0px;
    color: white;
    font-family: 'Montserrat',sans-serif;
    font-size: 5vmin;
    background-color: rgb(96, 168, 236);
    box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.438);

}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Rock Paper Scissors</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" media="screen" href="main.css">
      <link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
      <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
      <script src="main.js"></script>
   </head>
   <body id="bkg">
      <iframe id="error" style="display:none;" width="100%" height="500px" src="https://www.youtube.com/embed/t3otBjVZzT0" frameborder="0" allow="accelerometer; autoplay; 
         encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <script>
         rockpaperscissors();
         function rockpaperscissors() {
             var rps = ["rock","paper","scissors"];
             var rand = rps[Math.floor(Math.random() * rps.length)];
             swal({
                 title: "Rock, Paper, Scissors",
                 text: "Please choose either rock, paper, or scissors.",
                 icon: "",
                 buttons: { 
                     r: {
                         text: "Rock",
                         value: "r",
                     },
                     p: {
                         text: "Paper",
                         value: "p",
                     },
                     s: {
                         text: "Scissors",
                         value: "s",
                     },
                 },
                     
             })
             .then((value) => {
                 switch (value) {
                 case "r":
                     switch (rand) {
                         case "rock": 
         msg = "The system chose rock. ";
                             document.getElementById("bkg").style.backgroundColor = "#efe58d";
                             document.getElementById("stat").innerHTML = msg + "Game is tied";
                             break;
                         case "paper": 
         msg = "The system chose paper. ";
                             document.getElementById("bkg").style.backgroundColor = "#ff928b";
                             document.getElementById("stat").innerHTML = msg + "You lose";
                             break;
                         case "scissors": 
         msg = "The system chose scissors. ";
                             document.getElementById("bkg").style.backgroundColor = "#9be592";
                             document.getElementById("stat").innerHTML = msg + "You win";
                             break;
                         default:
                             break;
                     };
                     break;
                 case "p":
                     switch (rand) {
                             case "rock": 
         msg = "The system chose rock. ";
                                 document.getElementById("bkg").style.backgroundColor = "#9be592";
                                 document.getElementById("stat").innerHTML = msg + "You win";
                                 break;
                             case "paper": 
         msg = "The system chose paper. ";
                                 document.getElementById("bkg").style.backgroundColor = "#efe58d";
                                 document.getElementById("stat").innerHTML = msg + "Game is tied";
                                 break;
                             case "scissors": 
         msg = "The system chose scissors. ";
                                 document.getElementById("bkg").style.backgroundColor = "#ff928b";
                                 document.getElementById("stat").innerHTML = msg + "You lose";
                                 break;
                             default:
                                 break;
                         };
                     break;
                 case "s":
                     switch (rand) {
                             case "rock": 
         msg = "The system chose rock. ";
                                 document.getElementById("bkg").style.backgroundColor = "#ff928b";
                                 document.getElementById("stat").innerHTML = msg + "You lose";
                                 break;
                             case "paper": 
         msg = "The system chose paper. ";
                                 document.getElementById("bkg").style.backgroundColor = "#9be592";
                                 document.getElementById("stat").innerHTML = msg + "You win";
                                 break;
                             case "scissors": 
         msg = "The system chose scissors. ";
                                 document.getElementById("bkg").style.backgroundColor = "#efe58d";
                                 document.getElementById("stat").innerHTML = msg + "Game is tied";
                                 break;
                             default:
                                 break;
                         };
                     break;
             
                 default:
                         document.getElementById("error").style.display = "block";
                     break;
             };
         });
         }
             
         function reload(){
             location.reload();
         };
         window.addEventListener('keydown', function(e) {
             if (e.keyCode == 13 || e.keyCode == 32){
                 reload();
             }
         }
         );
      </script>
      <button onclick="reload()" id="pag">Play Again</button>
      <div id="stat"></div>
   </body>
</html>

你不应该使用 document.write()。它清除了之前的所有内容，包括包含 Sweetalert 库的 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>'。而是在 HTML 内容中添加一个带有 id='stat' 的 div 并在其上调用 innerHTML 属性。我修改了代码。看一看。

CSS 提示关闭后消失

CSS Disappearing After Prompt Closes

html

javascript

css

sweetalert

sweetalert2