javascript - 仅加载页面内的特定 DIV

Question

我有一个 ASP.NET MVC 项目内部的 View 。问题是我想加载一个特定的 DIV，当它达到零时显示倒计时时间。在我的代码中，它刷新所有页面，但我只想加载 ID 为“refresh”的 DIV。这是我的代码:

    var end = DateTime.Today.AddDays(1) - DateTime.Now;
    var timeRemaining = TimeSpan.FromTicks(end.Ticks).TotalSeconds;

    <div id="refresh"></div>
      <div class="col-md-12" id="time">
       <div>
        Time Remaining : <span id="tRemaining"></span>
       </div>
    </div>

<script>
    var remSeconds = Math.floor(@timeRemaining);
    var secondsCounter = Math.floor(remSeconds % 60);
    var minutesCounter = Math.floor((remSeconds / 60) % 60);
    var hoursCounter = Math.floor((remSeconds / 3600));

    function formatNumber(number) {
        if (number < 10)
            return '0' + number;
        else
            return '' + number;
    }

    function startTick()
    {
        document.getElementById('secRemaining').innerText = formatNumber((secondsCounter));
        document.getElementById('minRemaining').innerText = formatNumber((minutesCounter));
        document.getElementById('hrRemaining').innerText = formatNumber((hoursCounter));
        document.getElementById('tRemaining').innerText = formatNumber((remSeconds));

        var _tick = setInterval(function()
        {
            if ((remSeconds) > 0) {
                if (hoursCounter > 0) {
                    if (minutesCounter == 0) {
                        minutesCounter = 60;
                        hoursCounter = hoursCounter - 1;
                    }
                }
                if (secondsCounter==0) {
                    secondsCounter = 60;
                    minutesCounter = minutesCounter - 1;
                }
                secondsCounter = secondsCounter - 1;
                remSeconds = remSeconds - 1;

                document.getElementById('secRemaining').innerText = formatNumber((secondsCounter));
                document.getElementById('minRemaining').innerText = formatNumber(parseInt(minutesCounter));
                document.getElementById('hrRemaining').innerText = formatNumber(parseInt(hoursCounter));
                document.getElementById('tRemaining').innerText = formatNumber(parseInt(remSeconds));
            } else {
                clearInterval(_tick);
                window.location = location.href;
                $('#time').load(location.href + ' #time');
            }
        }, 1000);
    }

    startTick();
</script>

Answer 1

我希望这就是您正在寻找的内容。

var countDownDate = new Date("Dec 25, 2019 00:00:00").getTime();

function startTick() {


  var _tick = setInterval(function() {
  
  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  /*** update the element with the time remaining ****/
  document.getElementById("tRemaining").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  /*** update the element with the time remaining ****/

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("tRemaining").innerHTML = "EXPIRED";
  }

  }, 1000);
}

startTick();

<div id="refresh"></div>
    <div class="col-md-12" id="time">
      <div>
        Time Remaining : <span id="tRemaining"></span>
      </div>
    </div>

https://jsfiddle.net/4tqbr7p2/