Сегодня я хочу показать Вам скрипт, который позволяет выводить в любой блок на странице сайта какую-либо случайную цитату. Хочу отметить, что я уже писал статью о том, как сделать подобное на 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; }
Вот так можно создать виджет для вывода случайной цитаты на сайте.
Android 8.1.0, Chrome,70.0.3538.110