Hjælp til en countdown timer

Skal alle produkterne have hver deres timer eller er det for en for alle?

Alle produkterne skal have hver deres timer, det er der problemet ligger.

Jeg antager at du bruger asp, .net eller php til at sprøjte produkterne ud fra et recordset rækkevis eller sådan noget og at der sikkert er et unikt id for hvert produkt.

Du har en funktion:

function FormatTime(p_seconds) {
// Her skal defineres et eller andet format inden tiden returneres, men hvad??
    return p_seconds;
}

function RunTimer(p_id, p_seconds) {
    if (document.getElemnetById(p_id)) {
        var rt = document.getElemnetById(p_id);
        if (p_seconds > 0) {
            p_seconds -= 1;
            rt.innerHTML = FormatTime(p_seconds);
            setTimeout("RunTimer('" + p_id + "', " + p_seconds + ")", 1000);
        }
    }
}

For hvert produkt id laver du en div med et inline script.

<div id='timer_[produkt_id]'></div><script>RunTimer('timer_[produkt_id]', [timeinseconds]);</script>

Jeg kom til at tænke på hvis det er en side med flere hundrede produkter, så kan alle de tråde nok gå i ged, så her et andet forslag baseret på en fast dato:

<script type='javascript'>

var regdate = /(\d+)[\/|\-](\d+)[\/|\-](\d+)\s(\d+)\:(\d+)\:(\d+)/i;

function CDate2(p_date) {
    var arr_date = regdate.exec(p_date);
    var new_date = new Date(arr_date[3], arr_date[2] - 1, arr_date[1], arr_date[4], arr_date[5], arr_date[6]);
    return new_date;
}

function FormatTime(p_seconds) {
    p_seconds = Math.floor(p_seconds / 1000);

    var d = Math.floor(p_seconds / 86400);
    p_seconds -= (d * 86400);

    var h = p_seconds % 86400;
    h = Math.floor(h / 3600);
    p_seconds -= h * 3600;

    var m = p_seconds % 3600;
    m = Math.floor(m / 60);
    p_seconds -= (m * 60);

    var s = p_seconds % 60;
   
    return d + "d " + h + "t " + m + "m " + s + "s";
}

function RunTimer(p_id, p_datetime) {
    if (document.getElementById(p_id)) {
        var rt = document.getElementById(p_id);
        var now = new Date();
        var then = CDate2(p_datetime);
        if (now < then) {
            rt.innerHTML = FormatTime(then - now);
            setTimeout("RunTimer('" + p_id + "', '" + p_datetime + "')", 1000);
        } else {
            rt.innerHTML = "Tid udløbet";
        }
    }
}
</script>


html.. funktionen tager to parametre id for produktet og en slutdato. 

<div id='produkt_1'></div><script>RunTimer('produkt_1', '17-05-2010 12:00:00');</script>

Tak for svarene.
Jeg bruger asp.net

Jeg har prøvet mig lidt frem med din kode. Umiddelbart er problemet det samme. Eftersom jeg bruger DataList til at vise mine produkter, så skulle datalisten gerne vælge det næste ID hver gang jeg indsætter et nyt produkt.

<div id='1'><script>RunTimer('<%# Eval("ProductID") %>', '<%# Eval("Timer") %>');</script> </div>

Derfor skulle det være nok med ovenstående kode. Jeg kan godt selv vælge næste ID="2", men det bliver vist ved samme produkt.

<div id='2'><script>RunTimer('<%# Eval("ProductID") %>', '<%# Eval("Timer") %>');</script> </div>

Jeg kan vise dig koden til min datalist os.

  <div id="productGrid">
            <asp:DataList ID="DataList1" runat="server" DataSourceID="ObjectDataSource1" RepeatColumns="4"
                RepeatDirection="Horizontal" CellPadding="0" CellSpacing="1">
                <ItemTemplate>
                    <div class="datalistStyle">
                        <div align="center">
                            <br />
                            <asp:Label ID="ModelLabel" runat="server" Text='<%# Eval("Model") %>' Font-Bold="True"
                                Font-Size="12pt" ForeColor="#6699FF" />
                            <br />
                            <br />
                            <asp:Image ID="Image11" runat="server" ImageUrl='<%# Eval("Billede","~/ProductImages\\t__{0}") %>' />
                            <br />
                            <br />
                            <div id='1'>

                                <script>RunTimer('<%# Eval("ProductID") %>', '<%# Eval("Timer") %>');</script>

                            </div>
                            <br />
                            <asp:Label ID="Label2" runat="server" ForeColor="Gray" Text="Type"></asp:Label>
                            <asp:Label ID="VariantLabel" runat="server" Text='<%# Eval("Variant") %>' />
                            <br />
                            <asp:Label ID="Label1" runat="server" ForeColor="Gray" Text="Amount:"></asp:Label>
                            <asp:Label ID="AntalLabel" runat="server" Text='<%# Eval("Antal") %>' ForeColor="#333333" />
                            <br />
                            <br />
                            <cc2:ModalPopupExtender ID="mpeReview" runat="server" BackgroundCssClass="popupBackground"
                                CancelControlID="btnCancel" PopupControlID="pnlPostReview" TargetControlID="ImageButton1">
                            </cc2:ModalPopupExtender>
                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/NMBBID_btn.png"
                                OnClick="ImageButton1_Click" />
                            <br />
                        </div>
                    </div>
                </ItemTemplate>
            </asp:DataList>

Min function forventer at få en udløbsdato der skal tælles ned til i et format svarende til: 16-05-2010 12:00:00 er det også det som din Timer værdi returner?

Ja, det er samme format i min database. Og den viser os countdown, men stadig kun ved 1 produkt.

Nåh nu forstår jeg, du har jo hardcodet id!! LOL

Der i midten hvor du indsætter den skal den jo se sådan her ud. Produkt id skal jo sættes på div id'et.

<div id='p<%# Eval("ProductID") %>'>
<script>RunTimer('p<%# Eval("ProductID") %>', '<%# Eval("Timer") %>');</script></div>

Ahhh :D

I love you!

Endelig :)

Hey igen,

Hvis jeg nu vil ha mit produkt fjernet når tiden er udløbet. Hvordan ville du gøre det?

Har prøvet mig lidt frem, men ikke fundet en løsning endnu.