Javascript 从数组中随机生成图片和文本的脚本_Javascript_Html

Javascript 从数组中随机生成图片和文本的脚本

javascript html

Javascript 从数组中随机生成图片和文本的脚本,javascript,html,Javascript,Html,我基本上是在尝试设置它，这样当我在我的站点上单击一个按钮时，页面就会刷新为数组中的随机文本和数组中的随机图像。我已经记下了文字部分，但需要知道如何做图片部分。这是我现在用于文本生成器的脚本： <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 ge

我基本上是在尝试设置它，这样当我在我的站点上单击一个按钮时，页面就会刷新为数组中的随机文本和数组中的随机图像。我已经记下了文字部分，但需要知道如何做图片部分。这是我现在用于文本生成器的脚本：

<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_text=新数组（）；
r_text[0]=“您将希望跟踪改变您的生活”；
r_text[1]=“一个放错位置的逗号会让你被解雇”；
r_text[2]=“工作生活平衡？哈！”；
r_text[3]=“连银行家都嘲笑你”；
r_text[4]=“有一个健身房，所以你不能离开大楼”；
r_text[5]=“学生债务无法清偿”；
r_text[6]=“Sallie Mae成为你最大的联系人之一”；
r_text[7]=“祝合作伙伴好运”；
r_text[8]=“没有生活方式公司”；
r_text[9]=“你的灵魂将死去”；
r_text[10]=“苏格拉底式方法？更像是吸吮式方法”；
r_text[11]=“这么多纸，你会破坏雨林”；
var i=Math.floor（12*Math.random（））
文件。编写（r_文本[i]）；

有什么办法可以在这里获取图像吗？

只需将img标签放在同一个数组中，这样它就可以与文本混合：

....
r_text[12] = "<img src='1.gif' />";
r_text[13] = "<img src='2.gif' />";
...

。。。。
r_text[12]=“”；
r_text[13]=“”；
...

等等……

只需将img标签放在同一个数组中，这样它就可以与文本混合：

....
r_text[12] = "<img src='1.gif' />";
r_text[13] = "<img src='2.gif' />";
...

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]+"' />");

。。。。
r_text[12]=“”；
r_text[13]=“”；
...

等等……

var r_images=new Array（）；
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]+"' />");

r_images[0]=“a.jpg”；
r_images[1]=“b.jpg；
.
.
.
var i=Math.floor（12*Math.random（））
文件。编写（r_文本[i]）；
文件。填写（“”）；

var r_images=new Array（）；
r_images[0]=“a.jpg”；
r_images[1]=“b.jpg；
.
.
.
var i=Math.floor（12*Math.random（））
文件。编写（r_文本[i]）；
文件。填写（“”）；

您能对图像执行相同的操作吗

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'>");

var imageNames=['life'，'fired'，'balance'，'bakers'，'gym']
var i=Math.floor（5*Math.random（））
文件。填写（“”）；

您能对图像执行相同的操作吗

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'>");

var imageNames=['life'，'fired'，'balance'，'bakers'，'gym']
var i=Math.floor（5*Math.random（））
文件。填写（“”）；

为图像设置一个文件夹，并在12、13、14……之前给它们随机命名，而不是像文本一样

var i = Math.floor(24*Math.random())
document.write("<img src='folder-path/" + r_text[i] + ".jpg'>");

var i=Math.floor（24*Math.random（））
文件。填写（“”）；

为图像设置一个文件夹，并在12、13、14……之前给它们随机命名，而不是像文本一样

var i = Math.floor(24*Math.random())
document.write("<img src='folder-path/" + r_text[i] + ".jpg'>");

var i=Math.floor（24*Math.random（））
文件。填写（“”）；
< /代码> 我意识到这是一个老帖子，但是对于未来读者来说，考虑使用<代码>内文HTML >代码>代替<代码>文档。编写< <代码>，并且我建议更改<代码> var i＝数学.Load（12×Maq.Read（））<代码> > ValueI= Madio.Lead（RXTyth.Lime*Max.Read（））；<这样，当您添加更多图像时，就不必担心更改*Math.random（））

在这个示例中，我使用了数组对象，这样您就可以轻松地为每个图像定义alt文本（对于那些验证粘贴者）
对于任何关心工作示例的人：

HTML
<div id="container"></div>

<div id="container"></div>
<button onclick="myFunction()">Click me</button>



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 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;
}

var r_img=[]；
r_img[0]={
资料来源：
“image01.png”，
备忘文本：
“图像01”
};
r_img[1]={
资料来源：
“image02.png”，
备忘文本：
“图像02”
};
r_img[2]={
资料来源：
“image03.png”，
备忘文本：
“图像03”
};
var i=Math.floor（r_img.length*Math.random（））；
var s=“”；
document.getElementById（'container'）。innerHTML=s；


或者，如果您愿意，我们可以在事件发生时将其包装在函数调用中：

HTML
<div id="container"></div>

<div id="container"></div>
<button onclick="myFunction()">Click me</button>


点击我

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 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;
}

函数myFunction（）{
var r_img=[]；
r_img[0]={
资料来源：
“image01.png”，
备忘文本：
“图像01”
};
r_img[1]={
资料来源：
“image02.png”，
备忘文本：
“图像02”
};
r_img[2]={
资料来源：
“image03.png”，
备忘文本：
“图像03”
};
var i=Math.floor（r_img.length*Math.random（））；
var s=“”；
document.getElementById（'container'）。innerHTML=s；
}
< /代码> 我意识到这是一个老帖子，但是对于未来读者来说，考虑使用<代码>内文HTML >代码>代替<代码>文档。编写< <代码>，并且我建议更改<代码> var i＝数学.Load（12×Maq.Read（））<代码> > ValueI= Madio.Lead（RXTyth.Lime*Max.Read（））；<这样，当您添加更多图像时，就不必担心更改*Math.random（））

在这个示例中，我使用了数组对象，这样您就可以轻松地为每个图像定义alt文本（对于那些验证粘贴者）
对于任何关心工作示例的人：

HTML
<div id="container"></div>

<div id="container"></div>
<button onclick="myFunction()">Click me</button>



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 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;
}

var r_img=[]；
r_img[0]={
资料来源：
“image01.png”，
备忘文本：
“图像01”
};
r_img[1]={
资料来源：
“image02.png”，
备忘文本：
“图像02”
};
r_img[2]={
资料来源：
“image03.png”，
备忘文本：
“图像03”
};
var i=Math.floor（r_img.length*Math.random（））；
var s=“”；
document.getElementById（'container'）。innerHTML=s；


或者，如果您愿意，我们可以在事件发生时将其包装在函数调用中：

HTML
<div id="container"></div>

<div id="container"></div>
<button onclick="myFunction()">Click me</button>


点击我

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 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;
}

函数myFunction（）{
var r_img=[]；
r_img[0]={
资料来源：
“image01.png”，
备忘文本：
“图像01”
};
r_img[1]={
资料来源：
“image02.png”，
备忘文本：
“图像02”
};
r_img[2]={
资料来源：
“image03.png”，
备忘文本：
“图像03”
};
var i=Math.floor（r_img.length*Math.random（））；
var s=“”；
document.getElementById（'container'）。innerHTML=s；
}
我认为这是可行的。