javascript - 每 X 小时显示两个图像,Javascript

标签 javascript html image random display

下面是我每天运行的代码,用于显示一对图像。我无法让它随机显示图像,而是每天它都会选择数组中的下一个图像(不是随机的)。 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 中),就像它当前所做的那样?从长远来看,它会产生方差和随机性的错觉。

最佳答案

如果您知道数组的索引,并且它们是整数,那么您可以使用以下命令获取 minmax 之间的伪随机整数:

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

但是现在,您的方法已经使您的结果具有一定的“一致性”,即一周中的每一天都会在每个页面上显示特定的图像。 如果您希望在其中实现随机性,则不会获得如此一致的结果,这意味着在显示的每个页面上,图像将是随机的,与星期几或一天中的时间无关。

要解决此问题,您可以采取多种方法:

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

关于javascript - 每 X 小时显示两个图像,Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38751959/

相关文章:

javascript - 根据另一个下拉菜单的选择重新填充下拉菜单

javascript - 在 javascript 中处理 PHP 脚本

javascript - Node.js 中未定义 io

javascript - 为什么 setTimeout(myFunction, 0) 有效,但运行函数本身却不起作用?

iOS - 检测到附件 URL,但未针对不同项目显示

html - 如何访问或调用 "Send this form to others"?

javascript - Vue2 : view-router exception when trying to use <router-view>

python - 动态改变 HTML 源代码

image - 如何知道图像类型

image - DELPHI的tImage.picture.loadFromFile的文件名是否存储在某个地方?