麦当劳喜欢优惠券系统答案

【问题标题】：Mcdonalds like couponing system麦当劳喜欢优惠券系统
【发布时间】：2020-03-11 16:51:12
【问题描述】：

我正忙着为一个有餐厅的朋友创建一个网站。他想使用像麦当劳那样的优惠券系统，你点击优惠券，看到它大约 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);
}

<head>
  <title>restaurant</title>
  <link rel="stylesheet" type="text/css" href="https://2benc.nl/noos/semantic/semantic/semantic.min.css">
  <script src="https://2benc.nl/noos/semantic/semantic/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://2benc.nl/noos/semantic/semantic.min.js"></script>

</head>

<body>

  <div class="ui four column divided padded grid">
    <div class="stretched row">
      <div class="column" style="height: 200px; display:none">
        <div class="ui segment">
          <p>zalmschotel</p>
          <img class="ui image" id="demo" src="image.png">
          <p>van €15,-</p>
          <p>voor €5,-</p>

          <div class="ui segment" id="demo1" style="text-align: center;background: green;" onmousedown="f1()" onMouseUp="f2();">
            <a style="color:#fff;font-weight: bold;">Inleveren</a>
          </div>
        </div>

      </div>

      <div class="column">
        <div class="ui segment">
          1
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          1
        </div>
      </div>
      <div class="column">
        <div class="ui segment">
          1
        </div>
      </div>
    </div>
  </div>


</body>

它适用于：https://www.2benc.nl/noos/

所以我卡住了，希望你能在这里帮助我..

【问题讨论】：

您能否详细说明哪些部分不起作用？ sn-p 显然有有趣的结果，但是您在设置倒计时的结束时间时遇到问题吗？还是与显示的文本有关？
我现在拥有的是我设定了结束时间的东西。因此，如果您现在单击按钮，则该项目已过期，因为我设置的时间和日期已过。我想要的是一个倒计时，从你点击它的那一刻开始倒计时，然后过期。

标签： javascript html css coupon

【解决方案1】：

我不确定什么不起作用，因为您没有明确说明。无论如何，从<div class="column" style="height: 200px; display:none"> 中删除display: none（触发计时器的可点击元素在此div 中）并在javascript 代码中使用未来日期。

【讨论】：

【解决方案2】：

如果您唯一的麻烦是在将来某个指定的点击后生成结束时间，那么修改很容易。在您的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

当然，所有这些都只适用于页面保持打开状态 - 刷新或重新访问页面将启动全新的计时器，而不参考其他客户端或其他会话启动的计时器。

【讨论】：