如果日期尚未到达，则禁用链接

Question

我正在尝试创建一个带有某些功能的小日历。我有它的反应，翻转悬停和打开一个小的模式框点击。我唯一挣扎的事情(不是其余的没有)是让每个盒子只在实际的日期(或之前的日期)处于活动状态；也就是说，头五天将能够在12月5日打开。

这有可能是我建造它的方式吗？

以下是目前为止的代码：

​

/*
var now = new Date();
    var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var idate1 = new Date('10/29/2017');
var idate2 = new Date('10/30/2017');

if(today.getTime() == idate1.getTime()) {
document.getElementById("i1").innerHTML = 'Yesterday';
}
if(today.getTime() == idate2.getTime()) {
document.getElementById("i2").innerHTML = 'Today';
}
*/

var now = new Date();
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var idate1 = new Date('10/29/2017');
var idate2 = new Date('10/30/2017');
var idate3 = new Date('10/31/2017');


if (today.getTime() == idate1.getTime()) {
  //alert('It's the 29th');
  document.getElementById("1stDayActive").disabled = true;
}
if (today.getTime() == idate2.getTime()) {
  alert('It'
    s the 30 th ');
    document.getElementById("2ndDayActive").disabled = true;
  }
  if (today.getTime() == idate3.getTime()) {
    //alert('It's the 31st');
    document.getElementById("3rdDayActive").disabled = true;
  }

ul li {
  display: inline-block;
  margin: 0 10px
}

.demo-3 {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  float: left;
  margin-right: 20px
}

.demo-3 figure {
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  margin-left: -50px
}

.demo-3 figure img {
  display: block;
  position: relative;
  z-index: 10;
  margin: -15px 0
}

.demo-3 figure figcaption {
  display: block;
  position: absolute;
  z-index: 5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.demo-3 figure h2 {
  font-family: 'Lato';
  color: #fff;
  font-size: 20px;
  text-align: left
}

.demo-3 figure p {
  display: block;
  font-family: 'Lato';
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  color: #fff;
  text-align: left
}

.demo-3 figure figcaption {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 29px 44px;
  background-color: rgba(26, 76, 110, 0.5);
  text-align: center;
  backface-visibility: hidden;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s
}

.demo-3 figure img {
  backface-visibility: hidden;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s
}

.demo-3 figure:hover img,
figure.hover img {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg)
}

.demo-3 figure:hover figcaption,
figure.hover figcaption {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  transform: rotateY(0)
}

a {
  display: block
}


/* MODAL BOX*/

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover {
  background: #00d9ff;
}

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Raleway:400,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<ul>
  <li>
    <ul class="demo-3">
      <li>
        <figure>
          <a href="#1stDay"><img src="images/1.jpg" alt="" / id="1stDayActive">
            <figcaption>
              <h2>The 1st Day of Christmas</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
          </a>
        </figure>
      </li>
    </ul>
    <div id="1stDay" class="modalDialog">
      <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>The 1st Day of Christmas</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        <p><img src="images/4.jpg" alt="" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
      </div>
    </div>
  </li>
  <li>
    <ul class="demo-3">
      <li>
        <figure>
          <a href="#2ndDay"><img src="images/2.jpg" alt="" / id="2ndDayActive">
            <figcaption>
              <h2>The 2nd Day of Christmas</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
          </a>
        </figure>
      </li>
    </ul>
    <div id="2ndDay" class="modalDialog">
      <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>The 2nd Day of Christmas</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        <p><img src="images/5.jpg" alt="" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
      </div>
    </div>
  </li>
  <li>
    <ul class="demo-3">
      <li>
        <figure>
          <a href="#3rdDay"><img src="images/3.jpg" alt="" / id="3rdDayActive">
            <figcaption>
              <h2>The 3rd Day of Christmas</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
          </a>
        </figure>
      </li>
    </ul>
    <div id="3rdDay" class="modalDialog">
      <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>The 3rd Day of Christmas</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
        <p><img src="images/6.jpg" alt="" /></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
      </div>
    </div>
  </li>
</ul>

​

Answer 1

您不能以这种方式禁用链接。您应该停止单击事件触发：

if (today.getTime() == idate2.getTime()) {
    alert('It\'s the 30 th ');
    document.getElementById("2ndDayActive").addEventListener('click', function (e) {
         e.preventDefault();
    });
}

或者您可以使用pointer-events: none;：

a.disabled {
     pointer-events: none;
}

在你的js中：

if (today.getTime() == idate2.getTime()) {
    var elem = document.getElementById("2ndDayActive");
    elem.className += " disabled";
}

但在此之前，您必须告诉浏览器在加载页面后运行javascript代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Advent Calendar</title>

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Raleway:400,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<style>
    ...
</style>
</head>
<body>

    ...

    <script type="text/javascript">
         (function () {
              // place your js code here
         })();
    </script>
</body>

​

注意js代码的位置。