单击按钮上的Javascript随机图像
Javascript random image on click button
我一直在关注一些教程,介绍如何通过在 Javascript 中设置数组来随机化图像。 它不起作用 - 图像本身没有出现,甚至没有任何错误。
JavaScript
<script type="text/javascript">
function randomImg1(){
var myImages1 = new Array ();
myImages1[1] = "img/who/1.jpg";
myImages1[2] = "img/who/2.jpg";
myImages1[3] = "img/who/3.jpg";
var rnd = Math.floor(Math.random() * myImages1.length);
if(rnd == 0{
rnd = 1;
}
document.write(<img class="who" src="'+myImages1[rnd]);
}
</script>
我的按钮看起来像这样
<input class="randombutton" style="float: left;" type="button" value="Randomize" onclick="randomImg1()"/>
您必须在此行中添加引号并关闭 if 语句:
<script type="text/javascript">
function randomImg1() {
var myImages1 = new Array();
myImages1[1] = "img/who/1.jpg";
myImages1[2] = "img/who/2.jpg";
myImages1[3] = "img/who/3.jpg";
var rnd = Math.floor(Math.random() * myImages1.length);
if (rnd == 0) {
rnd = 1;
}
document.write('<img class="who" src="' + myImages1[rnd] + '">');
}
</script>
你忘记了 if 语句和文档上的)
,你错过了'
和关闭 <img>
标签。在这里查看:
if (rnd == 0) {
rnd = 1;
}
document.write('<img class="who" src="' + myImages1[rnd] + '"/>');
确保跟踪所有右括号和括号。
此代码将为您工作:
<script type="text/javascript">
function randomImg1() {
var myImages1 = new Array ();
myImages1[1] = "img/who/1.jpg";
myImages1[2] = "img/who/2.jpg";
myImages1[3] = "img/who/3.jpg";
var rnd = Math.floor( Math.random() * myImages1.length );
if( rnd == 0 ) {
rnd =1;
}
html_code = '<img class="who" src="' + myImages1[rnd] + '" />";
document.write(html_code);
}
</script>
另外,如果我是你,我会指出你的DOM文档中更具体的观点。如果你愿意,你可以使用一个非常简单的jQuery脚本,比如:$("#testing").html(html_code);
而不是你的document.write()
要将页面中的某些内容附加到 HTML 中的元素,请使用
.append
而不是"写入"功能,因为 .append 实际上会将内容附加到指定的元素,而不是整个文档。
因此,在您的 HTML 中,您应该创建一个 ID 为"our_div"的 DIV。
<html>
<head></head>
<body>
<!-- Text will be appended to this DIV via JS -->
<div id="the_div">Hello, </div>
</body>
</html>
使用类似这样的东西:
function add_text() {
$("#the_div").append("World"); // appends text "World" to the end of that div.
}
现在,在你的HTML中,你应该有一个调用函数"add_text(("的按钮。
<button id="the_button" onClick="add_text();">Click Here to Add Text</button>
现在!
当用户单击该按钮时,它会将文本"世界"附加到 ID 为"the_div..."因此,我们有...
Hello, World
以下是整个代码:
<html>
<head>
<script type="text/javascript">
function add_text() {
$("#the_div").append("World");
}
</script>
</head>
<body>
<div id="the_div">
Hello,
</div>
<button id="the_button" onClick="add_text();">Click!</button>
</body>
</html>
尝试使用
.html
替换一些东西...例如,我在开发的游戏中使用掷骰子功能。当玩家掷骰子时...
$("#results").append(Math.floor(Math.rand()*6));
给了我们这样的东西...
(每卷(
results: 142563342515246422
如果我使用.html...
$("#results").html(Math.floor(Math.rand()*6));
我们留下了更多类似的东西
(第一卷(
results: 5
(第二卷(
results: 2
(第三卷(
results: 6
等等!
您正在写入文档的 HTML 不完整。
你需要这样的东西:
document.write("<img class='who' src='" + myImages1[rnd] + "'>");
我还要提醒的是,document.write 通常不是向页面添加元素的首选方法,但似乎这更像是一个学习示例,而不是现实世界的示例。
哦,伙计,这很尴尬。 疯狂的3年你能学到多少。 我认为执行此操作的最佳方法是以下内容(假设没有文件夹结构模式(。 尚未测试,但应该可以工作。
var images = ["img/who/1.jpg","img/who/2.jpg","img/who/3.jpg"];
function getRandomImage(){
var rnd = Math.floor(Math.random() * images.length);
return images[rnd];
}
function changeImage(){
var img = document.querySelector("#myImg");
img.src = getRandomImage();
}
function init(){
var el = document.querySelector(".myClass");
el.onclick = changeImage;
}
window.onload = init;
我在想什么,将数组分配给[1]
然后进行if
检查? 我永远不会知道。
这是我能想到的最好的方法,我更喜欢这个的原因,是因为它不是改变整个页面,而是改变 img 标签中的 src。
代码如下:
脚本
function imgchange() {
var myImages1 = new Array();
myImages1[1] = "img/who/1.jpg";
myImages1[2] = "img/who/2.jpg";
myImages1[3] = "img/who/3.jpg";
var rnd = Math.floor(Math.random() * myImages1.length);
if (rnd == 0) {
rnd = 1;
}
document.getElementById("gen-img").src = myImages1[rnd];
}
目录
<p><img id="gen-img" src="img/who/1.jpg"></p>
<p><input type="button" value="Random" onclick="imgchange();" /></p>
但是,我所做的是我有一个空白的 png 文件,其中没有任何内容,我将其设置为图像的默认 src。但你可以随心所欲。
- 在固定位置显示随机图像
- 阵列中随机图像的问题
- 使用CSS、HTML和Javascript在随机图像的页面上调整图像大小
- Jquery/Javascript:通过按下按钮显示数组中的随机图像
- 需要关于随机图像旋转的指南
- 随机图像旋转的多个实例
- HTML JS在DIV中附加随机图像
- 如何用百分比制作随机图像生成器
- 加载网站时出现随机图像
- 正在创建随机图像闪烁
- 创建随机图像交换并禁止鼠标悬停事件
- 刷新时随机图像
- 随机图像显示,无重复,使用Javascript
- 以不同的速度生成随机图像
- 选择随机图像,检查是否在特定范围内并相应显示
- 随机图像显示不止一次
- 未显示随机图像
- j查询随机图像推子
- 为什么我的随机图像不会显示在浏览器中
- 随机图像加载