1

有两件事我遇到了麻烦。

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

首先，我不希望它在每次页面加载时都运行，因为这会惹恼成员。这可以用 cookie 完成吗？如果是这样，怎么做？

其次，我想<div>在用户单击关闭按钮时使幻灯片退出，这样他们就不必等待脚本完成。

4

5 回答 5

2

我已经用一个基本示例修改了您现有的 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);
        }
    }
}
于 2012-04-12T19:26:04.333 回答
0

您可以使用任何类型的长期存储来做到这一点。

  1. 用户登录
  2. 检查上次通知显示的日期
  3. 是 CurrentDate - LastShownDate > X 吗？显示通知
于 2012-04-12T19:19:57.957 回答
0

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

于 2012-04-12T19:25:47.990 回答
0

好的，卡尔！

首先看看这个：https ://github.com/carhartl/jquery-cookie 有了这个，你应该能够制作 cookie 的东西。

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

于 2012-04-12T19:31:22.220 回答
0

我的示例可能比需要的多一些，因为您可以使用 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.
      }
    });
  });
  }
});

这是帮助您入门的一般目的。“点击”功能也包括在内，如您所愿。

于 2012-04-12T19:37:43.567 回答