Question

我遇到麻烦的两件事。

我已经构建了一个通知，在页面加载时滑入，并在一段时间后滑出。

首先，我不希望每次加载页面时都会运行，因为这会使成员烦恼。这可以用饼干吗？如果是这样，怎么样？

其次，当用户点击关闭按钮时，我想让<div>滑出，这样他们就不必等待脚本完成了。

Answer 1

我修改了您现有的jsFiddle，其中有一个基本示例，说明如果用户已经看过弹出式窗口，可以使用哪些Cookie来记录：http://jsfiddle.net/Jk2AG/27/

$(document).ready(function() {

    if (getCookie("show-slide") == null) {
        $("#dimBackgrnd").hide().delay(1000).fadeIn("slow");

        $("#slide").hide().delay(2000).show("drop", {
            direction: "up"
        }, 500);


        $("#dimBackgrnd").hide().delay(7500).fadeOut("slow");

        $("#slide").delay(6000).hide("drop", {
            direction: "down"
        }, 500);

        setCookie("show-slide", "false", 7);
    }
    else {
        $("#dimBackgrnd").hide();
        $("#slide").hide();
    }

});

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

Answer 2

您可以使用任何类型的长期存储。

用户登录
查看上次通知显示日期
是CurrentDate - LastShownDate＆gt; X ？显示通知

Answer 3

如果您未在服务器上存储最后一个通知日期，则可以在用户的计算机上存储一个cookie，该cookie将在X天后过期。如果没有cookie，则显示该消息。

Answer 4

Okey Karl！

首先看一下：https://github.com/carhartl/jquery-cookie 有了它，你应该能够制作饼干。

然后看着我的小提琴，有点剥夺但工作得很好！ http://jsfiddle.net/Jk2AG/28/

Answer 5

我的示例可能比需要的要多一些，因为您可以使用JavaScript创建cookie，但我想我会展示我将使用的服务器端解决方案。

如果您正在使用PHP，可以在点击时将其作为会话变量传递，让我们看一下：

$(function(){
  $('#slide #submit').click(function(){
    $.ajax({
      url: 'cookie_parser.php',
      data: 'setShowSlide=1', //we'll explain 0/1 methodology in the php description
      success: function(data){
        //we could do stuff with the (data) object, but we're not going to. 
        //Instead, we need to check it on page load.
      }
    });
  });
});

PHP解析数据，设置会话，然后返回ID，以便我们检查它。

<?php
  session_start(); /* so we can deal with our cookie variables */
  if(!empty($_GET['setShowSlide']) || !empty($_SESSION['setShowSlide'])){
    if(!empty($_GET['setShowSlide']) && empty($_SESSION['setShowSlide'])){
      $setShowSlide = $_GET['setShowSlide']
      if($setShowSlide == 1){
        session_start();
        $_SESSION['setShowSlide'] = $setShowSlide;
        return '<input type="hidden" id="setShowSlideCheck" value="'.$_SESSION['setShowSlide'].'">';
      }else if ($setShowSlide != 1){
        return false;
        /* We don't need to return any other instance. If it's not 1, then we're being hijacked, and we want to stop all script execution. */
      }
    }else if(empty($_GET['setShowSlide']) && !empty($_SESSION['setShowSlide'])){
      return '<input type="hidden" id="setShowSlideCheck" value="'.$_SESSION['setShowSlide'].'">';
    }else if(empty($_GET['setShowSlide']) && empty($_SESSION['setShowSlide'])){
      /* Do not do anything. This is default behavior. We want this to display on page load the first time. */
    }
  }
?>

在“模板”文件或“index.php”文件中，您使用的任何文件都会不断包含javascript / css以维护您的设计/流程。

<?php
  session_start();
  include_once('cookie_parseer.php');
?>

在我们的jQuery中，我们现在可以测试DOM对象'setShowSlideCheck'的存在。

$(function(){
  if($('#setShowSlideCheck').length != 0){
    //Don't show the slide, show the slide in variations, more checking to see if user needs to see the slide again, etc.
  }else{
    $("#slide").hide().delay(2000).show("drop", {
        direction: "up"
      }, 500
    );        
    // let's build the click function you wanted now
    $('#slide #submit').click(function(){
      $.ajax({
        url: 'cookie_parser.php',
        data: 'setShowSlide=1', //we'll explain 0/1 methodology in the php description
        success: function(data){
        //we could do stuff with the (data) object, but we're not going to. 
        //Instead, we need to check it on page load.
        $("#slide").hide('drop', {
            direction: "down"    
          }, 500
        );
        //I'm choosing to hide the above in the callback for the success on ajax request.
        //You can actually do this wherever you like.
      }
    });
  });
  }
});

这是让您入门的一般目的。 “click”功能也可以根据需要包含在内。

显示Div每xHours或xDays

5 个答案: