跟踪按钮被点击的次数

Question

我有一个弹出窗口，当页面加载时自动加载，它在关闭按钮上也有一个计时器，它的时间根据用户查看弹出窗口的次数而变化。它还有一个“打印”按钮，如果按“g”键，可以调用弹出窗口。

我的重点是“打印”按钮。目前，当我点击“打印”按钮时，它会添加以下代码：

$("#timer").remove();
clearInterval(setMsg);

但是，如果您要重新加载页面，计时器会重新出现，就像根本没有点击按钮一样，它可能是5，15，30，{ {1}}或45秒，具体取决于您之前查看过该网页的次数。我希望在单击“打印”按钮后永久删除计时器。

请注意，计时器似乎无法在代码段或fiddle中使用，因为我认为有些功能无法正常工作，例如60。但是，当我创建HTML文件时，它将在我的浏览器中工作。我的代码如下：

document.write

$(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);
  });
});

// initialization
var counter = 60;
var timesVisited = 0;
var cookieExpirationDays = 7; // don't expire cookies for a week
// test to see if localstorage/sessionStorage is available (localStorage has no expiration date)

if (typeof(Storage) !== "undefined") {
  counter = 60;
  timesVisited = localStorage.getItem("timesVisited");
  // first time
  if ((timesVisited == 0) || (timesVisited < 1)) {
    timesVisited = 1;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 60;
  }
  // second time
  else if ((timesVisited >= 1) && (timesVisited <= 3)) {
    timesVisited++;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 45;
  }
  // third time
  else if ((timesVisited >= 4) && (timesVisited <= 8)) {
    timesVisited++;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 30;
  }
  // fourth time
  else if ((timesVisited >= 9) && (timesVisited <= 13)) {
    timesVisited++;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 15;
  }
  // fifth time
  else if (timesVisited >= 14) {
    timesVisited++;
    localStorage.setItem("timesVisited", timesVisited);
    counter = 5;
  }
}
// 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 <= 8)) {
    timesVisited++;
    setCookie("timesVisited", timesVisited, cookieExpirationDays);
    counter = 30;
  }
  // fourth time
  else if ((timesVisited >= 9) && (timesVisited <= 13)) {
    timesVisited++;
    setCookie("timesVisited", timesVisited, cookieExpirationDays);
    counter = 15;
  }
  // fifth time
  else if (timesVisited >= 14) {
    timesVisited++;
    setCookie("timesVisited", timesVisited, cookieExpirationDays);
    counter = 5;
  }
}
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);
});

        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.
        $( ".close" ).click(function() {
          $('#PopUp').css("visibility", "hidden"); 
          $('#PopUp').css("opacity", 0);
        });
        $("#timer").remove();
 	       clearInterval(setMsg);s
        }

.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;
}

Answer 1

  

我有一个弹出窗口，可以在加载页面时自动加载

我非常不喜欢这个，但回到了原点。你想要做的是存储＆＃34;某处＆＃34;单击该按钮，因为单击此按钮仅对前端用户有影响，我相信将其存储在服务器端是没有用的，我会将其保留在Web浏览器中。

有几个选项可以在浏览器中存储临时信息，例如Cookie，但session storage简单而现代，这段代码会检查是否已设置变量：

if (localStorage.getItem("btn_clicked") !== null) {
    // Show the pop-up
}