从数组中随机生成图片和文本的脚本
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' />";
...
等等。。。。
你能为图像做同样的事情吗?
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对象,这样你就可以很容易地为每个图像定义alt文本(对于那些验证粘贴者)。
对于任何关心工作示例的人:
http://jsfiddle.net/GmZPe/3/
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;
或者,如果您愿意,我们可以将其封装在一个函数中,当事件发生时调用它:
http://jsfiddle.net/GmZPe/4/
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;
}
相关文章:
- 借助asp.net验证或java脚本对多个文本进行验证
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 以纯文本加载的脚本-未声明纯文本文档的字符编码
- 脚本图像获胜't用文本换行
- 尝试在随机文本和图像脚本中添加样式/更改字体
- html或java脚本代码在硬盘中创建一个文本文件
- 在Asp.net的TextBox中插入所需文本的java脚本代码
- 对照数组脚本检查文本框中的值不起作用
- java脚本:交换技术,添加随机文本
- php代码或脚本接受自动完成列表中文本框中的值
- 我收到消息“资源解释为脚本,但使用 MIME 类型文本/html 传输”
- Javascript-Android 获取选定的文本脚本
- JavaScript InvalidCharacterError 在编写文本框脚本时出错
- 阅读java脚本中的文本
- 如何通过java脚本限制粘贴文本框(Aspx.page)中的整数或字符值
- 选择<脚本></脚本>作为html正文中的纯文本
- 谷歌脚本查看文本是否包含值
- 设置“;将标签视为文本“;通过脚本将Google电子表格图表的值设置为true
- 禁用文本框的脚本错误显示
- 简单的删除文本脚本