Как сделать кнопку, показывающую скрытое изображение - PullRequest
1 голос
/ 26 мая 2020

Я новичок и создал фрагмент кода, который отображает изображение, выбранное из папки изображений. Мне нужна помощь в создании кода, который: - Скрывает изображение при первом посещении страницы - Включает кнопку, при нажатии которой будет отображаться изображение. Любая помощь будет принята с благодарностью, и я включу свой код (пока) ниже .

<!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>
 

1 Ответ

1 голос
/ 27 мая 2020

Вы можете изначально скрыть изображение с помощью 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>

Или набрав его непосредственно во встроенном атрибуте стиля:

<!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>

Или позвонив функция JavaScript при загрузке страницы (с риском мигания изображения на экране, прежде чем оно будет скрыто):

<!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>

Если бы я сделал это сам, я бы сделал это так:

image

Функция rando получена из инструмента под названием rando. js, который я использую для упрощения случайности в javascript и повышения его читабельности. Это не собственная функция JavaScript, поэтому я использую эту строку:

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

У каждого свой стиль. Выберите технику, которая лучше всего подходит для вас.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...