Repeater Ajax 倒计时如何实现。最好给点代码。

Question

我用Repeater绑定的数据。每个数据如何让他能都实现倒计时。。

Answer 1

秒杀功能
http://topic.csdn.net/u/20101104/10/af03a9ee-c442-486a-afb8-b996c099b8a4.html

Answer 2

那些是单个。。我用repeater绑定的，怎么做啊

Answer 3

js接过初始值，var lblTime = document.getElementById("lblTime");getElementById("lblTime")  如何指定Repeater绑定数据。。

Answer 4

单个项目，你可以写到一个ascx中，在接口上定义“任务id”和“停止时间”两个属性。然后用鼠标拖入一个aspx，在设计窗口为ascx实例手工设置这两个属性，进行测试。测试通过，用鼠标拖入repeater的模板，即可。“任务id”属性用来处理点击事件，而“停止时间”用来动态产生javascript的倒计时脚本代码（通过RegisterStartupScript输出到页面上）并在浏览器上更新计时时间使用。

Answer 5

用鼠标拖入repeater的模板，并且写上绑定表达式，来动态绑定这两个属性。其实就是合理地分工，把重复的东西写到ascx中，自己会把应用程序做成一个个控件才可能快速拼凑、随时重构交互界面程序。

Answer 6

加一列时间  JS倒计时然后从数据库里取出起始时间。 传入JS当参数。如何？

Answer 7

<asp:Repeater ID="RepGB" runat="server">
                        <ItemTemplate>
                            <div class="main_lbj">
                                <div class="main_lt">
                                </div>
                                <div class="main_lc">
                                    <div class="main_lc01" style="height: auto;">
                                        今日团购：<%# Eval("Text")%></div>
                                    <div class="main_lc04">
                                        <img src="UploadImage/<%# Eval("ImageAdress") %>" width="410" height="265" />
                                        <%# Eval("SContents")%>
                                    </div>
                                    <div style="float: left; width: 192px; height: auto; margin-top: 20px; padding-bottom: 20px;">
                                        <div class="Layer1">
                                            <div class="Layer2">
                                                <span style="float: right; margin-top: 6px; margin-right: 10px;">
                                                    <%# AHref(Eval("id").ToString()) %>
                                                    <img src="images/<%# Img(Eval("id").ToString()) %>" width="119" height="54" /></a></span><span
                                                        style="float: left; margin-top: 6px; margin-left: 18px; font-family: '黑体';">￥<%# Eval("SecondPrice")%></span>
                                            </div>
                                            <p style="width: 200px; height: auto; margin-top: 110px; text-align: center; margin-left: 50px;">
                                                <table style="text-align: center">
                                                    <tr>
                                                        <td style="width: 100px">
                                                            原价</td>
                                                        <td style="width: 100px">
                                                            折扣</td>
                                                        <td style="width: 98px">
                                                            节省</td>
                                                    </tr>
                                                    <tr>
                                                        <td style="width: 100px">
                                                            <span class="STYLE2"><s>￥<%# Eval("MarketPrice") %></s></span></td>
                                                        <td style="width: 100px">
                                                            <span class="STYLE2">
                                                                <%# Eval("Discount")%>
                                                                折</span></td>
                                                        <td style="width: 98px">
                                                            <span class="STYLE2">￥<%# Eval("SavePrice")%></span></td>
                                                    </tr>
                                                </table>
                                            </p>
                                        </div>
                                        <div class="main_lc02">
                                            <span style="float: right;">
                                                <img src="images/pic3.jpg" width="26" height="43" /></span> 距离本次团购结束还有：<br />
                                            0天9小时50分37秒                                        </div>
                                        <div class="main_lc03">
                                            <div align="center">
                                                <span class="STYLE6">已经有<%# Eval("UCount") %>人购买</span> <span style="float: left;
                                                    margin-left: 30px; margin-top: 5px;">
                                                    <img src="images/<%# ImgTwo(Eval("id").ToString()) %>" width="23" height="20" /></span><br />
                                                <span style="float: left; color: #dc2354; font-size: 18px; margin-top: 5px; font-weight: bold;
                                                    margin-left: 5px;">
                                                    <%# State(Eval("id").ToString()) %>
                                                </span>
                                                <br />
                                                <p style="float: left; width: 180px; line-height: 18px; padding-top: 5px; text-align: left;">
                                                    <%# Eval("Slogan")%>
                                                    <br />
                                                    <%# Eval("SloganTime")%>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="main_lb">
                                </div>
                            </div>
                            <div style="clear: both">
                            </div>
                            <div class="main_l_xq">
                                <div class="main_l_xq_bt">
                                    <span style="float: left; margin-left: 10px; margin-top: 5px; margin-right: 5px;">
                                        <img src="images/pic1.jpg" width="10" height="14" /></span>本单详情
                                </div>
                                <div style="clear: both">
                                </div>
                                <div class="main_l_xq_l">
                                    <%# Eval("BContents") %>
                                </div>
                                <div class="main_l_xq_r">
                                    <%# Eval("Contents")%>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>红色部分如何 替换成倒计时。我的思路是用label+id。 可是repeater不让那么用。

Answer 8

这样多乱啊！我给你写一个demo，如下，一个demo1.ascx文件<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Demo1.ascx.cs" Inherits="Demo1" %>
距离<%= this.摘要 %>还有<asp:Label ID="Label1" runat="server" />秒！using System;
using System.Web.UI;public partial class Demo1 : System.Web.UI.UserControl, IPostBackEventHandler
{
    public string 任务id
    {
        get
        {
            EnsureChildControls();
            return (string)ViewState["business object"];
        }
        set
        {
            EnsureChildControls();
            ViewState["business object"] = value;
        }
    }    public string 摘要
    {
        get
        {
            EnsureChildControls();
            return (string)ViewState["abst"];
        }
        set
        {
            EnsureChildControls();
            ViewState["abst"] = value;
        }
    }    public DateTime 到期时间
    {
        get
        {
            EnsureChildControls();
            return (DateTime)(ViewState["end time"] ?? DateTime.Now);
        }
        set
        {
            EnsureChildControls();
            ViewState["end time"] = value;
        }
    }    protected void Page_PreRender(object sender, EventArgs e)
    {
        var scp = "window.setInterval(function(){" +
            string.Format("var s=new Date(\"{0}\");", this.到期时间.ToString("yyyy/M/d H:m:s")) +
            "var t=(s - new Date())/1000;" +
            "document.getElementById('" + this.Label1.ClientID + "').innerText=t.toString();" +
            "if(t<=0)" + this.Page.ClientScript.GetPostBackEventReference(this, string.Empty) + ";" +
            "},1000);";
        ScriptManager.RegisterStartupScript(this, this.GetType(), this.GetHashCode().ToString(), scp, true);
    }    public event Action<string> 计时到啦;       //事件唯一的string类型参数，用来说明所触发的任务id号。    public void RaisePostBackEvent(string eventArgument)
    {
        if (this.计时到啦 != null)
            this.计时到啦(this.任务id);
    }
}
因为不知道时间的时候你打算做什么，我实现为回发到服务器去解决，触发一个事件。这样，你把这个ascx拖到任何页面（或者其它ascx）里边，然后设置它的三个属性就能看到效果。比如我创建一个aspx，然后拖入这个ascx的两个实例<%@ Page Language="C#" %><%@ Register Src="Demo1.ascx" TagName="Demo1" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <uc1:Demo1 ID="Demo11" runat="server" 任务id="abcd" 摘要="我们的测试" 到期时间="2011-1-23 1:30:25" />
    <br />
    <br />
    <uc1:Demo1 ID="Demo12" runat="server" 任务id="抢购123" 摘要="另一个的测试" 到期时间="2011-1-23 1:40:25" />
    </form>
</body>
</html>运行它，你就可以看到两个倒计时各自独立运行，并且如果有一个到时，就会触发事件（我没有在测试aspx上注册其事件处理程序，你可以注册来试试。实际使用时，你也可也能实现为触发客户端函数，而不是回发到服务器）。这样，通过自己写一个ascx，那么这个小应用中的界面修改、样式修改之类的工作，就分解给这个小ascx自己的开发人员了，它可以随便应用到别的aspx或者ascx中，不需要像你那样为了完成一个repeater，就要开发一个（甚至一堆）计时代码。在repeater的模板中，拖入这个ascx，并且绑定这个ascx的属性就行了，跟使用普通的textbox之类的控件放到repeater的模板中的开发方法是一样轻松的，开发repeater所在的页面时根本不用去写关于计时的代码。

Answer 9

嗯，我修改了一下测试用的aspx，增加一个处理回发事件的代码的demo：<%@ Page Language="C#" %><%@ Register Src="Demo1.ascx" TagName="Demo1" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">    protected void method(string id)
    {
        var scp = string.Format("alert('触发了【{0}】');", id.Replace("'", "\\'"));
        ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", scp, true);
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <uc1:Demo1 ID="Demo11" runat="server" 任务id="abcd" 摘要="我们的测试" 到期时间="2011-1-23 1:30:25"
        On计时到啦="method" />
    <br />
    <br />
    <uc1:Demo1 ID="Demo12" runat="server" 任务id="抢购123" 摘要="另一个的测试" 到期时间="2011-1-23 1:40:25"
        On计时到啦="method" />
    </form>
</body>
</html>
就是这样，只要把经常重复使用的应用程序做成ascx，然后用鼠标拖入需要它的地方，包括拖入repeater的模板等，就很方便地拼凑出丰富的应用啦。而且修改起来很方便，你只要更新控件本身，整个网站的风格就统一更新了。

Answer 10

我是在一个小公司。老板会asp、还有个技术会php。出个这问题，很是纠结。。有什么技术难点全靠百度和csdn。做php的全是源代码，遇见卡壳了，去网上下个cms，还能比着葫芦画个瓢。大哥，你给推荐几本适合我看的书吧。让我少走点弯路，成长更快些。