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

Question

我正在尝试完成我的第一个项目并且我是 JavaScript 的新手，我试图在 X 秒后在页面上显示一个 div 并在单击时消失并让它循环，所以如果有人打开它， div 出现在计时器之后，点击它就会消失，它会在计时器之后再次出现。 我试过@keyframes 动画，但它们只会让我的 div 消失。 我也在 codepen 上这样做，所以有些答案可能不起作用（我认为）。 我也尝试过使用 JavaScript 但无济于事，所以我一直在免费的 code 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">FIRETEA 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"> CONTROLLE 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>

我会接受帮助以任何形式都可以得到，我非常感谢帮助。

Answer 1

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