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>

我使用this代码作为基础继续。但无论我如何玩它，它都不会从阵列中给我一个随机图像。此外，div ID＆＃34; mowords＆＃34;和＆＃34; NOTICEME＆＃34;是我用于CSS原因的ID，与此代码无关。

编辑：

可能选择随机是错误的方法。有没有办法让link = new linkArray选择日期（如1 - 31）和image = new ImageArray选择日期（如1 - 7），就像它目前正在做的那样？从长远来看，它会产生差异和随机性的假象。

Answer 1

如果你知道你的阵列＆＃39;索引，它们是整数，然后你可以使用以下来获得min和max之间的伪随机整数：

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

然而，现在，你的方法一直在给你一定的“一致性”＃34;在你的结果中，即每周的每一天都会在每个页面节目中给你一个特定的图像。如果您希望在其中实现随机性，您将无法获得如此一致的结果，这意味着在每个页面显示中，图像将随机独立于星期几或时间。

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

使用服务器端脚本语言定义图像（随机或不随机）并将＆＃34;每日＆＃34; / 12小时首选项保存到.json / .js文件中，然后可以通过浏览器中运行的JavaScript读取。通过这种方法，您可能会设置＆＃34;刷新＆＃34;通过在.js文件上添加Expires标头来处理解析服务器端脚本创建的配置文件的速率 - ＆gt; 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>

Answer 2

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

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

Answer 3

嗯，这是我的第一个答案！

JavaScript是客户端代码，因此如果JavaScript代码确定随机数（而不是服务器端代码），则无法保证访问该网站的每个人都看到同样的事情。

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

shmflag

小提琴：https://jsfiddle.net/tapjzg94/

该代码用0到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; }之间的整数替换按钮的文本，对于点击它的每个人都应该是相同的，避免使用UTC版本的Date函数的时区问题。

您可以根据需要混合和匹配日期功能，只要它们是快速更改的所有数字（年/月/日/天与分钟/秒/毫秒）。

每隔X小时显示两张图片，Javascript

3 个答案: