我是 Javascript/HTML 的初学者。所以，如果我遗漏了一些明显的东西，我很抱歉。我的任务：在我的网站上我想显示一张图片，当网站加载或刷新时该图片始终相同。在该图片旁边，我想实现一个按钮，上面写着：“随机播放”。此按钮隐藏最初显示的第一张图片，然后显示从数组中选择的随机图片。图片更改后，“随机播放”按钮应该可以再次单击，并且每次单击它都应该从数组中随机选择一张新图片。第一个初始图片仅应在刷新网站时再次显示。我的问题：当单击“随机播放”按钮时，图片会发生变化，但按钮和我编写的应在网站上显示的其他所有内容也会消失。所以不可能再次点击。为了重复选择新的随机图像，我将数组放入一个函数中，该函数通过按钮上的 oncklick 进行选择（我认为我的问题就在这里）。如果我删除数组周围的此函数，则单击该按钮时不会消失，但该按钮不能多次单击。此问题的图片包含在本文的底部。我希望您能理解我的问题并且能够帮助我。谢谢！代码：<body> <!-- button with functions:hide initial picture, select random picture, show random picture--> <button onClick="hideNumber(); shuffle(); showMeme();">Shuffle</button> <!--initial picture thats not random and always shown when page is loaded--> <div> <img id="number" src="images/zahl1.jpg" alt="Number"> </div> <script type="text/javascript"> function hideNumber() { var x = document.getElementById("number"); if (x.style.display == "none") { } else { x.style.display = "none"; } }//function so the button should be reclickable / array filled with picturesfunction shuffle(){ var images1 = [], index1 = 0; images1[0] = "<div><img src='images/meme1.jpg' id='Meme1' style='visibility:hidden' alt='meme1'></div>"; images1[1] = "<div><img src='images/meme2.jpg' id='Meme1' style='visibility:hidden' alt='meme2'></div>"; images1[2] = "<div><img src='images/meme3.jpg' id='Meme1' style='visibility:hidden' alt='meme3'></div>"; //selecting random number index1 = Math.floor(Math.random() * images1.length); //displaying random image out of array document.write(images1[index1]);}//execute function? (not sure if done right) shuffle();//function to show the random picture when button is clicked function showMeme() { document.getElementById('Meme1').style.visibility='visible'; } </script></body>这是一张显示网站首次加载时的图片第二张图显示了单击按钮时发生的情况。第一张图片消失，第二张随机图片显示（应该是这样），但生成不同随机图片的按钮消失了
2 回答
慕哥9229398
TA贡献1877条经验 获得超6个赞
document.write将替换整个页面。为您的<div>初始图像提供一个 ID，并使用它来替换该元素的内容：
<div id="wrapper"> <img id="number" src="images/zahl1.jpg" alt="Number"> </div>
用。。。来代替document.write(images1[index1]);：
document.getElementById('wrapper').innerHTML = images1[index1];请注意，您可以style='visibility:hidden'从图像中删除样式并摆脱可见性切换，因为数组中的元素是简单的字符串，此处不加载图像，并且当前显示的图像将被完全替换。
您可以通过简单地替换图像src属性而不是替换整个 HTML 块来进一步改进这一点，除非您有理由做更多的事情。
繁星淼淼
TA贡献1775条经验 获得超11个赞
这可能有帮助：
<body>
<!-- button with functions:hide initial picture, select random picture, show random picture-->
<button onClick="shuffle();">Shuffle</button>
<!--initial picture thats not random and always shown when page is loaded-->
<div>
<img id="number" src="images/zahl1.jpg" alt="Number">
</div>
<script type="text/javascript">
//function so the button should be reclickable / array filled with pictures
function shuffle(){
var images1 = [],
index1 = 0;
images1[0] = "images/meme1.jpg";
images1[1] = "images/meme2.jpg";
images1[2] = "images/meme3.jpg";
//selecting random number
index1 = Math.floor(Math.random() * images1.length);
//displaying random image out of array
document.getElementById("number").src = images1[index1];
}
</script>
</body>
添加回答
举报
0/150
提交
取消