Display two images every X hours, Javascript

Question

Below is a code I am running to display a pair of images each day. I have been unable to have it display the images randomly, but instead each day it selects the next image in the Array (not at random). Javascript is not my specialty and I have been unsuccessful in making it select a new random image in both arrays each day.

I have also been unsuccessful in making it select them every 12 hours instead of each day, which is what I would prefer it to do. It must display the same ones for every person who views it for that period, until the timer resets, if possible.

<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>

I used this code as a base to go on. But no matter how I toy with it, it won't give me a random image from the array. Also, the div ID "mowords" and "NOTICEME" is an ID I am using for CSS reasons that has nothing to do with this code.

Edit:

Maybe going for random is the wrong way to do this. Is there a way to make the link = new linkArray select the date (as in 1 - 31) and the image = new ImageArray select the day (as in 1 - 7) like it is currently doing? It will create variance and the illusion of randomness in the long run.

Answer 1

If you know your arrays' indices, and they are integers, then you can use the following to get a pseudo-random integer between min and max:

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

Now, however, your approach has been giving you certain "consistency" in your results, i.e. each day of the week giving you a certain image on every page show. If you wish to implement randomness into it, you won't get such consistent results, meaning that on every page show, the image will be random independent of the day of the week or time of day.

To address this issue, you can take several approaches:

1. Have a server-side scripting language define the images (random or not) and save the "daily"/12-hour preferences into a .json/.js file, which then can be read by the JavaScript running in the browser. With this approach you would probably set the "refresh" rate via adding Expires headers on the .js file handling the parsing of the configuration file created by your server-side script -> https://gtmetrix.com/add-expires-headers.html
2. The other approach is to redefine your image selection logic based on the current date/time. However, the obvious downfall to that, is that you rely on the date and time of the user's computer, which can't always be trusted, so you have to work around that.

I would advise to look into a server-side scripting solution - PHP/Perl would do fine for this purpose.

UPDATED: Have not tested, but try this (as per your comments):

<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

Well, here goes my first answer here ever!

JavaScript is client-side code, so if the JavaScript code is what is determining the random number (rather than server-side code), you can't guarantee everyone accessing the site sees the same thing.

You could, however, use the date and time as a seed to generate what could appear random:

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/

That code replaces the text of the button with an integer from 0 to upperLimit that should be the same for everyone who clicks on it, avoiding time zone issues with the UTC versions of the Date functions.

You could mix and match the date functions however you want, so long as they are all numbers that don't change on a rapid basis (year/month/date/day vs. minutes/seconds/milliseconds).

Answer 3

You use the function getDay() on the currentDate, therefore it will not change throughout a single day. Have a look at http://www.w3schools.com/jsref/jsref_getday.asp where you notice that its an integer from 0 to 6, and the week starts on sunday.

Therefore today (wednesday august 03 is 3) you should see image[3] and link[3]. Tomorrow you should get an error because you will reference outside of the image array i.e. image[4] will throw an index out of bounds exception.