Question

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

aspx.cs：

RequestBody.create(MediaType.parse("application/json"), json)

RequestBody.create(MediaType.parse("image/jpg"), file)

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

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

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

<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>

到目前为止它工作正常，但我想在gridview中显示输出时间，如下所示

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

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

Answer 1

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

当页面完成加载后，脚本将使用timer类循环页面上的所有元素，并将原始代码段中的时间放在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

每次在特定行中加载范围时尝试调用计时器函数，并通过将计时器（this）添加到span标记来将函数传递给函数：

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

调用函数后，您可以使用jquery $（元素）.html（'urData'）或 $（元素）.val（'urData）访问传递给它的html元素'）或 $（元素）.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--;
    }
}

希望这适合你

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

2 个答案: