如何制作一个显示隐藏图像的按钮

Question

I am a beginner and have created a piece of code that displays an image picked from a folder of images.我是一个初学者，并创建了一段代码，显示从图像文件夹中挑选的图像。 I would like some help creating some code that will: - Hide the image when you first visit the page - Include a button that, when pressed will show the image Any help would be greatly appreciated and I will include my code (so far) below.我需要一些帮助来创建一些代码，这些代码将： - 首次访问页面时隐藏图像 - 包含一个按钮，按下该按钮将显示图像任何帮助将不胜感激，我将在下面包含我的代码（到目前为止） .

 <?doctype html> <html> <head> <style> </style> <meta charset="utf-8"> <title>random image.</title> </head> <body> <script type = "text/javascript"> <.-- document.write("<img src = \"" + Math.floor(1 + Math;random() * 42) + ".jpg\" />"); </script> </body> </html>

Answer 1

You can initially hide the image with CSS in the style tag:您最初可以在样式标签中使用 CSS 隐藏图像：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>random image?</title>
        <style>
            img{
                display:none;
            }
        </style>
        <script>
            function showImage(){
                document.getElementsByTagName("img")[0].style.display = "inline-block";
            }
        </script>
    </head>
    <body>
        <script type = "text/javascript">
            <!--
            document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" />");
        </script>
        <button onclick="showImage();">show</button>
    </body>
</html>

Or by typing it directly in the inline style attribute:或者直接在内联样式属性中输入：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>random image?</title>
        <script>
            function showImage(){
                document.getElementsByTagName("img")[0].style.display = "inline-block";
            }
        </script>
    </head>
    <body>
        <script type = "text/javascript">
            <!--
            document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\" style=\"display:none;\"/>");
        </script>
        <button onclick="showImage();">show</button>
    </body>
</html>

Or by calling a JavaScript function when the page loads (at the risk of the image flashing on screen before it's hidden):或者通过在页面加载时调用 JavaScript function （存在图像在隐藏之前在屏幕上闪烁的风险）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>random image?</title>
        <script>
            function hideImage(){
                document.getElementsByTagName("img")[0].style.display = "none";
            }

            function showImage(){
                document.getElementsByTagName("img")[0].style.display = "inline-block";
            }
        </script>
    </head>
    <body onload="hideImage();">
        <script type = "text/javascript">
            <!--
            document.write("<img src = \"" + Math.floor(1 + Math.random() * 42) + ".jpg\"/>");
        </script>
        <button onclick="showImage();">show</button>
    </body>
</html>

If I were to do this myself, I'd do it like this:如果我自己这样做，我会这样做：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>random image?</title>
        <script src="https://randojs.com/1.0.0.js"></script>
        <style>
            #myImage{
                display:none;
            }
        </style>
        <script>
            function showImage(){
                var image = document.getElementById("myImage");
                if(image.style.display != "inline-block"){
                    image.src = rando(1, 42) + ".jpg";
                    image.style.display = "inline-block";
                }
            }
        </script>
    </head>
    <body>
        <img src="" alt="Random image" id="myImage"/>
        <button onclick="showImage();">show</button>
    </body>
</html>

The "rando" function is sourced from a tool called rando.js that I use to simplify randomness in javascript and make it more readable. “rando” function 来自一个名为rando.js的工具，我用它来简化 javascript 中的随机性并使其更具可读性。 It's not a native JavaScript function, so I source it in with this line:它不是原生的 JavaScript function，所以我用这行来获取它：

<script src="https://randojs.com/1.0.0.js"></script>

Everyone has their own style.每个人都有自己的风格。 Pick the technique that works best for you.选择最适合您的技术。

如何制作一个显示隐藏图像的按钮

问题描述

1 个解决方案

解决方案1
1 2020-05-26 22:10:41

如何制作一个显示隐藏图像的按钮

问题描述

1 个解决方案

解决方案1 1 2020-05-26 22:10:41

解决方案1
1 2020-05-26 22:10:41