Question

我正在尝试使用一个简单的点击计数器功能来倒计时用户剩余可使用的点击次数，该次数将每24小时重置一次。我浏览了一些教程，并在用户最大化点击次数后在警报中直观地实现了它。但是，如何只在计时器达到0后才重置计数。

HTML

sudo service nginx stop

JavaScript

<p><button onclick="clickCounter()" type="button">Click</button></p>
<div id="result"></div>

以下是其运行方式的示例。目前，我已将其设置为在警报弹出后立即重置，而我只是想知道如何在计时器启动时自动重置。感谢您的任何反馈和帮助

sample link

Answer 1

您可以设置间隔功能以检查时间并在时间到时重置值。我已更改您的代码以添加间隔函数

checkClickCount();

function clickCounter() {
    var d = new Date();
    var hours = 24 - d.getHours();
    var min = 60 - d.getMinutes();
    if ((min + '').length == 1) {
        min = '0' + min;
    }
    var sec = 60 - d.getSeconds();
    if ((sec + '').length == 1) {
        sec = '0' + sec;
    }

    if (typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            if (Number(localStorage.clickcount) < 1) {
                alert('You have max the number of connect \nTime left: ' + hours + ':' + min + ':' + sec);
                return;
            }
            localStorage.clickcount = Number(localStorage.clickcount) - 1
        } else {
            localStorage.clickcount = 4;
        }
        document.getElementById("result").innerHTML = "You have " + localStorage.clickcount + " clicks left.";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}

var intv = null;

function checkClickCount(){
  // interval run a function in a specified period of time
  intv = window.setInterval(function(){

    var currentTime = new Date();

    var remainDateTime = new Date();
    remainDateTime.setHours(24 - currentTime.getHours());
    remainDateTime.setMinutes(60 - currentTime.getMinutes());
    remainDateTime.setSeconds(60 - currentTime.getSeconds());



    if(localStorage.clickcount > 1){
      return;
    }

    // If the remaining times finished, the click count will be reset
    if(remainDateTime.getHours() + remainDateTime.getMinutes() + remainDateTime.getSeconds() == 0){
      localStorage.clickcount = 4;
      document.getElementById("result").innerHTML = "You have " + localStorage.clickcount + " clicks";
      return;
    }

    document.getElementById("result").innerHTML = "You will get 4 more clicks in " + remainDateTime.getHours() + ":" + remainDateTime.getMinutes() + ":" + remainDateTime.getSeconds() + " later.";

  }, 1000);
}

Javascript-如何在计时器达到0时重置按钮计数器

1 个答案: