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

Question

I am trying to complete my first project and I am new to JavaScript, I'm trying to have a div appear on the page after X amount of seconds and disappear on click and to have it loop, so if some one opens it, the div appears after the timer, on click and it disappears, and it will appear again after the timer again. I've tried @keyframes animations but they only make my div disappear. I am also doing this on codepen, so some answers might not work (I think) . I also have tried using JavaScript but to no avail, so I have been taking lessons on free code camp.org, but it is only teaching me basic JavaScript. Finally I'm gonna post a link to my pen for you guys to check out below. I'll take any constructive criticism, as it is my first project. Sorry for the multiple edits, I've never asked a community for help before.

 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>

I'll take assistance In any form can get, I greatly appreciate the help.

Answer 1

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