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

Question

我有一个网站，人们可以下载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数组。不幸的是，我是一个完全noob当谈到这一点，我不知道我会如何去做这件事，仍然有截图链接到正确的报告。

任何想法如何实现？

非常感谢提前！

Answer 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>', 
];