Макдональдс как система купонов

Question

Я занят созданием сайта для друга, у которого есть ресторан. Он хочет использовать систему купонов, такую ​​как в McDonalds, где вы нажимаете на купон, просматриваете его в течение примерно 10 минут, а затем разочаровываетесь или вылетаете, или что-то в этом роде.

то, что я пытался сделать, не работает, потому что я использую время, которое я установил для обратного отсчета, но таймер должен запускаться, как только вы нажмете на него.

function f2() {
  document.getElementById('demo1').style.backgroundColor = 'green';
  //form validation that recalls the page showing with supplied inputs.    
}

function f1() {
  document.getElementById('demo1').style.backgroundColor = 'darkgreen';
  //form validation that recalls the page showing with supplied inputs.    

  // Set the date we're counting down to
  var countDownDate = new Date("Mar 11, 2020 16:51:00").getTime();

  // Update the count down every 1 second
  var x = 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);

    // Output the result in an element with id="demo"
    document.getElementById("demo1").innerHTML = //days + "d " + hours + "h "
      "Nog " + minutes + "m " + seconds + "s" + " geldig!";



    // If the count down is over, write some text 
    if (distance < 0) {
      clearInterval(x);
      document.getElementById("demo").src = "https://2benc.nl/noos/image1.png"
      document.getElementById("demo").style.backgroundImage = "url('https://2benc.nl/noos/geometric-leaves.png')";
      document.getElementById("demo1").innerHTML = "EXPIRED";
      document.getElementById("demo1").style.display = "none";
    }
  }, 1000);
}

он работает на: https://www.2benc.nl/noos/

так что я застрял в надежде, что вы поможете мне здесь ..

Answer 1

Если ваша единственная проблема заключается в создании конечного времени в определенное время после щелчка в будущем, то это простая модификация. Внутри вашего f1() просто измените дату обратного отсчета:

// Set the date we're counting down to
var countDownDate = new Date().getTime(); // this is now
countDownDate += 1000 * 60 * 10; // add 10 minutes

Вы можете легко добавить различную сумму в мс для любого периода времени, который вы имеете в виду:

countDownDate += 1000 * 30; // add 30 seconds
countDownDate += 1000 * 60 * 60 * 2; // add 2 hours
countDownDate += 1000 * 60 * 60 * 24 * 3; // add 3 days

Конечно, все это применяется только тогда, когда страница остается открытой - при обновлении или повторном посещении страницы запускаются совершенно новые таймеры без ссылки на таймеры, запущенные другими клиентами или другими сеансами.

Answer 2

Я не уверен, что не работает, потому что вы не четко заявили. В любом случае, удалите display: none из <div class="column" style="height: 200px; display:none"> (ваш активируемый элемент, который запускает таймер в этом div) и используйте будущую дату в коде javascript.