Remove DOM element on refresh
Question
I have to code a lottery game for my offices' christmas party. Because I have zero knowledge about jQuery and only minor skills in JavaScript, I googled and found neat little Script (see code below). How can I remove the winner from the list when refreshing the page? Is that even possible I read something about .remove() with jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Auslosung</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- jQuery einbinden -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/* Wenn der Body geladen ist werden die enthaltenen Funktionen ausgeführt.
$(document).ready(function(){ ... }); Alle in dieser enthaltenen Funktionen werden entsprechd erst bei geladenem Body ausgeführt */
$(document).ready(function(){
/* Der Button mit der id #auslosungstarten wird mit einer click Funktion belegt. */
$('#auslosungstarten').click(function(){
/* Der Button selbst wird ausgeblendet */
$(this).hide('slow');
/* Ein Interval wird gestartet und die Funktion auslosung() alle 300 Milisekunden ausgeführt */
intVal = window.setInterval("auslosung()", 300);
/* Nach 5 Sekunden wird der Gewinner gezogen */
window.setTimeout("winneris()", 5000);
/* return false verhindert, dass der href des Links aufgerufen wird */
return false;
});
auslosung = function(){
/* member enthält die Anzahl der Teilnehmer der Verlosung */
member = $('.member li').length;
/*
Math.random() generiert eine Zufallszahl.
Diese mit den Teilnehmern multipliziert ergebit den index Wert eines der Teilnehmer.
*/
randNum = Math.floor(Math.random()*member);
/* Die CSS Klasse "win" wird von allen li's entfernt und ... */
$('.member li').removeClass('win');
/* ... für den durch die Zufallszahl gewählten Teilnehmer neu gesetzt */
$('.member li:eq('+randNum+')').addClass('win');
/* Diese Funktion wiederholt sich alle 300 Milisekunden.
Dadurch entsteht das Muster, dass immer ein anderer Teilnehmer markiert wird.
*/
}
winneris = function(){
/* Nachdem 30 Sekunden lang zufällige Teilnehmer markiert wurden, wird der Intervall nun beendet */
clearInterval(intVal);
/* Der zuletzt markierte Teilnehmer wird nun als Gewinner gezogen */
winner = $('.member li.win').html();
/* Der Gewinner wird in der #andthewinneris ausgegeben. */
$('#andthewinneris').html('Gewonnen hat: <strong>'+winner+'<\/strong>');
}
});
</script>
<style type="text/css">
/* Das ist der CSS Code zum Verlosungs-System und bedarf meiner Meinung nach keiner weiteren Erklärung */
*{outline:none;padding:0px;margin:0px;}
body{padding:40px;font:14px "Myriad Pro";color:#333;}
h1{margin-bottom:20px;font-size:26px;font-weight:normal;}
.member{list-style:none;width: 100%;}
.member li{padding:10px;width:160px;background:#efefef;border:1px solid #ddd;margin:0 10px 10px 0;float:left;text-align:center;}
.member li.win{background:#fff9d7;border:1px solid #e2c822;}
#auslosungstarten{padding:10px;width:160px;background:#f24f04;border:1px solid #c13d00;margin:0 10px 10px 0;float:left;text-align:center;font-weight:bold;text-decoration:none;display:block;color:#fff;margin-top:40px;}
#andthewinneris{margin-top:40px;font-size:26px;font-weight:normal;color: #f24f04;}
</style>
</head>
<body>
<h1>Geschenkeverlosung</h1>
<!-- Dashier ist die Liste der Teilnehmer von der Verlosung -->
<div style="width:200px; float:left;">
<ul class="member">
<li>Adamec Simone</li>
<li>Aktas Murat</li>
<li>Alfare Simone</li>
<li>Alge Andreas</li>
<li>Auer Christoph</li>
<li>Aydin Azim</li>
<li>Berchtold Jörg</li>
<li>Berchtold Wolfgang</li>
<li>Berger Albert</li>
<li>Biket Cengiz</li>
<li>Bilger Thomas</li>
<li>Bittner Brigitte</li>
<li>Blacha Johannes</li>
<li>Blum Thomas</li>
<li>Boch Peter</li>
<li>Bösch Heike</li>
<li>Bösch Markus</li>
<li>Bösch Marlon</li>
<li>Brakhage Dietmar</li>
<li>Brunold Jürgen</li>
<li>Büttner Maik</li>
<li>Ciani Andrea</li>
<li>Collini Martin</li>
<li>Coric Josip</li>
</ul></div><div style="float:right;">
<!-- Button zum starten der Verlosung -->
<a href="#" id="auslosungstarten">Auslosung starten...</a>
<!-- Ausgabe des Gewinners: -->
<h1 id="andthewinneris"></h1></div><br clear="all" />
</body>
</html>
1 answers
solution1
0 2014-11-19 13:41:10
It is possible, but you need some further js functions (like cookies eg).
The HTML just loads everytime the same list of peoples. If you want to change that you can remove them by take the winnders from a cookie ore something else (like local storage)
I think its the best way to stay on the site until you are done.
You can remove it temporarily by using jquery an proceed the lottery until you relaod the page.
Made a fiddle with my code.
window.setTimeout("winneris()", 5000);
/* return false verhindert, dass der href des Links aufgerufen wird */
// zeigt den auslosen button wieder an.
window.setTimeout(function(){
$('#auslosungstarten').show();
}, 7000);
Offtopic:
Why dont you just use a bag with some papers in it with the names on them?. Its more fun and you dont need technology to make a tombola.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.