javascript - Remove DOM element on refresh -
i have code lottery game offices' christmas party. because have 0 knowledge jquery , minor skills in javascript, googled , found neat little script (see code below). how can remove winner list when refreshing page? possible read .remove() 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>
it possible, need further js functions (like cookies e.g.).
the html loads everytime same list of peoples. if want change can remove them take winnders cookie ore else (like local storage)
i think best way stay on site until done.
you can remove temporarily using jquery proceed lottery until relaod page.
made fiddle 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 use bag papers in names on them?. more fun , dont need technology make tombola.
Comments
Post a Comment