0

I'm trying to use a bit of JavaScript to get the date and time and then use some jQuery to enable/disable a link.

So I have something like this,

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

And between Friday at 4PM and Sunday at 7:00AM, I'd like to have it just say this,

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

How would I be able to do that?

P.S. I would prefer to have the link hardcoded rather than to have it propped with the JavaScript...

4

6 回答 6

1

而不是删除锚标签 () 只需使用如下代码禁用它：

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

使用这样的 HTML：

<a class="GoodTimes" href="http://www.google.com" target="_blank">test link</a>
于 2012-01-01T21:59:15.887 回答
0

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

现在，您可以使用此代码通过创建 2 个 div/span 并根据您的时间显示一个来显示/隐藏链接。

更新：
这是我刚才提到的方法的一个工作示例。http://jsfiddle.net/pkDNX/

您必须将代码调整为您的时区和 if 条件。

更新：这是满足您要求的工作示例。http://jsfiddle.net/pkDNX/1/

于 2012-01-01T22:10:49.010 回答
0

这是一个工作版本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();

});
于 2012-01-01T21:50:25.093 回答
0

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

类似（伪代码）

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

但如果需要 JS 解决方案，您可以执行以下 jquery。创建 2 个 div。让我们称一个“有链接”和另一个“没有链接”。检查时间是之前还是之后，然后在您不想显示的时间上调用“隐藏”。它看起来像

<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>

如果有什么我应该添加/修改的，请告诉我。

于 2012-01-01T21:50:49.790 回答
0

当日期在指定范围内时，将图像移出链接并删除链接的 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 中。这是 jsfiddle。

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

于 2012-01-01T21:38:47.617 回答
0

就像是：

// 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..
});
}
于 2012-01-01T21:41:22.793 回答