在网站上显示带有链接的随机图像答案

【问题标题】：Display random image with link on website在网站上显示带有链接的随机图像
【发布时间】：2014-03-04 16:46:42
【问题描述】：

我有一个网站，人们可以在其中下载 pdf 文档。为了使网站更具吸引力，我现在想显示随机报告第一页的屏幕截图，如果用户单击它，请打开从中截取屏幕截图的相应 pdf 文件。

现在，我正在使用以下 javascript 代码来实现此目的：

<script type="text/javascript">
var total_images = 3;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<a href="documents/report1.pdf"><img src="images/report1.jpg"><\/a>';
random_img[1] = '<a href="documents/report2.pdf"><img src="images/report2.jpg"><\/a>';
random_img[2] = '<a href="documents/report3.pdf"><img src="images/report3.jpg"><\/a>';
document.write(random_img[random_number]);
--></script>

这工作没有任何问题。但是，一直在添加新的 pdf 文档，每次编辑代码都是一种痛苦。我读过可能可以使用 php 填充 javascript 数组。不幸的是，在这方面我完全是个菜鸟，我不确定我将如何去做，并且仍然有指向正确报告的屏幕截图链接。

有什么想法可以实现吗？

非常感谢！

【问题讨论】：

标签： javascript php image random hyperlink

【解决方案1】：

您可以直接将 php 注入 javascript。我的意思是，php 将首先在服务器上执行，将修改后的 javascript 提供给客户端，客户端将不知道一开始就存在 php。

假设你有一个 php 报表数组并且命名约定类似：

<script type="text/javascript">
    var total_images = 3;
    var random_number = Math.floor((Math.random()*total_images));
    var random_img = [
                      <?php
                          foreach ($reports as $report) {
                              echo "'<a href="documents/$report.pdf"><img src="images/$report.jpg"><\/a>', ";
                          }
                      ?>
                     ];
    document.write(random_img[random_number]);
</script>

编辑：更多解释

这将在 javascript 中创建一个数组，如下所示：

['<a href="documents/report1.pdf"><img src="images/report1.jpg"><\/a>',
 '<a href="documents/report2.pdf"><img src="images/report2.jpg"><\/a>',
];

【讨论】：