【发布时间】：2017-08-19 01:03:52
【问题描述】：
我正在开发一个名为 BitDay 的开源项目，该项目是我不久前在 Reddit 上开始的。
我有 12 个元素作为 CSS 类，每个元素都有自己的背景图片。
现在，我的 jQuery 获取时间，并根据一天中的时间对类名应用扩展，因此每 2 小时背景会改变一次
$(function() {
$('.clock').hide();
$('.music').hide();
//Cache these for performance
$h1 = $('h1');
$h3 = $('h3');
$body = $('body');
//Sets the font size based on scale
var setScale = function(elem, scaleFactor) {
var scaleSource = $body.width(),
maxScale = 500,
minScale = 100; //Tweak these values to taste
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale;
elem.css('font-size', fontSize + '%');
}
//Resize fonts
setScale($h1, .2);
setScale($h3, .10);
//Resize font based on windows size
$(window).resize(function() {
setScale($h1, .2);
setScale($h3, .10);
});
//Check visited cookie
var visited = $.cookie("visited")
if (visited == null) {
//Fade our title page into the real wallpaper.
setTimeout(function() {
//Set the background
var d = new Date();
var hour = d.getHours();
var cssClass = getPicture(hour);
//Made our waiting div the active div
$('.bg-tobe').removeClass('bg-tobe').addClass('bg-' + cssClass);
//Fade out the active and put it in a waiting state
$('.bg-splash').fadeOut(function() {
$('.bg-splash').removeClass('bg-splash').addClass('bg-tobe');
});
//Fade in the new bg and clock. Fade out the title
$('.bg-' + cssClass).fadeIn();
$('.title').fadeOut();
updateClock();
$('.clock').fadeIn();
$('.music').fadeIn();
}, 0);
} else {
//Set the background
var d = new Date();
var hour = d.getHours();
var cssClass = getPicture(hour);
//Made our waiting div the active div
$('.bg-tobe').removeClass('bg-tobe').addClass('bg-' + cssClass);
$('.bg-splash').removeClass('bg-splash').addClass('bg-tobe');
//Fade in bg and fade out title
$('.bg-' + cssClass).fadeIn('1000');
$('.title').fadeOut('slow');
//Set up clock and music
updateClock();
$('.clock').fadeIn('slow');
$('.music').fadeIn('slow');
}
// set cookie
$.cookie('visited', 'yes', {
expires: 30,
path: '/'
});
//Start updating the clock
setInterval('updateClock()', 1000);
});
//Determines the picture to use based on the hour
function getPicture(hour) {
if (hour >= 23 || hour <= 2)
return 11;
else if (hour >= 22)
return 10;
else if (hour >= 21)
return 9;
else if (hour >= 19)
return 8;
else if (hour >= 16)
return 7;
else if (hour >= 15)
return 6;
else if (hour >= 13)
return 5;
else if (hour >= 12)
return 4;
else if (hour >= 10)
return 3;
else if (hour >= 7)
return 2;
else if (hour >= 5)
return 1;
else
return 0;
};
function updateClock() {
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var ampm = hours < 12 ? "AM" : "PM";
//Formatting
mins = ((mins < 10) ? "0" : "") + mins;
hours = (hours > 12) ? hours - 12 : hours;
hours = (hours == 0) ? 12 : hours;
hours = ((hours < 10) ? "0" : "") + hours;
var str = hours + ":" + mins + " " + ampm;
//Set the new time
var $clock = $('.clock h3');
var oldStr = $clock.text();
$clock.text(str);
//Check if the hour has changed
var oldHour = getMilitaryHour(oldStr);
if (oldStr.length == 0) return;
var currHour = d.getHours();
if (currHour != oldHour) {
//Change bgs
var cssClass = getPicture(currHour);
var oldClass = getPicture(oldHour);
if (cssClass != oldClass) {
//Make our waiting div the active div
$('.bg-tobe').removeClass('bg-tobe').addClass('bg-' + cssClass);
//Fade in the new bg
$('.bg-' + cssClass).fadeIn('5000');
//Fade out the active and put it in a waiting state
$('.bg-' + oldClass).fadeOut(function() {
$('.bg-' + oldClass).removeClass('bg-' + oldClass).addClass('bg-tobe');
});
}
}
};
//Returns the military hour from a string formatted in standard time.
function getMilitaryHour(str) {
var hour = parseInt(str.substring(0, 2));
var ampm = str.substring(str.length - 2);
if (ampm == 'PM' && hour != 12)
return hour + 12;
else if (ampm == 'AM' && hour == 12)
return 0;
else
return hour;
}#container {
height: 100vh;
position: relative;
}
.bg {
width: 100vw;
height: 100vh;
position: absolute;
z-index: 99;
opacity: 0.7;
}
/* Change the background! */
.bg-0 {
background-image: url("http://i.imgur.com/qexylYA.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-1 {
background-image: url("http://i.imgur.com/cRvIYLJ.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-2 {
background-image: url("http://i.imgur.com/UusvZC8.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-3 {
background-image: url("http://i.imgur.com/URjIjZS.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-4 {
background-image: url("http://i.imgur.com/Fy7kANa.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-5 {
background-image: url("http://i.imgur.com/e2lvJ8q.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-6 {
background-image: url("http://i.imgur.com/JEslGSe.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-7 {
background-image: url("http://i.imgur.com/v2h0qzb.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-8 {
background-image: url("http://i.imgur.com/xyfqUsX.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-9 {
background-image: url("http://i.imgur.com/XbIlhvL.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-10 {
background-image: url("http://i.imgur.com/xDAIc6P.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
.bg-11 {
background-image: url("http://i.imgur.com/kaCxCBi.png");
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0; }
<div id="container">
<div class="bg-splash"></div>
<div class="bg-tobe" style="display: none;"></div>
</div>
但是，我希望图像在 2 小时内逐渐淡入另一个，而不是检查小时并立即更改。
比如说在早上 7 点，bg-1 以 100% 的不透明度应用。从这里，它实时淡入 bg-2。早上 8 点，bg-1 的不透明度为 50%，上午 8:30 的不透明度为 25%，以此类推。与此同时，bg-2 将慢慢变得越来越明显。然后在上午 9 点，bg-1 的不透明度为 0%，bg-2 的不透明度为 100%，接下来的 10 张图像继续如此。它应该会创建一个不错的渐变效果。
不过，这里是关键 - 由于这将成为数千名用户的开始屏幕，我们希望它在任何给定时间记住转换量，因此如果用户在上午 8:30 登录，它将显示不透明度为 25% 的 bg-1，混合到 bg-2 中。
这个真的是我的脑筋急转弯，有人能帮忙吗？
【问题讨论】：
-
能否请您清理一下JS代码？ sn-p 抛出错误。
-
@sdvnksv - 复制到 JS 文件中。包括一些显示时间的功能。在github上弄项目可能更容易？
-
在下面添加了一个工作示例。希望你喜欢它:-)！
-
我看到你在我回答问题时更新了你的问题（我花了大约 30 分钟来制作一个工作示例......）。您刚刚添加的“踢球者”未在我的解决方案中实现。但是，我确实希望您能欣赏我投入的时间...
-
@LaurensSwart 可以把你放到演职员表屏幕上吗？此外，如果您确实有更多时间，我将非常感谢您对时间“记住”元素的意见。 :)