gpt4 book ai didi

javascript - 将 setTimeOut 属性添加到 div

转载 作者:行者123 更新时间:2023-11-28 02:30:49 26 4
gpt4 key购买 nike

希望你们一切都好!

今天早上我正在重新创建一个关于石头剪刀布游戏的教程。我完成了所有编码,我想在其中添加一些额外的代码以使其看起来很棒。

我只是想知道如何将 setTimeOut 添加到除法结果中,以便让它在几秒钟后消失。

var user_score = 0;
var computer_score = 0;
var userScore_span = document.getElementById("user-score");
var computerScore_span =document.getElementById("computer-score");
var randomNumber;
var result= document.querySelector(".result");
var computer_choices;
var user_choices;
var paper_div = document.getElementById("p");
var scissors_div = document.getElementById("s");
var rock_div = document.getElementById("r");


function computerChoices(){
var choice = ["r","p","s"];
randomNumber = Math.floor(Math.random()*3);
return choice[randomNumber];
}
function returnW(letter){
if(letter === "r") return "rock";
if(letter === "s") return "scissors";
return "paper";
}

function win(userChoice,computerChoice){
user_score++;
userScore_span.innerHTML=user_score;
var subU = "user".fontsize(3).sub();
var subC = "computer".fontsize(3).sub();
document.getElementById(userChoice).classList.add("GreenBlur");
result.innerHTML="You win " + returnW(userChoice) + subU + " beats " + returnW(computerChoice) + subC;
setTimeout(function(){ document.getElementById(userChoice).classList.remove("GreenBlur")},1000);
}




function lose(userChoice,computerChoice){
computer_score++;
computerScore_span.innerHTML=computer_score;
var subU = "user".fontsize(3).sub();
var subC = "computer".fontsize(3).sub();
document.getElementById(userChoice).classList.add("RedBlur");
result.innerHTML="You lose " + returnW(userChoice) + subU + " lose to " + returnW(computerChoice) + subC;
setTimeout(function(){ document.getElementById(userChoice).classList.remove("RedBlur")},1000);
}





function draw(userChoice,computerChoice){
document.getElementById(userChoice).classList.add("YellowBlur");
result.innerHTML="It's a Draw!";
setTimeout(function(){ document.getElementById(userChoice).classList.remove("YellowBlur")},1000);
}



function game(userChoice){
var computerChoice = computerChoices();
switch(userChoice + computerChoice){
case "rs":
case "sp":
case "pr":
win(userChoice,computerChoice);
break;
case "sr":
case "ps":
case "rp":
lose(userChoice,computerChoice);
break;
case "rr":
case "ss":
case "pp":
draw(userChoice,computerChoice);
break;

}
}







function main(){
paper_div.addEventListener("click", function(){
game("p");
})

scissors_div.addEventListener("click", function(){
game("s");
})

rock_div.addEventListener("click", function(){
game("r");
})
}
main();
*{
padding:0px;
margin:0px;
box-sizing:border-box;
}


body{
background-color:#181a1a;
}

header{
background-color:#0041b8;
color:white;
padding:10px;
font-family: Asap, helvetica;
font-weight: bold;
text-align: center;


}
.scoreboard{
width:300px;
height:180px;
background-color:#ffffff;
margin: 80px auto;

border-radius: 15px;
position:relative;
text-align:center;
font-size: 100px;
font-family: Asap, helvetica;
padding-top:20px

}


.choice{
display:inline-block;
width:150px;
height:150px;
transition:1s;
border-radius: 75px;
margin:20px;
border: 4px solid white;
align-content: center;








}

.choices{
text-align:center;
padding:0px 40px 40px 40px;
margin:10px;



}
.budge{
font-size: 20px;
display:block;
background-color:#0041b8;
color:white;
font-family: Asap;
border-radius: 5px;
padding:2px 15px;
font-weight: bold;
}
.result{
color:white;
font-size: 40px;
font-family: Asap;
font-weight: bold;
margin-bottom: 50px;
text-align:center;

}


#user-label{
position:absolute;
top:40%;
left:-10%;
text-align:center



}
#comp-label{

position:absolute;
top:40%;
right:-13%;
text-align:center;
}

}
.choices:hover{
opacity: 0.2;
}
#action-message{
color:white;
font-size: 20px;
font-family: Asap;
font-weight: bold;
margin-bottom: 50px;
text-align:center;

}
.GreenBlur{
border: 4px solid green;
box-shadow: 0 0 7px #33ff0a;


}
.YellowBlur{
border: 4px solid yellow;
box-shadow: 0 0 7px yellow;


}
.RedBlur{
border: 4px solid #ff0000 ;
box-shadow: 0 0 10px #ff0000;


}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">


</head>
<body>


<header>
<h1> - Rock Paper Scissors - </h1>
</header>



<div id="totalpoint">0</div>
<div class="scoreboard">
<div id="user-label"class="budge">User</div>
<div id="comp-label" class="budge">Comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>

</div>
<div class="result"><p>Make you first move!</p></div>
<div class="choices">
<div class="choice" id="p">
<img src="paper.png" width="150px">
</div>
<div class="choice"id="s">
<img src="scissors.png" width="150px">
</div>
<div class="choice"id="r">
<img src="rock.png" width="150px">
</div>
</div>









<script src="java3.js"></script>

</body>
</html>

最佳答案

添加

document.getElementsByClassName("result")[0].innerHTML = "";

也在每个 settimeout 中。

var user_score = 0;
var computer_score = 0;
var userScore_span = document.getElementById("user-score");
var computerScore_span = document.getElementById("computer-score");
var randomNumber;
var result = document.querySelector(".result");
var computer_choices;
var user_choices;
var paper_div = document.getElementById("p");
var scissors_div = document.getElementById("s");
var rock_div = document.getElementById("r");


function computerChoices() {
var choice = ["r", "p", "s"];
randomNumber = Math.floor(Math.random() * 3);
return choice[randomNumber];
}

function returnW(letter) {
if (letter === "r") return "rock";
if (letter === "s") return "scissors";
return "paper";
}

function win(userChoice, computerChoice) {
user_score++;
userScore_span.innerHTML = user_score;
var subU = "user".fontsize(3).sub();
var subC = "computer".fontsize(3).sub();
document.getElementById(userChoice).classList.add("GreenBlur");
result.innerHTML = "You win " + returnW(userChoice) + subU + " beats " + returnW(computerChoice) + subC;
setTimeout(function() {
document.getElementById(userChoice).classList.remove("GreenBlur");
document.getElementsByClassName("result")[0].innerHTML = "";
}, 1000);

}




function lose(userChoice, computerChoice) {
computer_score++;
computerScore_span.innerHTML = computer_score;
var subU = "user".fontsize(3).sub();
var subC = "computer".fontsize(3).sub();
document.getElementById(userChoice).classList.add("RedBlur");
result.innerHTML = "You lose " + returnW(userChoice) + subU + " lose to " + returnW(computerChoice) + subC;
setTimeout(function() {
document.getElementById(userChoice).classList.remove("RedBlur");
document.getElementsByClassName("result")[0].innerHTML = "";
}, 1000);
}





function draw(userChoice, computerChoice) {
document.getElementById(userChoice).classList.add("YellowBlur");
result.innerHTML = "It's a Draw!";
setTimeout(function() {
document.getElementById(userChoice).classList.remove("YellowBlur");
document.getElementsByClassName("result")[0].innerHTML = "";
}, 1000);
}



function game(userChoice) {
var computerChoice = computerChoices();
switch (userChoice + computerChoice) {
case "rs":
case "sp":
case "pr":
win(userChoice, computerChoice);
break;
case "sr":
case "ps":
case "rp":
lose(userChoice, computerChoice);
break;
case "rr":
case "ss":
case "pp":
draw(userChoice, computerChoice);
break;

}
}







function main() {
paper_div.addEventListener("click", function() {
game("p");
})

scissors_div.addEventListener("click", function() {
game("s");
})

rock_div.addEventListener("click", function() {
game("r");
})
}
main();
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}

body {
background-color: #181a1a;
}

header {
background-color: #0041b8;
color: white;
padding: 10px;
font-family: Asap, helvetica;
font-weight: bold;
text-align: center;
}

.scoreboard {
width: 300px;
height: 180px;
background-color: #ffffff;
margin: 80px auto;
border-radius: 15px;
position: relative;
text-align: center;
font-size: 100px;
font-family: Asap, helvetica;
padding-top: 20px
}

.choice {
display: inline-block;
width: 150px;
height: 150px;
transition: 1s;
border-radius: 75px;
margin: 20px;
border: 4px solid white;
align-content: center;
}

.choices {
text-align: center;
padding: 0px 40px 40px 40px;
margin: 10px;
}

.budge {
font-size: 20px;
display: block;
background-color: #0041b8;
color: white;
font-family: Asap;
border-radius: 5px;
padding: 2px 15px;
font-weight: bold;
}

.result {
color: white;
font-size: 40px;
font-family: Asap;
font-weight: bold;
margin-bottom: 50px;
text-align: center;
}

#user-label {
position: absolute;
top: 40%;
left: -10%;
text-align: center
}

#comp-label {
position: absolute;
top: 40%;
right: -13%;
text-align: center;
}


}
.choices:hover {
opacity: 0.2;
}
#action-message {
color: white;
font-size: 20px;
font-family: Asap;
font-weight: bold;
margin-bottom: 50px;
text-align: center;
}
.GreenBlur {
border: 4px solid green;
box-shadow: 0 0 7px #33ff0a;
}
.YellowBlur {
border: 4px solid yellow;
box-shadow: 0 0 7px yellow;
}
.RedBlur {
border: 4px solid #ff0000;
box-shadow: 0 0 10px #ff0000;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">


</head>

<body>


<header>
<h1> - Rock Paper Scissors - </h1>
</header>



<div id="totalpoint">0</div>
<div class="scoreboard">
<div id="user-label" class="budge">User</div>
<div id="comp-label" class="budge">Comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>

</div>
<div class="result">
<p>Make you first move!</p>
</div>
<div class="choices">
<div class="choice" id="p">
<img src="paper.png" width="150px">
</div>
<div class="choice" id="s">
<img src="scissors.png" width="150px">
</div>
<div class="choice" id="r">
<img src="rock.png" width="150px">
</div>
</div>









<script src="java3.js"></script>

</body>

</html>

关于javascript - 将 setTimeOut 属性添加到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50929664/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com