javascript - 将 setTimeOut 属性添加到 div

标签 javascript html css

希望你们一切都好!

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

我只是想知道如何将 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/

上一篇：html - 使用 grid-column-start 会导致网格元素的自动放置停止工作

下一篇：javascript - CSS - 如果重叠则标题字体较小

相关文章：

javascript - 检测何时加载图像列表

javascript - 使用 Jquery 模板在表上启用水平滚动

javascript - 有没有办法在 SVG 中应用 9-patch/scale-9 原则？

html - 2个边框，分层和不同的颜色，宽度和高度

html - 无法居中背景图片

javascript - 如何将子 <div> 扩展为 100% 的 body 宽度？

tabs - CSS 标签重叠

javascript - 如何迭代数组获取数值属性值

javascript - 当我更改它时，Joomla 仍然从旧域加载 CSS 和 Javascript

javascript - 使用 Node 在rehindb中插入错误

©2024 IT工具网  联系我们