如何在 Gridview 标签中显示 javascript var 值

Question

在我的应用程序中，我正在计算两个值之间的时间（例如：上午 9 点到下午 3 点），为此我使用的是 Javascript 函数，它工作正常，但是，我想在 gridview 中显示时间，在 gridview 中我是在gridview行中为显示时间创建标签，这里是我尝试过的波纹管代码：

aspx.cs:

 DateTime now = DateTime.Now;
        DateTime fourOClock = DateTime.Today.AddHours(21.50);
        msUntilFour = (int)((fourOClock - now).TotalSeconds); 

这里我将 msUntilFour 值发送到 Javascript（以下代码）

<script>
     var JavascriptBlah = '<%=msUntilFour%>'
    var upgradeTime = JavascriptBlah;
    var seconds = upgradeTime;
    function timer() {
        var days = Math.floor(seconds / 24 / 60 / 60);
        var hoursLeft = Math.floor((seconds) - (days * 86400));
        var hours = Math.floor(hoursLeft / 3600);
        if (hours < 10) {
            hours = "0" + hours;
        }
        var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
        var minutes = Math.floor(minutesLeft / 60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer()', 1000);
</script> 

然后我显示时间跨度（以下代码）

<h3><span id="countdown" class="timer" ></span></h3>

到这里它工作正常，但我想在 gridview 中显示输出时间，如下所示

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                 <Columns>
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="CreateTs" HeaderText="Created Time" />
                      <asp:BoundField DataField="Time Left" HeaderText="Time Remaining" />
                     <asp:TemplateField HeaderText="Speciality" Visible="true">
                                    <ItemTemplate>
                                     <h3><span id="countdown" class="timer" runat="server" ></span></h3>
                                    </ItemTemplate>
                                </asp:TemplateField>

                 </Columns>

                </asp:GridView>

这里我想在 Gridview 模板标签中显示时间。我怎样才能做到这一点 ？ 提前谢谢...@

Answer 1

我假设 GridView 有多行。如果是这种情况，span 元素中的ID 将被复制。在我的示例中，id 附加了行号以使其唯一。其次，常规 html 元素中不需要 runat="server"。在我的示例中，不需要 ID，但您以后可能需要它，并且重复 ID 不是一个好习惯。

页面加载完成后，脚本将使用timer 类循环页面上的所有元素，并将原始sn-p 中的时间放入span。请注意使用 $(this).html 而不是 $(this).val，因为该值是元素内部的 html 内容，而不是 TextBox 的值。

        <asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField HeaderText="" Visible="true">
                    <ItemTemplate>
                        <h3><span id="countdown_<%# Container.DataItemIndex %>" class="timer"></span></h3>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

        <script type="text/javascript">
            $(document).ready(function () {
                $(".timer").each(function () {
                    var JavascriptBlah = '<%=msUntilFour%>'
                    var upgradeTime = JavascriptBlah;
                    var seconds = upgradeTime;

                    var days = Math.floor(seconds / 24 / 60 / 60);
                    var hoursLeft = Math.floor((seconds) - (days * 86400));
                    var hours = Math.floor(hoursLeft / 3600);
                    if (hours < 10) {
                        hours = "0" + hours;
                    }
                    var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
                    var minutes = Math.floor(minutesLeft / 60);
                    var remainingSeconds = seconds % 60;
                    if (remainingSeconds < 10) {
                        remainingSeconds = "0" + remainingSeconds;
                    }
                    $(this).html(hours + ":" + minutes + ":" + remainingSeconds);
                    if (seconds == 0) {
                        clearInterval(countdownTimer);
                        $(this).html("Completed");
                    } else {
                        seconds--;
                    }
                });
            });
        </script>

Answer 2

尝试每次在某一行加载 span 时调用 timer 函数，并通过在 span 标签中添加 timer(this) 将 HTML 元素传递给该函数：

 <ItemTemplate>
  <h3><span id="countdown" class="timer" runat="server" onload="timer(this)"></span></h3>
 </ItemTemplate>

调用函数后，您可以使用 jquery $(Element).html('urData') 或 $(Element).val('urData ') 或 $(Element).text('urData'):

  function timer(Element) {
    var days = Math.floor(seconds / 24 / 60 / 60);
    var hoursLeft = Math.floor((seconds) - (days * 86400));
    var hours = Math.floor(hoursLeft / 3600);
    if (hours < 10) {
        hours = "0" + hours;
    }
    var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
    var minutes = Math.floor(minutesLeft / 60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }
    $(Element).val(hours + ":" + minutes + ":" + remainingSeconds);
    if (seconds == 0) {
        clearInterval(countdownTimer);
        $(Element).val("Completed");
    } else {
        seconds--;
    }
}

希望这对你有用