在網站上顯示帶有鏈接的隨機圖像

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