这是我一个随机生成图片的代码,如何设计一个按钮,刷新下边代码的图片,且不刷新整个页面
<div class="picture">
<center>
<script language=javascript>
id=Math.floor(Math.random()*(336-1+1))+1;
document.write(" <img src=photo\\"+id+".jpg ")
</script>
</center>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="Login.css" />
</head>
<body>
<button onclick="load()"></button>
</body>
<script language=javascript>
load();
function load() {
id = Math.floor(Math.random() * (336 - 1 + 1)) + 1;
var img = document.createElement("img");
img.str = "photo\" + id + ".jpg";
document.body.appendChild(img);
}
</script>
</html>
模拟点击按钮删除原来的显示再调用一下这个方法
封装成一个函数。点击运行。下面是大概代码。可能单词拼写有问题。你参照一下
<div class="picture">
<center>
<script language=javascript>
var picture=docuument.getElementByClassName("picture")[0];
picture.addlistener("click",()=>{ //或者直接onclick。
imgRandom ();
})
function imgRandom (){
var id=Math.floor(Math.random()*(336-1+1))+1;
document.write(" <img src=photo\\"+id+".jpg ")
}
</script>
</center>
</div>
代码楼上几位大佬都给了,我就不献丑了,我只想知道336后面的-1+1有啥用?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<button class="picture"></button>
</body>
<div class="picture">
<center>
<script language=javascript>
var picture=docuument.getElementByClassName("picture")[0];
picture.addlistener("click",()=>{ //或者直接onclick。
imgRandom ();
})
function imgRandom (){
var id=Math.floor(Math.random()*(336-1+1))+1;
document.write(" <img src=photo\\"+id+".jpg ")
}
</script>
</center>
</div>
</script>
</html>