用户查看弹出窗口更改变量值的次数

【问题标题】：Amount of Times a User Views a Popup Changes Variable's Value用户查看弹出窗口更改变量值的次数
【发布时间】：2017-09-24 04:36:05
【问题描述】：

我有一个在页面加载时自动加载的弹出窗口，它在关闭按钮上有一个计时器，可以防止弹出窗口关闭 60 秒。它还有一个打印按钮，如果您按“g”键可以调用它。

现在，我一直在尝试使计时器上的时间量根据用户已经看到弹出窗口的次数而变化（即第一次：60 秒。第 2-4 次：45 秒。第 5 次+时间：30 秒。），由counter 变量控制。我找到了link1、link2、link3 和link4，我相信这对我的问题有很大帮助，但我无法成功地将它们合并到我的代码中。

请注意，计时器在 sn-p 或 fiddle 中似乎不起作用，尽管它在我的浏览器中起作用。我的代码如下：

$(document).ready(function() {
    $(document).keypress(function(e){
        if(e.charCode === 65 || 103) {
             $('#PopUp').css("visibility", "visible"); 
             $('#PopUp').css("opacity", 1); 
        }
    });
    $(function(){
  
       $('#PopUp').css("visibility", "visible"); 
       $('#PopUp').css("opacity", 1); 
  
       });
  
  $( ".close" ).click(function() {

       $('#PopUp').css("visibility", "hidden"); 
       $('#PopUp').css("opacity", 0);
    });
});

        function printDiv()
        {
            var content = document.getElementById('content').innerHTML;
            var win = window.open();
            win.document.write(content);
            win.print();	// JavaScript Print Function
            win.close();	//It will close window after Print.
        }

  var counter = 60; 
  var setMsg = setInterval(function() {
    counter--;
    if(counter >= 60 && counter >= 70) {
  $("#close-message").html("1:" + (counter - 60));
} else if(counter >= 60 && counter < 70) {
  $("#close-message").html("1:0" + (counter - 60));
}  else if(counter >= 10) {
      $("#close-message").html("0:" + counter);
        } else if (counter > 0) {
      $("#close-message").html("0:0" + counter);
    } else {
      $( ".close" ).click(function() {
        $('#PopUp').css("visibility", "hidden"); 
        $('#PopUp').css("opacity", 0);
      });
      $("#timer").remove();
      clearInterval(setMsg);
    }
  }, 1000);
  
});
    .t {
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        -webkit-transform: scale(0.25);
        -moz-transform: scale(0.25);
        -o-transform: scale(0.25);
        -ms-transform: scale(0.25);
        z-index: 2;
        position: absolute;
        white-space: pre;
        overflow: visible;
    }

    #t1_1{left:256px;top:35px;letter-spacing:0.1px;}
    #t2_1{left:334px;top:87px;word-spacing:-0.1px;}
    #t3_1{left:210px;top:123px;}
    #t4_1{left:238px;top:123px;word-spacing:-0.3px;}
    #t5_1{left:210px;top:141px;}
    #t6_1{left:210px;top:160px;}
    #t7_1{left:210px;top:179px;}
    #t8_1{left:238px;top:141px;letter-spacing:-0.1px;word-spacing:-0.1px;}
    #t9_1{left:238px;top:160px;word-spacing:-0.1px;}
    #ta_1{left:238px;top:179px;word-spacing:-0.1px;}
    #tb_1{left:343px;top:242px;letter-spacing:-0.1px;}
    #tc_1{left:210px;top:278px;}
    #td_1{left:210px;top:297px;}
    #te_1{left:210px;top:315px;}
    #tf_1{left:210px;top:334px;}
    #tg_1{left:238px;top:278px;word-spacing:-0.1px;}
    #th_1{left:238px;top:297px;word-spacing:-0.1px;}
    #ti_1{left:238px;top:315px;word-spacing:-0.2px;}
    #tj_1{left:238px;top:334px;word-spacing:-0.1px;}
    #tk_1{left:286px;top:393px;word-spacing:-0.1px;}
    #tl_1{left:210px;top:429px;}
    #tm_1{left:210px;top:448px;}
    #tn_1{left:210px;top:466px;}
    #to_1{left:210px;top:485px;}
    #tp_1{left:238px;top:429px;word-spacing:-0.3px;}
    #tq_1{left:238px;top:448px;word-spacing:-0.1px;}
    #tr_1{left:238px;top:466px;word-spacing:-0.1px;}
    #ts_1{left:238px;top:485px;word-spacing:-0.2px;}
    #tt_1{left:326px;top:544px;letter-spacing:-0.1px;}
    #tu_1{left:210px;top:580px;}
    #tv_1{left:210px;top:599px;}
    #tw_1{left:210px;top:618px;}
    #tx_1{left:238px;top:618px;}
    #ty_1{left:210px;top:636px;}
    #tz_1{left:238px;top:636px;}
    #t10_1{left:210px;top:655px;}
    #t11_1{left:238px;top:580px;word-spacing:-0.1px;}
    #t12_1{left:238px;top:599px;word-spacing:-0.2px;}
    #t13_1{left:238px;top:655px;word-spacing:-0.1px;}
    #t14_1{left:264px;top:716px;word-spacing:-0.2px;}
    #t15_1{left:210px;top:752px;}
    #t16_1{left:210px;top:771px;}
    #t17_1{left:210px;top:789px;}
    #t18_1{left:210px;top:808px;}
    #t19_1{left:238px;top:752px;word-spacing:-0.1px;}
    #t1a_1{left:238px;top:771px;word-spacing:-0.1px;}
    #t1b_1{left:238px;top:789px;word-spacing:-0.2px;}
    #t1c_1{left:238px;top:808px;word-spacing:-0.1px;}

    .s1_1{
        FONT-SIZE: 85.4px;
        FONT-FAMILY: Arial;
        color: rgb(0,0,0);
        FONT-WEIGHT: bold;
    }

    .s2_1{
        FONT-SIZE: 61.2px;
        FONT-FAMILY: Arial;
        color: rgb(0,0,0);
        FONT-WEIGHT: bold;
    }

    .s3_1{
        FONT-SIZE: 61.2px;
        FONT-FAMILY: SymbolMT_1z5;
        color: rgb(0,0,0);
    }

    .s4_1{
        FONT-SIZE: 61.2px;
        FONT-FAMILY: Arial;
        color: rgb(0,0,0);
    }

    div {
      padding-top: 10px;
    }

      .button {
        font-size: 1em;
        padding: 10px;
        color: #fff;
        border: 2px solid orange;
        border-radius: 20px/50px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease-out;
      }
      .button:hover {
        background: orange;
      }
      .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 500ms;
        visibility: visible;
        opacity: 1;
        height: 578%;
        width: 117.5%;
      }
      .overlay:target {
        visibility: hidden;
        opacity: 0;
        display:none;
      }
      .PopUp {
        margin: 50px auto;
        padding: 0px;
        background: #fff;
        border-radius: 5px;
        width: 60%;
        position: relative;
        transition: all 5s ease-in-out;
      }
      .PopUp .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      .PopUp .close:hover {
        color: orange;
      }
      .PopUp .content {
        max-height: 117.5%;
        overflow: auto;
      }

.pdf1 {
width: 935px;
height: 1210px;
background-color: white;
-moz-transform: scale(1);
z-index: 0;
border: none;
  }

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    font-family: "Open Sans",sans-serif;
    font-weight: 700;
    color: #2D2D2D;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}
.Print {
    padding-bottom: 10px;
    margin-top: -5px;   
}

.close-message {
    font-family: "Open Sans",sans-serif;
    font-weight: 700;
    color: black;
    font-size: 0.9rem;
    line-height: 1;
    position: absolute;
    top: 15px;
    left: 9px;
}

.timer {
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="PopUp" class="overlay">
        <div class="PopUp">
	<div class="timer" id="timer"><img src="http://i.imgur.com/87XaOWA.png"><p class="close-message" id="close-message"></p></div>

            <a class="close" href="#">&#10005;</a>
            <div class="content">
<div id="p1" class="p1" style="overflow: hidden; position: relative; width: 885px; height: 878px;">

   <!-- Begin page background -->
<div id="pg1Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"></div>
<div id="pg1" class="pg1" style="-webkit-user-select: none;"><img src="http://i.imgur.com/vcY42CW.png" id="pdf1" class="pdf1"></img></div>
   <!-- End page background -->


<!-- Begin text definitions (Positioned/styled in CSS) -->
<div id="t1_1" class="t s1_1">Player Selection Criteria Evaluator Cue Card</div>
<div id="t2_1" class="t s2_1">Skating – speed, quickness, technique</div>
<div id="t3_1" class="t s3_1">♦</div>
<div id="t4_1" class="t s4_1">Forward and Backward</div>
<div id="t5_1" class="t s3_1">♦</div>
<div id="t6_1" class="t s3_1">♦</div>
<div id="t7_1" class="t s3_1">♦</div>
<div id="t8_1" class="t s4_1">Turn both directions</div>
<div id="t9_1" class="t s4_1">Stop both directions</div>
<div id="ta_1" class="t s4_1">Are they in a good position for stability and strength</div>
<div id="tb_1" class="t s2_1">Passing – technique, control, vision</div>
<div id="tc_1" class="t s3_1">♦</div>
<div id="td_1" class="t s3_1">♦</div>
<div id="te_1" class="t s3_1">♦</div>
<div id="tf_1" class="t s3_1">♦</div>
<div id="tg_1" class="t s4_1">Forehand and Backhand</div>
<div id="th_1" class="t s4_1">To moving and stationary target</div>
<div id="ti_1" class="t s4_1">Vision – do they take a look and select best option</div>
<div id="tj_1" class="t s4_1">Advanced – board passes, chips, saucer passes</div>
<div id="tk_1" class="t s2_1">Puck Control – technique, open ice, confined space</div>
<div id="tl_1" class="t s3_1">♦</div>
<div id="tm_1" class="t s3_1">♦</div>
<div id="tn_1" class="t s3_1">♦</div>
<div id="to_1" class="t s3_1">♦</div>
<div id="tp_1" class="t s4_1">Open carry with speed</div>
<div id="tq_1" class="t s4_1">Execute dekes and fakes on the 1 on 1</div>
<div id="tr_1" class="t s4_1">Can they handle the puck in traffic and tight space</div>
<div id="ts_1" class="t s4_1">Ability to maintain control while being stick checked</div>
<div id="tt_1" class="t s2_1">Shooting – technique, accuracy, velocity</div>
<div id="tu_1" class="t s3_1">♦</div>
<div id="tv_1" class="t s3_1">♦</div>
<div id="tw_1" class="t s3_1">♦</div>
<div id="tx_1" class="t s4_1">Velocity</div>
<div id="ty_1" class="t s3_1">♦</div>
<div id="tz_1" class="t s4_1">Accuracy</div>
<div id="t10_1" class="t s3_1">♦</div>
<div id="t11_1" class="t s4_1">Forehand and backhand</div>
<div id="t12_1" class="t s4_1">Wrist shot, snap shot, slap shot</div>
<div id="t13_1" class="t s4_1">Shot Selection – do they select the best shot for the opportunity?</div>
<div id="t14_1" class="t s2_1">Game Understanding – Principles of Offence and Defence</div>
<div id="t15_1" class="t s3_1">♦</div>
<div id="t16_1" class="t s3_1">♦</div>
<div id="t17_1" class="t s3_1">♦</div>
<div id="t18_1" class="t s3_1">♦</div>
<div id="t19_1" class="t s4_1">Player understands positional play</div>
<div id="t1a_1" class="t s4_1">Player supports the puck on the defensive and offensive side of puck</div>
<div id="t1b_1" class="t s4_1">Player communicates with teammates</div>
<div id="t1c_1" class="t s4_1">Player has the ability to read and react.</div>
</div>
</div>
<div id="Print" class="Print" align="center">
<button onclick="printDiv()"><img src="http://i.imgur.com/HcXNoMC.png" /></button>
</div>
	</div>
</div>

【问题讨论】：

  • 还有第6、7等时间？...
  • P.S: 真的只是出于好奇……你为什么要做那件事 - 绝对定位 - 一切？
  • @RokoC.Buljan 如果你想具体一点，它会更像这样：第一次：60 秒。第 2、3、4 次：45 秒。第 5-9 次：30 秒。第 10-14 次：15 秒。 15 次+：5 秒，但这并不重要。此外，对于内容，绝对定位是因为我有一个背景图像，我需要正确定位所有内容。对于“关闭”按钮和计时器，我只是希望它们位于特定位置。
  • 花括号和圆括号不平衡。无法通过该状态下的代码了解您的全部意图。
  • 你的问题很简单，使用cookie或本地存储保存计数器，每次打开modal时更新。但是如果你能让你的 jsfiddle 工作，我可以看看

标签： javascript jquery html css popup


【解决方案1】：

您可以使用localStorage（不会过期）、sessionStorage（持续到会话）或 cookie（持续到您设置的到期日期或用户删除它们）。 localStorage 和 sessionStorage 可能在某些旧版浏览器中不受支持。

如果可用，这里是使用sessionStorage 的代码。如果它不可用，它会回退到使用 cookie。如果您想使用localStorage，只需将sessionStorage 替换为localStorage。

将您的var counter = 60; 替换为以下代码：

// initialization
var counter = 60;
var timesVisited = 1;
var cookieExpirationDays = 5000;    // don't expire cookies for 5000 days
// test to see if localstorage/sessionStorage is available (localStorage has no expiration date)
if (typeof(Storage) !== "undefined") {
    counter = 60;
    timesVisited = sessionStorage.getItem("timesVisited");
    // first time
    if ((timesVisited == null) || (timesVisited < 1)){
        timesVisited = 1;
        sessionStorage.setItem("timesVisited", timesVisited);
        counter = 60;                            
    }
    // second time
    else if ((timesVisited >= 1) && (timesVisited <= 3)){
        timesVisited++;
        sessionStorage.setItem("timesVisited", timesVisited);
        counter = 45;
    }
    // third time
    else if (timesVisited >= 4){
        timesVisited++;
        sessionStorage.setItem("timesVisited", timesVisited);
        counter = 30;
    }
} 
// No localstorage/sessionStorage. Use cookies 
else {
    timesVisited = getCookie("timesVisited");
    console.log(timesVisited);
    // first time
    if ((timesVisited == "") || (timesVisited < 1)){
        timesVisited = 1;
        setCookie("timesVisited", timesVisited, cookieExpirationDays);
        counter = 60;                            
    }
    // second time
    else if ((timesVisited >= 1) && (timesVisited <= 3)){
        timesVisited++;
        setCookie("timesVisited", timesVisited, cookieExpirationDays);
        counter = 45;
    }
    // third time
    else if (timesVisited >= 4){
        timesVisited++;
        setCookie("timesVisited", timesVisited, cookieExpirationDays);
        counter = 30;
    }   
}

【讨论】：

  • 如果我将 timesVisited 变量更改为 0 它仍然可以正常工作吗？要获得相同的结果，您只需将1 添加到if/else 语句中的所有内容，对吗？
  • @ChippeRockTheMurph 是的。初始化就在那里，这样你就有了一些东西，以防没有 localStorage/sessionStorage 或 cookie。
  • 知道了。谢谢！
猜你喜欢
  • 2021-08-03
  • 2020-03-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode