Magic 8-ball без чёрного шарика
Шуточный способ предсказывать будущее, наша европейская И-Цзин.
Мне не нужно было рисовать сам Magic 8-ball, чего понаделано много и длинными кодами, но требовалось, чтобы вопрос был вопросом, то есть, непустым текстом с "?" в конце
(само риторическое ? в поле ввода тоже подойдёт, кстати, нужно уточнить, не запрещён ли вопросительный знак как пустые листы бумаги)
, стирался по мере проявления ответа и не позволял вводить новый вопрос, пока текущий ответ до конца не проявится.
Перевод фраз и сам их набор выполнен по классическому образцу из Вики. Вот скриптик в работе, а исходник приведён ниже (кодировка Юникода UTF-8, без обрамления HTML).
Вопрос:
<script> function magicBall (q, a) { let el = document.getElementById(a), el2 = document.getElementById(q); if (!el || !el2) { console.log('No 2 items with id = '+q+' and '+a); return; } function fadeIn(el, el2, speed) { //Проявление элемента el со скоростью speed и стиранием текста из el2 let step = 1 / speed; let interval = setInterval(function() { if (+el.style.opacity >= 1) { //"+" нужен, т.к. opacity - строка clearInterval(interval); el2.value = ''; } el.style.opacity = +el.style.opacity + step; let len = el2.value.length; if (len > 0) el2.value = el2.value.substring(0, len - 1); }, speed / 1000); } el.style.opacity = '0'; let answers = [ "Бесспорно", "Предрешено", "Никаких сомнений", "Определённо, да", "Можете быть уверены в этом", "Мне кажется, да", "Вероятнее всего", "Хорошие перспективы", "Знаки говорят, да", "Да", "Пока не ясно, попробуй снова", "Спроси позже", "Лучше не рассказывать", "Сейчас нельзя предсказать", "Сконцентрируйся и спроси опять", "Даже не думай", "Мой ответ - нет", "По моим данным - нет", "Перспективы не очень хорошие", "Весьма сомнительно" ]; let ans = answers[Math.floor(Math.random()*answers.length)]; el2.value = el2.value.trim(); let len = el2.value.length; if (len > 0 && el2.value.substring(len-1)=='?') el.innerText = ans; else el.innerText = 'Сначала задайте вопрос?'; fadeIn (el, el2, 250); } </script> <noscript> <p>Включите в браузере Javascript для работы приложения</p> </noscript> <p>Вопрос: <input type="text" id="question" size="50" maxlength="100"> <input type="button" value="Спросить" onclick="magicBall('question','answer');"> </p> <p id="answer" style="opacity: 0;"></p>
04.05.2022, 09:21 [397 просмотров]