Показ случайной цитаты в JavaScript
Сегодня я хочу показать Вам скрипт, который позволяет выводить в любой блок на странице сайта какую-либо случайную цитату. Хочу отметить, что я уже писал статью о том, как сделать подобное на PHP, а теперь покажу пример на JavaScript.
Разметка страницы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Случайная фраза на JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="random-phrase">
<div id="phrase"></div>
<div id="author"></div>
</div>
<button id="next-quote">Следующая</button>
<script src="random.phrase.js" defer></script>
</body>
</html>
JavaScript код
var quotes = [
[
"Благородные люди, друг друга любя, \
Видят горе других, забывают себя. \
Если чести и блеска зеркал ты желаешь, — \
Не завидуй другим, — и возлюбят тебя.",
"Омар Хайям"
],
[
"Добродетель мудрецов напоминает собой путешествие в дальннюю страну \
и восхождение на вершину: идущие \
в дальнюю страну начинают свой путь с первого шага; \
восходящие на вершину начинают с подножия горы.",
"Конфуций"
],
[
"Если вы хотите успеха, а готовитесь к поражению, то вы получите как раз то, к чему готовитесь.",
"Флоренс Шин"
],
[
"Мы – рабы своих привычек. измени свои привычки, изменится твоя жизнь.",
"Роберт Кийосаки"
]
];
document.getElementById("next-quote").addEventListener("click", function() {
// выбираем случайную фразу из массива
// данные в массив могут попадать и через api
var quote = quotes[ Math.floor( Math.random() * quotes.length ) ];
// цитата
var phrase = document.querySelector("#phrase");
// автор
var author = document.querySelector("#author");
phrase.innerHTML = quote[0];
author.innerHTML = quote[1];
});
Стили для цитат
#random-phrase {
margin: 1px auto;
position: absolute;
padding: 15px;
font-size: 1.3em;
font-style: italic;
border: 1px solid #ddd;
}
#random-phrase #phrase {
text-align: left;
}
#random-phrase #author {
text-align: right;
}
#next-quote {
padding: 5px 10px;
border: 1px solid #ddd;
}
Вот так можно создать виджет для вывода случайной цитаты на сайте.
-
Создано 15.08.2019 10:52:55
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.