Javascript 倒计时时间无法显示

Javascript count down time failing to display

本文关键字：显示 时间 倒计时 Javascript      更新时间：2023-09-26

我想在我的 asp.net mvc站点的页面顶部显示倒计时，我一直在尝试使用javascript创建它，但是倒计时没有显示在我的页面上，我不明白为什么。任何帮助将不胜感激，谢谢！

这是我的观点和我的脚本

@model Site.ViewModels.SummaryVm
<head>
<title>Order Summary</title>
</head>  
    <header>
        <h2> Here is your order summary, please review before proceeding  with payment. Please complete this transaction within 15 minutes or your order will be cancelled.</h2>
    </header>
        <div class="float-left">
             <h2 id="countdown"></h2>
        </div>
  <script type="text/javascript">
    var dt = '@ViewBag.CountDown_Time';
    var dateAr = dt.split('-');
    var newDate = dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2];
    var end = new Date(dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2]);
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;
    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';
            var eventID = 'eventID='+@Model.eventID;
            var orderID = 'orderID='+@Model.orderID;
            var quantity = 'quantity='+@Model.ticketQuantity;
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById('countdown').innerHTML = hours + 'hrs ';
            document.getElementById('countdown').innerHTML += minutes + 'mins ';
            document.getElementById('countdown').innerHTML += seconds + 'secs';
        }
        timer = setInterval(showRemaining, 1000);
    }
 </script>

这是我的控制器方法

public ActionResult CreateOrder(OrderVm orderVm)
{
 //code removed form brevity 
  if (Session["CountDown_Time"] == null)
  {
    Session["CountDown_Time"] = DateTime.Now.AddMinutes(15).ToString("dd-MM-yyyy h:mm:ss tt");
   }
    ViewBag.CountDown_Time = Session["CountDown_Time"];
     return View("OrderSummary", summaryVm);
   }

showRemaining 没有调用，你想在方法本身之外开始间隔，如下所示：

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {
        clearInterval(timer);
        document.getElementById('countdown').innerHTML = 'EXPIRED!';
    } else {
        var eventID = 'eventID='+@Model.eventID;
        var orderID = 'orderID='+@Model.orderID;
        var quantity = 'quantity='+@Model.ticketQuantity;
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }   
}
timer = setInterval(showRemaining, 1000);

相关文章：