时间戳

首页 > 解决方案 > 如何使 div 出现在计时器上并在点击时消失？

javascript - 如何使 div 出现在计时器上并在点击时消失？

问题描述

我正在尝试完成我的第一个项目并且我是 JavaScript 新手，我试图让 div 在 X 秒后出现在页面上并在点击时消失并让它循环，所以如果有人打开它， div 出现在计时器之后，点击它消失，它会在计时器之后再次出现。我已经尝试过@keyframes 动画，但它们只会让我的 div 消失。我也在 codepen 上这样做，所以有些答案可能不起作用（我认为）。我也尝试过使用 JavaScript，但无济于事，所以我一直在免费代码 camp.org 上上课，但它只教我基本的 JavaScript。最后，我将发布一个指向我的笔的链接，供大家在下面查看。我会接受任何建设性的批评，因为这是我的第一个项目。很抱歉进行了多次编辑，我以前从未向社区寻求帮助。

body {
  background-image: url("https://drive.google.com/uc?export=view&id=1drQkb0PbVE2iJKPIIdt6zk8DYoICjfDQ");
  background-attachment:fixed;
  background-size:cover;
  background-position: center;
  background-repeat:no-repeat;
  background-color:#000000;
  margin:unset !important;
  font-family:arial;
}
  .fireteam{
font-size:16px;
color:white;
}
#fireteam{
position:absolute;
display:block;
top:-20px;
right:231px; 
}
#emblem{
 height:72px;
 width:321px; 
 position:absolute;
  padding:1px 10px 1px 10px;
  right:80px;
  top:30px;
  border-top: 2px solid white;
 background: linear-gradient(304deg, #ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple, #ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple);
    background-size: 777%  777%;

    -webkit-animation: AnimationName 70s ease infinite;
    -moz-animation: AnimationName 70s ease infinite;
    animation: AnimationName 70s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 5%}
    50%{background-position:100% 96%}
    100%{background-position:0% 5%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 5%}
    50%{background-position:100% 96%}
    100%{background-position:0% 5%}
}
@keyframes AnimationName {
    0%{background-position:0% 5%}
    50%{background-position:100% 96%}
    10
}

.user-name{
  font-size:21px;
  color:white;
  font-weight:bold;
  }
#user-name{
  display:block;
  position:relative;
  margin-left:65px;
  margin-top:6px
}
.power-level {
  font-size:25px;
  color:yellow;
  position:relative;
  font-weight:bold;
  }
#power-level{
  margin:0px 0px 0px 0px;
  display:inline-block;
  position:absolute;
  right:6px;
  bottom:42px;
}

.clan-name {
 font-size:17px;
 color:white;
 font-family:italic;
  }
#clan-name{
 display:inline-block;
 position:relative;
 margin-top:0px;
 margin-left:66px;   
}
.ghost {
position:relative;
width:42px;
height:auto;
display:inline-block;
}
#ghost{
 display:inline-block;
 position:absolute;
 top:13px;
 left:24px; 
}

.pl-icon{
 position:relative;
width:10px;
height:auto;
display:inline-block;
  }
#pl-icon{
 margin:0px 0px 0px 0px;
 display:inline-block;
 position:absolute;
 right:62px;
 top:5px;
}
.triangle{
position:relative;
width:30px;
height:auto; 
}
#triangle{
  padding: 0px 0px 0px 0px;
  Display:inline-block;
  position:absolute;
  top:0px;
  left:0px;
}
.jumpship{
height:470px;
width:auto; 
}
#jumpship{
 display:inline-block;
 position:absolute;
 left:410px;
 top:150px; 
 z-index:-1; 
 animation-name: floating;
 animation-duration: 7s;
 animation-iteration-count: infinite;
 animation-timing-function: ease-in-out;
}
@keyframes floating {
from { transform: translate(0,  0px); }
65%  { transform: translate(0, 15px); }
to   { transform: translate(0, -0px); }    
} 
#main { 
  border-top: 9px solid #FF5952;
  height:150px;
  margin:265px 0 0 0;
  width:100%;
  pointer-events: none;
  z-index:1;
  }
#main {
  animation: cssAnimation 0s 7s forwards;
  opacity: 0; 
}

@keyframes cssAnimation {
  to   { opacity: 1; }
}
#icon-holder {
 background-color:#3B4956;
  width:35%;
  height:150px;
  opacity:0.8;  
  display:inline-block;
 }
.point{
position:relative;
width:111px;
height:auto;
float:right;
padding:3px 12px 0 0;
  }
#title { 
  height:75px;
  width:65%; 
  backdrop-filter:blur(4px);
 display:inline-block;
 position:absolute; 
}
  #title::before{
  content: "";
      background-image: url("https://drive.google.com/uc?export=view&id=1lAegDNv9UA3tunXylxrW5Loomz3X2cEA");
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity:0.7;    
}
  .title {
  font-size:39px;
   color:white;
  font-weight:bold; 
  text-align:left;
  position:relative;
  display:inline-block;
  top:15px;
  left:10px;
  opacity:1;
  padding-left:15px;  
  }

#message {
  height:75px;
  width:65%;
  position:absolute;
  backdrop-filter:blur(4px);
  display:inline;
  top:349px;
  background-size:cover;
}
#message::before{
  content: "";
      background-image: url("https://drive.google.com/uc?export=view&id=1A38rtfR8GbdVW3R98E6PEQRRlZdBqQ6j");
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.7;
}
  .message{
  font-size:21px;
  color:white;
  text-align:right;
  position:relative;
  display:inline-block;
  top:18px;
  left:10px; 
  padding-left:15px;  
}
#basement {
  background-image: url("https://drive.google.com/uc?export=view&id=1wpkpK5n7Msvr4uqMme7Uk55HPOJx05H9");
  height:25px;
  width:100%;
  bottom:3px;
  padding:1px;
  position:relative;
  text-align:left;
 }
#basement {
  animation: cssAnimation 0s 7s forwards;
  opacity: 0; 
}

@keyframes cssAnimation {
  to   { opacity: 1; }
}
.dismiss {
  font-size:18px;
  color:white; 
  display:inline-block;
}
#dismiss{
position:relative;
display:inline-block;
bottom:9px;
float:center
}
.icon {
 width:42px;
 height:auto;
 display:inline-block;
 float:center;
}
#icon{
display:inline-block;
position:relative; 
width:65%;
float:right; 
bottom:1px;  
}
.director{
  font-size:21px;
  color:white; 
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  padding:4px 50px 4px 50px;
  position:relative;
}
#director{
 width:280px;
 position:relative;
float:right;
  bottom:-130px;
  right:-370px;
}
#director::before {
content: "";
background-image:url("https://drive.google.com/uc?export=view&id=1wpkpK5n7Msvr4uqMme7Uk55HPOJx05H9");
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.65;
filter:blur(6px);
}
.friends{
  font-size:16px;
  color:white; 
  border-right: 1px solid white;
  padding:0px 15px 0px 0px;
}
#friends{
width:167px;
position:absolute;
display:inline-block;  
float:right;
bottom:20px;
right:285px; 
}
.invite{
 font-size:16px;
  color:white; 
}
#invite{
width:150px;
position:absolute;
display:inline-block;  
float:right;
bottom:20px;
right:132px;
}
.menu{
  font-size:16px;
  color:white;  
}
#menu{
 width:150px;
position:absolute;
display:inline-block;  
float:right;
bottom:20px;
right:-2px;
}
.icon2{
 width:17px;
 height:auto;
 display:inline-block;
 float:left; 
 margin-right:10px;
}
.icon3{
 width:17px;
 height:auto;
 display:inline-block;
 float:left; 
 margin-right:7px; 
}
.icon4 {
width:17px;
height:auto;
display:inline-block;
float:left; 
margin-right:7px;   
}
<body>
  </script>
  <div id="emblem">
     <div id="fireteam"> <span class="fireteam">F I R E T E A M</span>
    </div>
    <div id="triangle"> <img class="triangle" src="https://drive.google.com/uc?export=view&id=1PdfKbElHGA0zYoX3uU97dBMJcQRbLmOf">
    </div>
    <div id="ghost"> <img class="ghost" src="https://drive.google.com/uc?export=view&id=1imBPZyD5tG5J6zP1OyP0D23c5IvSDT2a">
    </div>
    <div id="user-name"> <span class="user-name"> prince_of_war04</span>
    </div>
    <div id="clan-name"> <span class="clan-name">Nerf600autos</span>
    </div>
    <div id="pl-icon"> <img class="pl-icon" src="https://drive.google.com/uc?export=view&id=1bat6pZthPyIotmXi8dcDfLChVTKYlnZY">
    </div>
    <div id="power-level"> <span class="power-level">1078</span>
    </div>
      
    </div>
  <div id="jumpship"> 
    <img class="jumpship" src="https://drive.google.com/uc?export=view&id=1W9RVvJq0NBokWZ3u4L6x1QKbMfH6IJUW">
  </div>
 
  <div id="main">
    <div id="icon-holder">
      <img class="point" src="https://drive.google.com/uc?export=view&id=1X2QpP_a_1-CS8doBZQ9F6Ll-_3llmOsR">
    </div>
    <div id="title">
      <span class="title"> C O N T R O L L E R</span>
    </div>

    <div id="message">
     <span  class="message">Your wireless controller is disconnected. Reconnect your wireless controller.</span>
    </div>
  </div>
  <div id="basement">
   <div id="icon"> <img class="icon" src="https://drive.google.com/uc?export=view&id=1ZHO3k7CGI_7AxJi2A0-3aMNM1sAXWHN_">
<div id="dismiss"> <span class="dismiss">Dismiss
    </span>
    </div>
  </div>
  </div>
  <div id="director"> <span class="director"> OPEN DIRECTOR</span> 
 
  </div>
  <div id="friends"> <span class="friends">69 friends online</span>
    <img class="icon4" src="https://drive.google.com/uc?export=view&id=1bb-rA2hDayk1T7kOpVtAkAoXU_32a-bS">
    </div>
  <div id="invite"> <span class="invite">Invite Friends</span> 
    <img class="icon2" src="https://drive.google.com/uc?export=view&id=18WUa8u3oToBZVmgFTT3eM_i055M8y81N">
  </div>
 <div id="menu"> <span class="menu">Menu</span> 
   <img class="icon3" src="https://drive.google.com/uc?export=view&id=1x0iByNuEzmFjIc8-fb739t44HIya1RAc">
  </div>
</body>

我会采取任何形式得到的帮助，我非常感谢您的帮助。

标签： javascriptcss

解决方案

$( document ).on( "click", function( 
event ) {
if   (!$(event.target).closest("#timer").length) {
    $("#somediv").appendTo("#timer"); 
}
$("#somediv").hide();
});

推荐阅读