Question

嗯，基本上就是这样。我正在为我的商店设置促销代码，我想为这个促销设置一个计时器，所以人们觉得在促销结束前需要购买。我有代码，它已经功能齐全了，但问题是它会在页面刷新时重新启动，我已经查看了其他答案和内容，但我无法弄清楚如何将cookie放在我的代码中因为这就是所有页面都说的。

谢谢！

我的代码是

  function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

...

我的网站是：http://sevenpartes.com/

Answer 1

非服务器选项是将计时器开始时间保存在本地存储中，然后在每次加载页面时检查本地存储器是否有活动计时器。当计时器到期时，您将清除本地存储。

这种方法的一个缺点是理论上它是可以破解的 - 有人可以编辑局部变量。你可以用某种方式编码它，但是对源代码的检查会揭示如何破解它。

Answer 2

将截止日期保存到Cookie。 How to read and write to cookies with javascript

该指南提出了两个功能：

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

可以使用如下

$(window).load(function(){
    var deadline = new Date( getCookie('deadline') );
    // If the deadline is NaN, it has not been set.
    if( isNaN(deadline.getTime()) )
    {
        // Set the deadline to one day from now (86400000ms)
        deadline = new Date( Date.now() + 86400000 );
        setCookie('deadline', deadline.toUTCString());
    }
    // The deadline is expired
    if( deadline.getTime() < Date.now() ) 
    {
        // Handle this / set deadline to a new time
    }

    // Set the countdown timer on the page
    myCountDownTimer.setDeadline( deadline );
}

Answer 3

只是免责声明，您绝对需要一个服务器端解决方案来阻止任何人绕过促销的时间限制。这也是你可以使你的代码可靠的唯一方法，但话虽如此，这是我对你的问题的回答。

您可以使用以下代码替换代码的倒数第二行，从而静态设置促销的结束时间。请务必更改数字以与促销的结束日期保持一致。

//Example:
var myString = "2222222222222222"; //Should Output Error
var myString2 = "2222222222222228"; //Should be OK

for(var i = 0; i <= 9; i++)
{
    //I'm trying here to put the 'i' inside the regular expression
    var count = (myString.match(/[i]/g) || []).length;
    if(count == 16)
    {
       console.log("ERROR!");
       break;
    }
}

如果您希望仅在首次访问时启动超时，请参考有关使用Cookie的其他答案。

一旦开始使用服务器端语言（如PHP），就可以动态生成进入Date对象的3个数字，以便从您设置的任何数据库中设置其值。如果您的客户是从您的网站购买的，那么您还需要在服务器端检查促销是否结束。因为，只能在客户端进行检查，这很容易被绕过。

倒计时器，在页面刷新时不会重新启动

3 个答案: