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

<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/

所以我很希望您能在这里帮助我。

Answer 1

我不确定什么是行不通的，因为您没有明确说明。无论如何，请从php artisan config:cache中删除display: none（触发计时器的可点击元素位于此div中），并在javascript代码中使用将来的日期。

Answer 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

当然，所有这一切仅在页面保持打开状态时适用-刷新或重新访问页面将启动全新的计时器，而无需参考其他客户端或其他会话启动的计时器。

麦当劳喜欢优惠券系统

2 个答案: