【发布时间】：2019-01-14 22:12:16
【问题描述】：
我正在尝试创建一个简单的石头剪刀布游戏。我找到了一个工作版本here，但试图使用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>【问题讨论】：
-
document.write 擦除 HTML。您可以使用 document.body.innerHTML = 代替它，具体取决于您真正想要对 HTML 输出做什么。
标签： javascript html css sweetalert sweetalert2