Question

我制作了类似于潜望镜心脏特征的动画。 My Implementation

现在，每次按下按钮，计数器都会继续递增。我的目标是阻止计数器每24小时计数一次，但保留用户可以点击按钮激活心脏动画的部分。

$('#heartActivate').click(function() {

        // Calculate 24 hours in milliseconds
        var second = 1000;
        var minute = 60 * second;
        var hour = 60 * minute;
        var day = 24 * hour;

        var now = Date.now();
        var tomorrow = now + day;

        localStorage.setItem('next-active-time', tomorrow);

        var nextActiveTime = localStorage.getItem('next-active-time') || 0;
        if (Date.now() < nextActiveTime) {

          var rand = Math.floor(Math.random() * 100 + 1);
          var flows = ["flowOne", "flowTwo", "flowThree"];
          var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"];
          var timing = (Math.random() * (4.3 - 0.3) + 1.6).toFixed(1);
          // Animate Particle
          $('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (37 - 22) + 22) + 'px;"><i class="fa fa-heart-o"></i><i class="fa fa-heart"></i></div>').appendTo('.particle-box').css({ animation: "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear" });
          $('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (37 - 22) + 22) + 'px;"><i class="fa fa-star-o"></i><i class="fa fa-star"></i></div>').appendTo('.particle-box').css({ animation: "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear" });
          $('.part-' + rand).show();
          // Remove Particle
          setTimeout(function () {
            $('.part-' + rand).remove();
          }, timing * 1000 - 100);  
          $('#output').html(function(i, val) {
            return parseInt(val, 10) + 1;
          });
          return false;
        }

JSFiddle of all my code

目标：点击按钮时保持心脏动画，但每24小时按钮点击一次增加计数器

Answer 1

这应该适用于jsfiddle，但是setLocalStorage在这里被阻止（https://jsfiddle.net/mcto9ecL/16/）你会看到计数器从1变为2，然后在localStorage标记设置为明天后停止增量

你的主要问题是你总是将localStorage设置为明天，这意味着今天永远不会是更新计数器的日子。

您需要检查本地存储是否存在，并使用它，否则创建它。

（但是，用户可以从浏览器中删除存储并按住按钮）

你比较日期的逻辑有缺陷（逆转）今天（date.now（））总是比明天少，因为你每次都在生成它。

我将代码分开，使click函数中的主要逻辑更加清晰，并添加了一些注释来解释它

＆＃13;

function showAnimation() {
  var rand = Math.floor(Math.random() * 100 + 1);
  var flows = ["flowOne", "flowTwo", "flowThree"];
  var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"];
  var timing = (Math.random() * (4.3 - 0.3) + 1.6).toFixed(1);
  // Animate Particle
  $('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (30 - 22) + 22) + 'px;"><i class="fa fa-heart-o"></i><i class="fa fa-heart"></i></div>').appendTo('.particle-box').css({
    animation: "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear"
  });
  $('<div class="particle part-' + rand + ' ' + colors[Math.floor(Math.random() * 6)] + '" style="font-size:' + Math.floor(Math.random() * (30 - 22) + 22) + 'px;"><i class="fa fa-star-o"></i><i class="fa fa-star"></i></div>').appendTo('.particle-box').css({
    animation: "" + flows[Math.floor(Math.random() * 3)] + " " + timing + "s linear"
  });
  $('.part-' + rand).show();
  // Remove Particle
  setTimeout(function() {
    $('.part-' + rand).remove();
  }, timing * 1000 - 100);
  return false;
}

function incrementCounter() {
  $('#output').html(function(i, val) {
    console.log(i, val);
    return parseInt(val, 10) + 1;
  });
}

function getTomorrow(today) {
  // Calculate 24 hours in milliseconds
  var second = 1000;
  var minute = 60 * second;
  var hour = 60 * minute;
  var day = 24 * hour;

  return today + day;
}
$('#heartActivate').click(function() {

  var today = Date.now();
  var tomorrow = getTomorrow(today);

  showAnimation(); //show hearts

  //calculate if we need to increase counter or return false
  //check if they already have a next-active-time stored on the browser
  var nextActiveTime = localStorage.getItem('next-active-time') || 0; 
  if (!nextActiveTime) {
    //they havent clicked before increment and set tommorows time in local storage
    localStorage.setItem('next-active-time', tomorrow);
    incrementCounter();
    return true
  }

  if (today >= nextActiveTime) { 
 // if today is greater than or equal to nextActiveTime increment by 1
    incrementCounter();
    localStorage.setItem('next-active-time', tomorrow);
    return true
  }
  //else do nothing we are not past tommorow yet

  return false
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="heartActivate" type="button">Activate Heart</button>
<div class="particle-box"></div>
<div id="output">1</div>

＆＃13;

每24小时推迟一次柜台增加

1 个答案: