Magic 8-ball без чёрного шарика

Шуточный способ предсказывать будущее, наша европейская И-Цзин.

Мне не нужно было рисовать сам Magic 8-ball, чего понаделано много и длинными кодами, но требовалось, чтобы вопрос был вопросом, то есть, непустым текстом с "?" в конце

(само риторическое ? в поле ввода тоже подойдёт, кстати, нужно уточнить, не запрещён ли вопросительный знак как пустые листы бумаги)

, стирался по мере проявления ответа и не позволял вводить новый вопрос, пока текущий ответ до конца не проявится.

Перевод фраз и сам их набор выполнен по классическому образцу из Вики. Вот скриптик в работе, а исходник приведён ниже (кодировка Юникода UTF-8, без обрамления HTML).

Включите в браузере Javascript для работы приложения

Вопрос:

<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 [357 просмотров]