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

Question

下面是我每天运行的一段代码，用于显示一对图像。我一直无法让它随机显示图像，但它每天都会选择阵列中的下一个图像（不是随机的）。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>

我用这个代码作为基础继续。但无论我怎么摆弄它，它都不会给我一个来自数组的随机图像。此外，div ID"mowords"one_answers"NOTICEME"是我出于CSS原因使用的ID，与此代码无关。

编辑：

也许随机选择是错误的做法。有没有一种方法可以让link=new linkArray选择日期（如1-31），让image=new ImageArray像现在这样选择日期（如1-7）？从长远来看，它会产生变化和随机性的幻觉。

Answer 1

如果您知道数组的索引，并且它们是整数，那么您可以使用以下方法获得min和max之间的伪随机整数：

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

然而，现在，你的方法一直在给你的结果带来一定的"一致性"，即一周中的每一天都在每个页面上给你一张特定的图片。如果你想在其中实现随机性，你就不会得到如此一致的结果，这意味着在每个页面上显示的图像都是随机的，与一周中的哪一天或一天中的某个时间无关。

要解决这个问题，可以采取几种方法：

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

我建议研究一个服务器端脚本解决方案——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 2

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

因此，今天（8月3日星期三）您应该看到图片[3]和链接[3]。明天您应该会得到一个错误，因为您将引用映像数组之外的内容，即image[4]将抛出index out of bounds异常。

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的整数，该整数对于每个单击该按钮的人都应该相同，从而避免了UTC版本的Date函数的时区问题。

您可以根据需要混合和匹配日期函数，只要它们都是不会快速变化的数字（年/月/日期/天与分钟/秒/毫秒）。