下面是我每天运行的代码,用于显示一对图像。我无法让它随机显示图像,而是每天它都会选择数组中的下一个图像(不是随机的)。 JavaScript 不是我的专长,我没能成功地让它每天在两个数组中选择一个新的随机图像。
我也未能成功地让它每 12 小时而不是每天选择一次,而我希望它这样做。如果可能的话,它必须为该时段内查看它的每个人显示相同的内容,直到计时器重置。
<script type="text/javascript"><!--
var imlocation = "https://s31.postimg.org/";
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
function linkArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(4);
image[0] = 'v85buoebv/Day2.png';
image[1] = 'djdl322kr/Evening2.png';
image[2] = 'arubcg423/Night2.png';
image[3] = 'xf9kiljm3/Morning2.png';
link = new linkArray(11);
link[0] = 'q4xda5xdn/CLOUDY.png';
link[1] = '7141ttkjf/Heavyrain.png';
link[2] = 'gzp0gatyz/lightrain.png';
link[3] = 'xc3njrxob/Medium_Rain.png';
link[4] = 'x0m770h8b/NO_WEATHER.png';
link[5] = 's38mlwf97/omgrain.png';
link[6] = 'btigj04l7/Special_Weather.png';
link[7] = 'b59m025vf/WEREALLGONNADIErain.png';
link[8] = 'ubmt38md7/Windy.png';
link[9] = 'x0m770h8b/NO_WEATHER.png';
link[10] = 'x0m770h8b/NO_WEATHER.png';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<div id="NOTICEME"><center><img src="' + imlocation + image[imagenumber] + '"><img src="' + imlocation + link[imagenumber] + '"></center><br><div id="mowords">[center][img]' + imlocation + image[imagenumber] + '[/img][img]' + imlocation + link[imagenumber] + '[/img][/center]</div></div>');
//--></script>
我用了this代码作为继续的基础。但无论我如何使用它,它都不会从数组中为我提供随机图像。另外,div ID“mowords”和“NOTICEME”是我出于 CSS 原因使用的 ID,与此代码无关。
编辑:
也许随机是错误的方法。有没有办法让 link = new linkArray 选择日期(如 1 - 31 中),而 image = new ImageArray 选择日期(如 1 - 7 中),就像它当前所做的那样?从长远来看,它会产生方差和随机性的错觉。
最佳答案
如果您知道数组的索引,并且它们是整数,那么您可以使用以下命令获取 min
和 max
之间的伪随机整数:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
但是现在,您的方法已经使您的结果具有一定的“一致性”,即一周中的每一天都会在每个页面上显示特定的图像。 如果您希望在其中实现随机性,则不会获得如此一致的结果,这意味着在显示的每个页面上,图像将是随机的,与星期几或一天中的时间无关。
要解决此问题,您可以采取多种方法:
- 使用服务器端脚本语言定义图像(随机或非随机)并将“每日”/12 小时首选项保存到
.json
/.js
文件,然后浏览器中运行的 JavaScript 可以读取该文件。使用这种方法,您可能会通过在.js
文件上添加 Expires header 来设置“刷新”率,该文件处理服务器端脚本创建的配置文件的解析 -> https://gtmetrix.com/add-expires-headers.html - 另一种方法是根据当前日期/时间重新定义图像选择逻辑。然而,明显的缺点是您依赖于用户计算机的日期和时间,而这些日期和时间并不总是可信的,因此您必须解决这个问题。
我建议研究服务器端脚本解决方案 - PHP/Perl 可以很好地实现此目的。
更新: 还没有测试过,但尝试一下(根据您的评论):
<script type="text/javascript"><!--
var imlocation = "https://s31.postimg.org/";
function ImageArray (n) {
this.length = n;
for (var i = 0; i <= n; i++) {
this[i] = ''
}
}
function linkArray (n) {
this.length = n;
for (var i = 0; i <= n; i++) {
this[i] = ''
}
}
image = new ImageArray(6);
image[0] = 'v85buoebv/Day2.png';
image[1] = 'djdl322kr/Evening2.png';
image[2] = 'arubcg423/Night2.png';
image[3] = 'xf9kiljm3/Morning2.png';
image[4] = '';
image[5] = '';
image[6] = '';
link = new linkArray(30);
link[0] = 'q4xda5xdn/CLOUDY.png';
link[1] = '7141ttkjf/Heavyrain.png';
link[2] = 'gzp0gatyz/lightrain.png';
link[3] = 'xc3njrxob/Medium_Rain.png';
link[4] = 'x0m770h8b/NO_WEATHER.png';
link[5] = 's38mlwf97/omgrain.png';
link[6] = 'btigj04l7/Special_Weather.png';
link[7] = 'b59m025vf/WEREALLGONNADIErain.png';
link[8] = 'ubmt38md7/Windy.png';
link[9] = 'x0m770h8b/NO_WEATHER.png';
link[10] = 'x0m770h8b/NO_WEATHER.png';
link[11] = '';
link[12] = '';
link[13] = '';
link[14] = '';
link[15] = '';
link[16] = '';
link[17] = '';
link[18] = '';
link[19] = '';
link[20] = '';
link[21] = '';
link[22] = '';
link[23] = '';
link[24] = '';
link[25] = '';
link[26] = '';
link[27] = '';
link[28] = '';
link[29] = '';
link[30] = '';
var currentdate = new Date();
var dM = currentdate.getDate() - 1;
var dW = currentdate.getDay();
//var imagenumber = currentdate.getDay();
document.write('<div id="NOTICEME"><center><img src="' + imlocation + image[dW] + '"><img src="' + imlocation + link[dM] + '"></center><br><div id="mowords">[center][img]' + imlocation + image[dW] + '[/img][img]' + imlocation + link[dM] + '[/img][/center]</div></div>');
//--></script>
关于javascript - 每 X 小时显示两个图像,Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38751959/