БлогNot. Circle Calendar, bad Godville, Birthday

Circle Calendar, bad Godville, Birthday

Убил на это неплохую часть ДР,

ещё такую же - на выяснение, зачем клованам нужен API, которым всё равно нельзя стандартно воспользоваться на JS (ниже - попытко, http:// или https://, локалхост или сервер, с ключом API или без - всё равно не работает, в общем, сделать из API Godville информер нельзя без мазы с админом, который пропишет вас в CORS):

Файлег .html с попытко воспользоваться открытым API Godville, который на самом деле не открыт, клик
<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Godville</title>

 <style> 
  table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
  }
  td, th {
   border: 1px solid #dddddd;
   text-align: left;
   padding: 8px;
  }
  tr:nth-child(even) {
   background-color: #dddddd;
  }
 </style>

</head><body>

 <table id="info"></table>
 <script>
  function loadInfo (godName) { //аргумент - строка с именем бога
   let xmlhttp = new XMLHttpRequest();
   let url = "http://godville.net/gods/api/" + godName;
   xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
     let myArr = JSON.parse(this.responseText);
     myFunction(myArr); //вывод данных
    }
    else if(this.status == 404) {
     godNotFound(); //вывод сообщения об ошибке
    }
   };
   xmlhttp.open("GET", url, true);
   xmlhttp.send();
  }

  function myFunction(arr) {
    var out = "<br>";
    var i;
    out += "<tr><th>Godname</th>" +
     "<th>" + arr.godname + "</th></tr>" +
     "<tr><th>Name</th>" +
     "<th>" + arr.name + "</th></tr>" +
     "<tr><th>Gender</th>" +
     "<th>" + arr.gender + "</th></tr>" +
     "<tr><th>Motto</th>" +
     "<th>" + arr.motto + "</th></tr>" +
     "<tr><th>Level</th>" +
     "<th>" + arr.level + "</th></tr>" +
     "<tr><th>Gold</th>" +
     "<th>" + arr.gold_approx + "</th></tr>";
    //...
    document.getElementById("info").innerHTML = out;
  }

  function godNotFound() {
   var out = "<br>God not found.";
   document.getElementById("info").innerHTML = out;
  }

  window.addEventListener ('load', function (e) {
   loadInfo('PerS1');
  }, false);
 </script>
  <noscript>
   <p>Включите Javascript в браузере для работы приложения.</p>
  </noscript>

</body>
</html>

Не смог поднять своего старого героя, завёл нового, причём, в браузере файл героя отвечае.

Пере-писка по поводу (клик)

Kreon: Каммалатрон, а какой смысл существования открытого API, если его нельзя запрашивать со сторонних ресурсов?

Pers1: Как же можно использовать этот API на JS? Вообще никак?

Olmonele: Kreon, Pers1, хотя бы iframe дают вставлять с JSON-ом от их апи и на том спасибо!

Заметим, что "не давать" вставлять ещё и iframe попросту нельзя, если файлег имеет URL и доступен извне.

...но, кажется, всё равно получил не совсем ту идею, что хотел. Главное, впрочем, сказано, всё происходит в первую пару секунд после загрузки страницы с часами, поэтому если вы не увидели вращения колёс, обновите страницу с "круговыми часами".

Полный исходник можно увидеть из приложенного файла .html в кодировке Юникода UTF-8. Там около 600 строк, но большая часть этого - выпендрёж стиль. С внешних сайтов подгружаются javascript-библиотеки JQuery 3.1 и JQuery.lettering 0.6.1.

Несмотря на приемлемую погоду, не добрался сегодня до пляжа, и ето огорчает более всего.

Так как позиции у элементов таки абсолютные, на своих сайтах лучше использовать это в отдельном фрейме iframe, а в основном потоке круговые часы нагло будут лезть на середину :)

 Файл circleCalendar.html, круговые часы со стартовым эффектом вращения, открыть в текущем окне/вкладке (19 Кб)

23.05.2023, 18:20 [319 просмотров]


теги: личное дата javascript игра графика памятка время jquery

показать комментарии (1)