Question

我想在我的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);
   }

Answer 1

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

Javascript倒计时未能显示

1 个答案: