周五下午4点禁用链接，周日早上7点启用链接

Disable a link on Friday at 4PM and enable on Sunday 7:00AM

本文关键字：链接 7点 启用 周日 4点 周五下      更新时间：2023-09-26

我试图使用一点JavaScript来获取日期和时间，然后使用一些jQuery来启用/禁用链接。

所以我有这样的东西，

<a href="link.html" title="Link">
<img src="link.gif" alt="link" />
</a>

在周五下午4点到周日早上7点之间，我想让它这样说，

<img src="link.gif" alt="link">

我怎么能做到呢?

注:我更喜欢硬编码的链接，而不是有它支撑与JavaScript…

不需要删除锚标记()，只需使用下面的代码禁用它:

function AGoodTime() {
    var now = new Date();
    var day = now.getDay();
    var hour = now.getHours();
    var IsBadTimeOnFriday = day == 5 && hour >= 16;
    var IsBadTimeOnSaturday = day == 6;
    var IsBadTimeOnSunday = day == 7 && hour <= 7;
    return !IsBadTimeOnFriday && !IsBadTimeOnSaturday && !IsBadTimeOnSunday;
}
$('.GoodTimes').click(function(event) {
    if(!AGoodTime()) {
        event.preventDefault();
    }
});

:

<a class="GoodTimes" href="http://www.google.com" target="_blank">test link</a>

这是一个工作版本http://jsbin.com/ahitiv/9/edit#source

function ShowHide()
{
  var d = new Date();
  var dayofweek = d.getDay();
  var hourofday = d.getHours();
  if ((dayofweek === 0 && hourofday <= 7) || dayofweek === 6 || (dayofweek === 5 &&     hourofday >= 16)) 
  {
    $("#hello a").click(function(e){
    e.preventDefault();});
  }
}

$(document).ready(function(){
    ShowHide();
});

首先，我不得不说，这听起来更像是服务器端的工作。

类似于(伪代码)

if shouldDisplayLink
 echo "<a ... <img ... </a> "
else
 echo "<img ... />"

，但如果需要JS解决方案，您可以使用jquery执行以下操作。创建2个div。我们称一个为"有链接"，另一个为"无链接"。检查时间是在之前还是之后，然后对不想显示的时间调用"hide"。它看起来像

<div id="withlink">
    <a href="http://steps.mograbi.info">
       <img src="http://steps.mograbi.info/images/steps-logo.png?1321507410" alt="steps"/> 
    </a>
</div>
<div id="withoutlink">
    <img src="http://steps.mograbi.info/images/steps-logo.png?1321507410" alt="steps"/>
</div>
<script type="text/javascript">
    $(function(){
        var d = new Date();
        if (( d.getDay() == 5 && d.getHours() > 16 ) ||
            ( d.getDay() == 0 && d.getHours() < 7 ))
        {
            console.log("hiding with link");
            $("#withlink").hide(0);
        }
        console.log("hiding without link");
        $("#withoutlink").hide(0);
    })
</script>
如果有什么需要我添加/修改的，请告诉我。

类似于

// caching the time variables.
var today = new Date();
var d = today.getDay();
var h = today.getHours();
if (d == 6 || (d ==5 && h>16) || (d == 0 && h < 7)) {
   $('a').click(function(e){
   e.preventDefault(); #prevent the link from working, without hiding it..
});
}

当日期在指定范围内时，将图像移出链接并删除链接的javascript解决方案:

var d = new Date();
var doDisable = (d.getDay() == 5 && d.getHours() >= 16) || d.getDay() == 6 || (d.getDay() == 0 && d.getHours() < 7);
if (doDisable) {
  $('#link img').insertBefore('#link');
  $('#link').remove();
}

将其放入jQuery-DOM-Ready-Loader中。

正如@Origin所指出的，这并不会阻止用户访问链接的url，它只会在支持javascript的浏览器中隐藏链接。

JavaScript的问题是，它将在客户端机器上被禁用/删除，而不是在您的机器上。所以说，如果你想在你的时间(比如美国)禁用链接，它将不会同时在欧洲禁用。

所以最好的方法是从服务器端禁用链接。

在JavaScript中，另一种方法是从一些标准位置获取服务器时间或时间，这不会根据用户的位置和启用或禁用链接而改变。我找到了这个代码来获取时间。

$(document).ready(function(){
  var timezone = "Europe/Berlin";
  $.getJSON("http://json-time.appspot.com/time.json?tz="+timezone+"&callback=?",
    function(data){
      if (data.hour < 12) {
        alert ("Good morning in "+timezone);
      } else {
        alert ("Good afternoon in "+timezone);
      }
    })
});

现在你可以使用这段代码来显示/隐藏链接创建2div/span和显示一个基于你的时间。

:
下面是我刚才提到的方法的一个工作示例。http://jsfiddle.net/pkDNX/

您必须调整代码以适应您的时区和if条件。

Update:这是满足您需求的工作示例。http://jsfiddle.net/pkDNX/1/

相关文章：