用于asp.net listview项目模板的javascript

时间：2013-03-18 06:20:54

标签： javascript asp.net listview

我正在尝试为listview项目实现计时器。 我的javascript如下：

function countdown() {
var now = new Date();
var biddate = document.getElementById('InitiateDate').value
var kickoff = Date.parse(biddate);
var diff = kickoff - now;

var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor(diff / (1000 * 60 * 60));
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor(diff / 1000);

var dd = days;
var hh = hours - days * 24;
var mm = mins - hours * 60;
var ss = secs - mins * 60;

if (mm<10) {
    mm = "0" + mm;
}
if (ss<10) {
    ss = "0" + ss;
}


document.getElementById("CountDownTimer")
            .innerHTML =
                dd + ':' +
                hh + ':' +
                mm + ':' +
                ss;

if (dd < 0) {
    document.getElementById("CountDownTimer")
            .innerHTML = "time up";
}

}
setInterval('countdown()', 1000);

和我的listview项目模板相关部分是：

    <td>
    <asp:TextBox ID="InitiateDate" runat="server" Text='<%#  Eval("InitiateDate") %>'  ReadOnly="True"  ClientIDMode="Static"></asp:TextBox>
    <div id="CountDownTimer" class="timer"> </div>
    </td>

这个javascript工作正常，但只适用于listview.i的第一行，需要它适用于所有行，并为每一行提供倒数计时器。

6 个答案:

答案 0 :(得分：0)

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item)
        {
            TextBox InitiateDate = e.Item.FindControl("InitiateDate") as TextBox;
            HtmlGenericControl CountDownTimer = e.Item.FindControl("CountDownTimer") as HtmlGenericControl;

            ScriptManager.RegisterStartupScript(InitiateDate, this.GetType(), "myscript", "countdown('"+ InitiateDate.ClientID +"', '"+ CountDownTimer.ClientID +"');", true);
        }
    }

脚本为\ 

    function countdown(InitiateDate,CountDownTimer) {
..
..
var biddate = document.getElementById(InitiateDate).value
..
..

document.getElementById(CountDownTimer).innerHTML=dd + ':' +
            hh + ':' +
            mm + ':' +
            ss;
}

答案 1 :(得分：0)

   protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
    {
        if (e.Item.ItemType == ListViewItemType.DataItem )
        {
            Label InitiateDate = e.Item.FindControl("InitiateDate") as Label;
            HtmlGenericControl CountDownTimer = e.Item.FindControl("CountDownTimer") as HtmlGenericControl;

           ScriptManager.RegisterStartupScript(InitiateDate, this.GetType(), "AKey" + e.Item.DataItemIndex, "countdown(" + InitiateDate.ClientID + " ," + CountDownTimer.ClientID + ");", true);
}
    }

脚本

var biddate, InitiateDateTemp, CountDownTimerTemp;
    function countdown(InitiateDate, CountDownTimer) {
        InitiateDateTemp = InitiateDate;
        CountDownTimerTemp = CountDownTimer;




      biddate = InitiateDate.innerHTML;

 //   setInterval(function () { SetTime(biddate) }, 1000);

  //  var stopTimer;
    var timerId = setInterval(function () {

       var dd= SetTime(biddate);

       if (dd <= 0) {
            clearInterval(timerId);
        }
    }, 1000);

}

function  SetTime(biddate)  {
    var kickoff = Date.parse(biddate);
    var now = Date.now();
    var diff = kickoff - now;
   // debugger;
    var days = Math.floor(diff / (1000 * 60 * 60 * 24));
    var hours = Math.floor(diff / (1000 * 60 * 60));
    var mins = Math.floor(diff / (1000 * 60));
    var secs = Math.floor(diff / 1000);

    var dd = days;
    var hh = hours - days * 24;
    var mm = mins - hours * 60;
    var ss = secs - mins * 60;

    if (mm < 10) {
        mm = "0" + mm;
    }
    if (ss < 10) {
        ss = "0" + ss;
    }


    CountDownTimerTemp.innerHTML =
                     dd + ':' +
                     hh + ':' +
                     mm + ':' +
                     ss;



    if (dd < 0) {
        CountDownTimerTemp
                 .innerHTML = "time up";
        return -1;

    }
    else {
        return 1;
    }
}

datalist标签和div 

  <asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList1_ItemDataBound">
            </asp:DataList>
        </p>
        <p>
            <asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
                <ItemTemplate >


                    <asp:Label ID="InitiateDate" Text='<%# Eval ("datetime") %>' runat="server" ></asp:Label>

                    <div id="CountDownTimer" runat="server" >Timer</div>
                </ItemTemplate>
            </asp:ListView>

答案 2 :(得分：0)

 var biddate, InitiateDateTemp, CountDownTimerTemp;

        function countdown(InitiateDate, CountDownTimer) {
            InitiateDateTemp = InitiateDate;
            CountDownTimerTemp = CountDownTimer;

            biddate = InitiateDate.innerHTML;


               var dd= SetTime(biddate);


        }




        function  SetTime(biddate)  {
            var kickoff = Date.parse(biddate);
            var now = Date.now();
            var diff = kickoff - now;
           // debugger;
            var days = Math.floor(diff / (1000 * 60 * 60 * 24));
            var hours = Math.floor(diff / (1000 * 60 * 60));
            var mins = Math.floor(diff / (1000 * 60));
            var secs = Math.floor(diff / 1000);

            var dd = days;
            var hh = hours - days * 24;
            var mm = mins - hours * 60;
            var ss = secs - mins * 60;

            if (mm < 10) {
                mm = "0" + mm;
            }
            if (ss < 10) {
                ss = "0" + ss;
            }


            CountDownTimerTemp.innerHTML =
                             dd + ':' +
                             hh + ':' +
                             mm + ':' +
                             ss;



            if (dd < 0) {
                CountDownTimerTemp
                         .innerHTML = "time up";
                return -1;

            }
            else {
                return 1;
            }
        }




  protected void Timer1_Tick(object sender, EventArgs e)
    {
        Timer time = (Timer)sender;
        ListViewItem item = (ListViewItem)time.Parent;
        ListView lst = (ListView)time.Parent.Parent ;

        foreach (ListViewItem listItem in lst.Items )
        {

            Label InitiateDate = item.FindControl("InitiateDate") as Label;
            HtmlGenericControl CountDownTimer = item.FindControl("CountDownTimer") as HtmlGenericControl;
            ScriptManager.RegisterStartupScript(InitiateDate, this.GetType(), "AKey" + item.DataItemIndex, "countdown(" + InitiateDate.ClientID + " ," + CountDownTimer.ClientID + ");", true);

        }

    }

在页面加载事件中添加此代码。这是我的测试代码

//very important code.    (if (IsPostBack == false))
  if (IsPostBack == false)
        {
            List<A> data = new List<A>();
            A a = new A();
            A a1 = new A();
            a.Leave_Status = "A";
            a.datetime = DateTime.Now.AddDays(1);
            data.Add(a);
            a1.Leave_Status = "A1";
            a1.datetime = DateTime.Now.AddDays(-1);

            data.Add(a1);
            ListView1.DataSource = data;
            ListView1.DataBind();
        }

答案 3 :(得分：0)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script>


        var biddate, InitiateDateTemp, CountDownTimerTemp;

        function countdown(InitiateDate, CountDownTimer) {
            InitiateDateTemp = InitiateDate;
            CountDownTimerTemp = CountDownTimer;

            biddate = InitiateDate.innerHTML;

            var kickoff = Date.parse(biddate);
            var now = Date.now();
            var diff = kickoff - now;
            //debugger;
            var days = Math.floor(diff / (1000 * 60 * 60 * 24));
            var hours = Math.floor(diff / (1000 * 60 * 60));
            var mins = Math.floor(diff / (1000 * 60));
            var secs = Math.floor(diff / 1000);

            var dd = days;
            var hh = hours - days * 24;
            var mm = mins - hours * 60;
            var ss = secs - mins * 60;

            if (mm < 10) {
                mm = "0" + mm;
            }
            if (ss < 10) {
                ss = "0" + ss;
            }

             if (dd < 0) {
                CountDownTimerTemp
                         .innerHTML = "time up";
            }
            else {
                CountDownTimerTemp.innerHTML =
                            dd + ':' +
                            hh + ':' +
                            mm + ':' +
                            ss;
            }
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server"  >
        </asp:ScriptManager>



        <p>
            &nbsp;</p>
        <p>

        </p>
        <p>
            <asp:ListView   ID="ListView1" runat="server"   >
                <ItemTemplate >
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                        <ContentTemplate >
                     <asp:Label   ID="InitiateDate" Text='<%# Eval ("datetime") %>' runat="server" ></asp:Label>

                   <div id="CountDownTimer" runat="server" >Timer</div>
                        </ContentTemplate>
                        <Triggers> 
                            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                        </Triggers>
                    </asp:UpdatePanel>
                    <asp:Timer ID="Timer1"  runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>

                </ItemTemplate>
            </asp:ListView>
        </p>
        <p>
            &nbsp;</p>
    </form>
</body>
</html>



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class Default4 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack == false)
        {
            List<A> data = new List<A>();
            A a = new A();
            A a1 = new A();
            a.Leave_Status = "A";
            a.datetime = DateTime.Now.AddDays(1);
            data.Add(a);
            a1.Leave_Status = "A1";
            a1.datetime = DateTime.Now.AddDays(-1);

            data.Add(a1);
            ListView1.DataSource = data;
            ListView1.DataBind();
        }

    }

    class A
    {
        public string Leave_Status { get; set; }
        public DateTime  datetime { get; set; }
    }

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Timer time = (Timer)sender;
        ListViewItem item = (ListViewItem)time.Parent;
        ListView lst = (ListView)time.Parent.Parent ;

        foreach (ListViewItem listItem in lst.Items )
        {

            Label InitiateDate = item.FindControl("InitiateDate") as Label;
            HtmlGenericControl CountDownTimer = item.FindControl("CountDownTimer") as HtmlGenericControl;
            if (CountDownTimer.InnerHtml != "time up")
            {
                ScriptManager.RegisterStartupScript(InitiateDate, this.GetType(), "AKey" + item.DataItemIndex, "countdown(" + InitiateDate.ClientID + " ," + CountDownTimer.ClientID + ");", true);
            }
        }

    }
}

答案 4 :(得分：0)

脚本     

    var biddate, InitiateDateTemp, CountDownTimerTemp;

    function countdown(InitiateDate, CountDownTimer) {
        InitiateDateTemp = InitiateDate;
        CountDownTimerTemp = CountDownTimer;

        biddate = InitiateDate.innerHTML;

        var kickoff = Date.parse(biddate);
        var now = Date.now();
        var diff = kickoff - now;
        //debugger;
        var days = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours = Math.floor(diff / (1000 * 60 * 60));
        var mins = Math.floor(diff / (1000 * 60));
        var secs = Math.floor(diff / 1000);

        var dd = days;
        var hh = hours - days * 24;
        var mm = mins - hours * 60;
        var ss = secs - mins * 60;

        if (mm < 10) {
            mm = "0" + mm;
        }
        if (ss < 10) {
            ss = "0" + ss;
        }

        if (dd < 0) {
            CountDownTimerTemp
                     .innerHTML = "time up";
        }
        else {
            CountDownTimerTemp.innerHTML =
                        dd + ':' +
                        hh + ':' +
                        mm + ':' +
                        ss;
        }
    }

</script>

ASP.net 

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
<div>
<asp:ListView ID="Listview1" runat="server">
    <ItemTemplate>
                <tr style="_background-color:#DCDCDC;color: #000000;">

                    <td>
                        <asp:Label ID="field1" runat="server" Text='<%# Eval("field1") %>' />
                    </td>
                    <td>
                        <asp:Label ID="field2" runat="server" 
                            Text='<%# Eval("field2") %>' />
                    </td>
                    <td>
                        <asp:Label ID="field3" runat="server" 
                            Text='<%# Eval("field3") %>' />
                    </td>
                    <td>
                        <asp:Label ID="field4" runat="server" 
                            Text='<%# Eval("field4") %>' />
                    </td>
                    <td>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate >
                 <asp:Label   ID="InitiateDate" Text='<%# Eval ("InitiateDate") %>' runat="server" ></asp:Label>

               <div id="CountDownTimer" runat="server" >Timer</div>
                    </ContentTemplate>
                    <Triggers> 
                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                    </Triggers>
                </asp:UpdatePanel>
                <asp:Timer ID="Timer1"  runat="server" Interval="3000" OnTick="Timer1_Tick"></asp:Timer>

                    </td>
                </tr>
            </ItemTemplate>
                <LayoutTemplate>
                <table id="Table1" runat="server" class="ListViewLayoutTable">
                    <tr id="Tr1" runat="server">
                        <td id="Td1" runat="server">
                            <table ID="itemPlaceholderContainer" runat="server" border="1" class="ListViewLayoutTable"
                                style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                                <tr id="Tr2" runat="server" style="background-color:#DCDCDC;color: #000000;">
                                    <th id="Th7" runat="server">
                                        field1</th>
                                    <th id="Th1" runat="server">
                                        field2</th>
                                    <th id="Th2" runat="server">
                                        field3</th>
                                    <th id="Th3" runat="server">
                                        field4</th>
                                    <th id="Th4" runat="server">
                                        timer</th>

                                </tr>
                                <tr ID="itemPlaceholder" runat="server">
                                </tr>
                            </table>
                        </td>
                    </tr>

                </table>
            </LayoutTemplate>
    </asp:ListView>
</div>

</form>
</body>
</html>

C＃

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.HtmlControls;

public partial class Shops : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

    if (IsPostBack == false)
    {
        DataTable dt = new DataTable();

        dbServices service = new dbServices("MyConnection");
        SqlCommand command = new SqlCommand("SELECT * FROM table", service.SqlCon);
        SqlDataReader drRecord = command.ExecuteReader();
        dt.Load(drRecord);

        ShopBidsTable.DataSource = dt;
        ShopBidsTable.DataBind();
    }

}


protected void Timer1_Tick(object sender, EventArgs e)
{
    Timer time = (Timer)sender;
    ListViewItem item = (ListViewItem)time.Parent.Parent;
    ListView lst = (ListView)time.Parent.Parent.Parent;

    foreach (ListViewItem listItem in lst.Items)
    {

        Label InitiateDate = item.FindControl("InitiateDate") as Label;
        HtmlGenericControl CountDownTimer = item.FindControl("CountDownTimer") as HtmlGenericControl;
        if (CountDownTimer.InnerHtml != "time up")
        {
            ScriptManager.RegisterStartupScript(InitiateDate, this.GetType(), "AKey" + item.DataItemIndex, "countdown(" + InitiateDate.ClientID + " ," + CountDownTimer.ClientID + ");", true);
        }
    }

}

class A
{
    public string Leave_Status { get; set; }
    public DateTime datetime { get; set; }
}
}

这是我的所有代码......

答案 5 :(得分：-2)

解决了！只有很少改变Tick功能。

protected void Timer1_Tick(object sender, EventArgs e)
{
    Timer time = (Timer)sender;
    ListViewItem item = (ListViewItem)time.Parent; 

    foreach (ListViewItem listItem in Listview1.Items)
    {
        Label InitiateDate = item.FindControl("InitiateDate") as Label;
        HtmlGenericControl CountDownTimer = item.FindControl("CountDownTimer") as HtmlGenericControl;
        if (CountDownTimer.InnerHtml != "time up")
        {
            ScriptManager.RegisterStartupScript(InitiateDate, this.GetType(), "AKey" + item.DataItemIndex, "countdown(" + InitiateDate.ClientID + " ," + CountDownTimer.ClientID + ");", true);
        }
    }
}

非常感谢。希望在其他问题上见到你：）

相关问题
最新问题