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

qwe_edq 2011-01-22 03:23:54
我用Repeater绑定的数据。每个数据如何让他能都实现倒计时。。
...全文
746 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
qwe_edq 2011-01-23
  • 打赏
  • 举报
 回复
先谢谢各位，尤其皮哥。我去试试。
qwe_edq 2011-01-23
  • 打赏
  • 举报
 回复
我是在一个小公司。老板会asp、还有个技术会php。出个这问题，很是纠结。。有什么技术难点全靠百度和csdn。做php的全是源代码，遇见卡壳了，去网上下个cms，还能比着葫芦画个瓢。

大哥，你给推荐几本适合我看的书吧。让我少走点弯路，成长更快些。
以专业开发人员为伍 2011-01-23
  • 打赏
  • 举报
 回复
我们看到总有很多人拿着及其简单的界面程序，写出来一大坨手工代码，也难以编写也难以维护和更新，其原因就是不会组件式地去搭建交互程序，受了一些“以手写低层代码为美”的说法的蛊惑，慢慢只能写最简单的无交互的网页，而不太会写交互丰富的应用程序了。
以专业开发人员为伍 2011-01-23
  • 打赏
  • 举报
 回复
嗯，我修改了一下测试用的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的模板等，就很方便地拼凑出丰富的应用啦。而且修改起来很方便，你只要更新控件本身，整个网站的风格就统一更新了。
以专业开发人员为伍 2011-01-23
  • 打赏
  • 举报
 回复
这样多乱啊！

我给你写一个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所在的页面时根本不用去写关于计时的代码。
qwe_edq 2011-01-23
  • 打赏
  • 举报
 回复
<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不让那么用。
子夜__ 2011-01-22
  • 打赏
  • 举报
 回复
加一列时间 JS倒计时

然后从数据库里取出起始时间。 传入JS当参数。如何？
以专业开发人员为伍 2011-01-22
  • 打赏
  • 举报
 回复
用鼠标拖入repeater的模板，并且写上绑定表达式，来动态绑定这两个属性。

其实就是合理地分工，把重复的东西写到ascx中，自己会把应用程序做成一个个控件才可能快速拼凑、随时重构交互界面程序。
以专业开发人员为伍 2011-01-22
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 qwe_edq 的回复:]

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

单个项目，你可以写到一个ascx中，在接口上定义“任务id”和“停止时间”两个属性。然后用鼠标拖入一个aspx，在设计窗口为ascx实例手工设置这两个属性，进行测试。测试通过，用鼠标拖入repeater的模板，即可。“任务id”属性用来处理点击事件，而“停止时间”用来动态产生javascript的倒计时脚本代码（通过RegisterStartupScript输出到页面上）并在浏览器上更新计时时间使用。
qwe_edq 2011-01-22
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 dalmeeme 的回复:]
基本思路就是服务器给出倒计时初值，js接过初值进行倒计时，到零则设置按钮无效。
[/Quote]
js接过初始值，

var lblTime = document.getElementById("lblTime");

getElementById("lblTime") 如何指定。。。Repeater绑定数据。。
qwe_edq 2011-01-22
  • 打赏
  • 举报
 回复
那些是单个。。我用repeater绑定的，怎么做啊。。。
dalmeeme 2011-01-22
  • 打赏
  • 举报
 回复
基本思路就是服务器给出倒计时初值，js接过初值进行倒计时，到零则设置按钮无效。
asp.net知识库
HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署即可! 服务器自定义开发二之客户端脚本回发 Web开发: 使用URL重写WEB主题切换 如何在Asp.Net1.1中实现页面模板(所谓的...
秒杀倒计时的js脚本
 --获取当前时间（最好使用服务器端的时间，通过ajax异步去获取）  for(var i=0;i;i++) --使用一个循环来遍历，这里的4表示最多有4个  {  if(document.getElementById("hdfTm" + i.toString())!=null)...
jQuery Timer 实现的新邮件提醒
在巨型光棍节这一天, 为了安慰大家寂寞的心灵, 所以今天又写了一个使用 Timer, Repeater, Validator 控件实现的新邮件的提醒功能,但这次是没有更新 JQueryElement 的版本, 是不是很奇怪哪, :-) 本文更新: 2011-12-...
清新空气---我的.net(C#)生涯知识总结 跨CSS,JS,JAVA,AJAX,WPF,WCF,LINQ,ASP.NET,Winform,Sqlserver,Mysql,EF,OOP，开发工具等...
 3.7.1计时器  3.7.2浏览器定位和导航  3.7.3浏览历史  3.7.4浏览器和屏幕信息  3.7.5对话框、错误处理  3.7.6作为Window对象属性的文档元素  3.7.7多窗口和窗体  3.8脚本化化文档  3.8.1 ...
UpdatePanel之缺点一
UpdatePanel在更新时会把包含其中的内容全部提交，如果我们动态向UpdatePanel中添加内容，那么随着内容的增加，UpdatePanel提交的信息量将不断的增长，虽然仍是异步提交，但是却违背了ajax减少数据传输量的初衷；...
.NET社区

62,074

社区成员

669,022

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章