Создание случайных пожеланий на день рождения с помощью JavaScript
Добавить в избранное
В этой статье мы узнаем, как создать веб-страницу, которая генерирует случайные пожелания на день рождения , используя HTML, CSS и JavaScript.
index.html
<html>
<head>
<meta charset="UTF-8">
<title>день рождения</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="body-bg"></div>
<div class="container">
<div class="container-data">
<div id="msg"></div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
Код CSS: используется для установки стилей в HTML-документ. Здесь мы устанавливаем ширину, высоту и положение документа. Мы будем использовать медиа-запрос CSS, чтобы установить стили для разных размеров экранов.
style.css
width: 100%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: radial-gradient(#00E7BD, #013A4E);
transition: all 0.5s;
}
.container {
width: 80%;
height: 80%;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(#00E7BD, #013A4E);
box-shadow: 0 0 20px 2px #013A4E;
}
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 3vw;
}
@media only screen and (max-width: 763px) {
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 6vw;
}
}
@media only screen and (max-height: 423px) {
.container-data {
padding: 24px;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
color: #fff;
font-family: Arial;
font-size: 4vw;
}
}
Код JavaScript: теперь мы хотим отобразить кому-то случайное сообщение о дне рождения, и это можно сделать с помощью JavaScript. В этом разделе мы сохраняем все сообщения в переменной массива, а затем используем свойство array.length для проверки размера массива. После этого используйте функцию math.random() для генерации случайного числа для отображения случайного сообщения.
js.js
"Поздравляю с днем рождения! Желаю, чтобы все мечты сбывались, цели достигались, материальное положение улучшалось, а все проблемы и печаль оставались в стороне.",
"Пусть каждый миг жизни будет наполнен солнечными лучами, добрыми словами, светлыми людьми, позитивными мыслями и радостными событиями! С днем рождения!",
"Пусть в этот день исполнятся все самые заветные мечты! Желаю радости, любви и крепкого здоровья! С днем рождения!"
];
let i = messages.length;
let s = Math.floor(Math.random() * i);
document.querySelector("#msg").innerHTML = '" ' + messages[s] + ' "';