每 X 小时显示两张图像，Javascript

Question

下面是我运行每天显示一对图片的代码。我无法让它随机显示图像，而是每天 select 显示数组中的下一张图像（不是随机的）。 Javascript 不是我的专长，而且我每天都未能成功地在两个阵列中制作 select 一个新的随机图像。

我也没有成功地让 select 每 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 select 成为日期（如 1 - 31）和 image = new ImageArray select 日期（如1 - 7) 喜欢它目前正在做什么？它将在长运行.

中产生方差和随机性错觉

Answer 1

您在 currentDate 上使用函数 getDay()，因此它不会在一天内发生变化。查看 http://www.w3schools.com/jsref/jsref_getday.asp，您会注意到它是一个从 0 到 6 的整数，一周从星期日开始。

因此今天（8 月 3 日星期三是 3）你应该看到图像 [3] 和 link[3]。明天你应该得到一个错误，因为你将在图像数组之外引用，即 image[4] 将抛出 index out of bounds 异常。

Answer 2

如果您知道数组的索引，并且它们是整数，那么您可以使用以下命令获取 min 和 max 之间的 pseudo-random 整数：

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

然而，现在，您的方法已经在您的结果中给了您一定的 "consistency"，即一周中的每一天在每个页面显示上给您一个特定的图像。如果你想在其中实现随机性，你将不会得到如此一致的结果，这意味着在每个页面显示上，图像将是随机的，与星期几或一天中的时间无关。

要解决此问题，您可以采取以下几种方法：

使用 server-side 脚本语言定义图像（随机或非随机）并将 "daily"/12 小时首选项保存到 .json/.js 文件中，然后可以通过浏览器中的 JavaScript 运行读取。使用这种方法，您可能会通过在 .js 文件上添加 Expires headers 来设置 "refresh" 速率，该文件处理由 server-side 脚本创建的配置文件的解析 -> https://gtmetrix.com/add-expires-headers.html
另一种方法是根据当前date/time重新定义您的图像选择逻辑。然而，这样做的明显缺点是您依赖于用户计算机的日期和时间，这并不总是可信的，因此您必须解决这个问题。

我建议研究 server-side 脚本解决方案 - 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>

Answer 3

好吧，这是我的第一个答案！

JavaScript 是客户端代码，所以如果 JavaScript 代码是确定随机数的代码（而不是服务器端代码），则不能保证每个人都访问该站点看到同样的东西。

但是，您可以使用日期和时间作为种子来生成随机出现的内容：

var btn = document.getElementById('btn');

btn.onclick = function () {
  var d = new Date();
  // getHours() results in an integer 0-23  
  var h = d.getUTCHours();  
  var chooser;

  //Pick a multiplier based on the time of day.
  if (h < 12) {
    chooser = 1.15;
  } else {
    chooser = 1.87;
  } 

  //Change upperLimit to whatever the upper limit of your array may end up being.
  var upperLimit = 10;

  //Generate the result
  var pseudoRand = parseInt((d.getUTCFullYear() + d.getUTCMonth() + d.getUTCDay()) * chooser % upperLimit);

  btn.textContent = pseudoRand;
}

Fiddle: https://jsfiddle.net/tapjzg94/

该代码将按钮的文本替换为 0 到 upperLimit 之间的整数，每个点击它的人都应该相同，从而避免了 Date 函数的 UTC 版本的时区问题。

您可以随意混合和匹配日期函数，只要它们都是不会快速变化的数字（year/month/date/day 与 minutes/seconds/milliseconds）。

每 X 小时显示两张图像，Javascript

Display two images every X hours, Javascript

html

javascript

random

image

display