刷新時刪除DOM元素

Question

我必須為辦公室的聖誕晚會編寫彩票游戲。 因為我對jQuery的知識為零，而對JavaScript的了解卻很少，所以我在Google上搜索並找到了簡潔的Script（請參見下面的代碼）。 刷新頁面時如何從列表中刪除獲獎者？ 我什至有可能用jQuery閱讀有關.remove() 。

<!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>

Answer 1

可能，但是您需要一些其他的js函數（例如cookie）。

HTML每次都會加載相同的人員列表。 如果您要更改，可以通過從其他餅干礦中取出溫德啤酒（例如本地存儲設備）來將其移除

我認為這是在您完成之前留在網站上的最佳方法。

您可以使用jquery暫時將其刪除，然后繼續抽獎，直到重新發行頁面為止。

弄弄我的代碼。

            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);

無關：

您為什么不只使用一個上面放着一些標有名字的文件的袋子？ 它更有趣，並且您不需要技術來制作吊籃。

刷新時刪除DOM元素

問題描述

1 個解決方案

解決方案1
0 2014-11-19 13:41:10

刷新時刪除DOM元素

問題描述

1 個解決方案

解決方案1 0 2014-11-19 13:41:10

解決方案1
0 2014-11-19 13:41:10