如果尚未达到日期,请禁用链接

时间:2017-10-30 12:34:35

标签: javascript html css

我正在尝试创建一个具有某些功能的小型降临日历。我已经有了响应,翻转悬停并在点击时打开一个小模态框。我唯一要努力的事情(不是其余部分不是)是为了让每个盒子只在实际日期(或之前的日期)上活动;即前五天将于12月5日开放。

这可能是我构建它的方式吗?

到目前为止,这是代码:

const Poco::AutoPtr<AbstractConfiguration> view = cfg.createView("live_time");
/home/evgen/projects/AuthService/Core/Module/src/LiveTimeConfig.cpp:27: error: invalid conversion from ‘const Poco::Util::AbstractConfiguration*’ to ‘Poco::Util::AbstractConfiguration*’ [-fpermissive]
 const Poco::AutoPtr<AbstractConfiguration> view = cfg.createView("live_time");
                                                                             ^
/*
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;
  }

1 个答案:

答案 0 :(得分: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代码的位置。