[英]Script to randomly generate pictures and text from an array
我實際上是在嘗試設置它,以便當我單擊網站上的按鈕時,頁面會使用數組中的隨機文本片段和數組中的隨機圖像進行刷新。 我已經把文字部分弄下來了,但需要知道如何制作圖片部分。 這是我現在用於文本生成器的腳本:
<script language="JavaScript">
var r_text = new Array ();
r_text[0] = "You'll want to track-change your life";
r_text[1] = "A misplaced comma can get you fired";
r_text[2] = "Work-life balance? Ha!";
r_text[3] = "Even the bankers laugh at you";
r_text[4] = "There's a gym so you can't leave the building";
r_text[5] = "Student debt can't be discharged";
r_text[6] = "Sallie Mae becomes one of your biggest contacts";
r_text[7] = "Good luck with partner track";
r_text[8] = "There are no lifestyle firms";
r_text[9] = "Your soul will die";
r_text[10] = "Socratic Method? More like Suck-ratic Method";
r_text[11] = "So much paper. You'll be destroying rainforests";
var i = Math.floor(12*Math.random())
document.write(r_text[i]);
</script>
關於如何在此處獲取圖像的任何想法?
var r_images = new Array ();
r_images[0] = "a.jpg";
r_images[1] = "b.jpg;
.
.
.
var i = Math.floor(12*Math.random())
document.write(r_text[i]);
document.write("<img src='"+images_folder+r_images[i]+"' />");
只需將 img 標簽放在同一個數組中,以便它與文本混合:
....
r_text[12] = "<img src='1.gif' />";
r_text[13] = "<img src='2.gif' />";
...
ETC....
你能為圖像做同樣的事情嗎?
var imageNames = ['life', 'fired', 'balance', 'bakers', 'gym']
var i = Math.floor(5*Math.random())
document.write("<img src='http://path/to/your/image/" + imageNames[i] + ".jpg'>");
為圖像設置一個文件夾並給它們隨機命名 12,13,14 ......比文本相同
var i = Math.floor(24*Math.random())
document.write("<img src='folder-path/" + r_text[i] + ".jpg'>");
我意識到這是一篇舊文章,但對於未來的讀者,請考慮使用innerHTML
代替document.write
並且我還建議將var i = Math.floor(12*Math.random())
更改為var i = Math.floor(r_text.length * Math.random());
這樣,當您添加更多圖像時,您不必擔心更改*Math.random())
旁邊的數字
在此示例中,我使用了 Array 對象,以便您可以輕松地為每個圖像定義替代文本(對於那些驗證貼紙)。
對於任何關心工作示例的人:
HTML
<div id="container"></div>
JS
var r_img = [];
r_img[0] = {
source:
"image01.png",
altText:
"image 01"
};
r_img[1] = {
source:
"image02.png",
altText:
"image 02"
};
r_img[2] = {
source:
"image03.png",
altText:
"image 03"
};
var i = Math.floor(r_img.length * Math.random());
var s = "<img src='http://tinyurl.com/ky3nmqp/" + r_img[i].source + "' alt='" + r_img[i].altText + "'>";
document.getElementById('container').innerHTML = s;
或者,如果您願意,我們可以將其包裝在 function 中,並在事件發生時調用它:
HTML
<div id="container"></div>
<button onclick="myFunction()">Click me</button>
JS
function myFunction() {
var r_img = [];
r_img[0] = {
source:
"image01.png",
altText:
"image 01"
};
r_img[1] = {
source:
"image02.png",
altText:
"image 02"
};
r_img[2] = {
source:
"image03.png",
altText:
"image 03"
};
var i = Math.floor(r_img.length * Math.random());
var s = "<img src='http://tinyurl.com/ky3nmqp/" + r_img[i].source + "' alt='" + r_img[i].altText + "'>";
document.getElementById('container').innerHTML = s;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.