Disable a link on Friday at 4PM and enable on Sund

问题:

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

回答1:

here's a working version 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();

});

回答2:

Instead of removing the anchor tags () just disable it using code like this:

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

with HTML like this:

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

回答3:

first of all, I have to say, this sounds more like a job for server side.

something like (pseudo code)

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

but if JS solution is required, you can do the following the jquery. Create 2 divs. lets call one "with link" and the other "without link". Check if the time is before or after, and then invoke "hide" on the one you don't want to display. it will look something like

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

let me know if there's something I should add/modify.

回答4:

something like:

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

回答5:

A javascript solution that moves the image out of the link and removes the link, when the date is within the specified range:

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

Put this into a jQuery-DOM-Ready-Loader. Here's the jsfiddle.

As @Origin pointed out, this does not prevent the user from accessing the linked url, it only hides the link in javascript-enabled browsers.

回答6:

The problem with JavaScript will be that it will be disabled/removed between those times on the client machine and not on your machine. SO say if you want to disable the link in that period in your time (say US) it will not be disabled at the same time in say Europe.

So the best way to do this is to disable the link from server side.

Alternate way to do in JavaScript can be to get the server time or time from some standard location, which will not change according to user's location and depending on that enable or disable the link. I found this code to get the time.

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

Now you can use this code to show/hide the link by creating 2 divs/spans and displaying one based on your time.

Update:
Here is an working example of the method I just mentioned. http://jsfiddle.net/pkDNX/

You will have to adjust the code to your timezone and the if conditions.

Update: Here is the working example for your requirements. http://jsfiddle.net/pkDNX/1/