Fadein at certain hour or time
I wo开发者_运维知识库nder if this is possible? For a website concept I want to make something pop out or fade in at a certain hour according to the user's computer time. I have tried looking with no avail because I don't know what kind of function would control when an effect takes place.
Any ideas? Thank you.
If you know at what time to fadeIn (ahem) in, then simply calculate the delta between that time (that's supposedly in the future) and our time. Example:
var dateNow = new Date();
setTimeout(function() {
doFadingInStuff();
}, dateWanted - dateNow);
If you get the current time and calculate the future time that you want the event to happen (thus you have an amount of elapsed time until your event should happen), you can use the setTimeout() function to schedule a function call at a precise time in the future. From that function, you would do your animation.
Check out this fiddle
Your JS
var now = new Date().toString();
$('#fadeMe').html(now).fadeIn(9000)
Assuming you only want something to be visible during a certain hour (ie. fade in when it becomes that hour, fade out when it's no longer that hour), you could do this:
// element is assumed to be a jQuery object
var VISIBLE_HOUR=14; // 2:00 PM
function check() {
var isHour=(new Date()).getUTCHours()==VISIBLE_HOUR;
var isVisible=element.is(":visible");
if(isHour!=isVisible) {
element.fadeToggle(1000);
}
}
// We probably don't want to check very frequently...
// You could make it more advanced by checking
// more frequently closer to the hour in which it would be visible.
setInterval(check, 30000);
var eventHour = 16, // 4:00pm
// get the current time as a Date
now = new Date(),
// turn your event time into a Date
eventDate = new Date(now.getFullYear(),
now.getMonth(),
now.getDate(),
eventHour),
// calculate how many MS until your event
eventTimeMS = eventDate - now;
dayInMS = 86400000,
// your event
myEvent = function() {
alert('The time is now!');
};
// adding 24 hours if already past event time today
eventTimeMS = eventTimeMS < 0 ? eventTimeMS + dayInMS : eventTimeMS;
// if currently the right hour, just invoke event
if (eventHour == now.getHours()) {
myEvent();
// otherwise start a timer to invoke your event at the appropriate time
} else {
setTimeout(myEvent, eventTimeMS);
}
I think you want to check the time of day for the client, then fade in or out. This would be done like so:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var sunriseHour = 1;
var sunsetHour = 19;
function checkForChange() {
var nowDate = new Date();
var nowHour = nowDate.getHours();
if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
if (sunPosition != 'up') {
sunPosition = 'up';
$('#theSun').fadeIn('slow');
}
} else {
if (sunPosition != 'down') {
sunPosition = 'down';
$('#theSun').fadeOut('slow');
}
}
}
var nowDate = new Date();
var nowHour = nowDate.getHours();
if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
$('#theSun').show();
sunPosition = 'up';
} else {
$('#theSun').hide();
sunPosition = 'down';
}
setTimeout(checkForChange, 1000);
});
</script>
</head>
<body>
<div id="theSun" style="background: yellow; width: 300px; height: 300px; display: none;">
This box is the sun
</div>
</body>
</html>
加载中,请稍侯......
精彩评论