0

واجهة برمجة التطبيقات لتوقيتات الصلاة

mveghgv
المزيد

قمت بالعديد من المحاولات لتحويل تنسيق الساعة من 24 إلي 12 و لكن لم استطع الوصول إلي أي حل حتي الان

هل يوجد حل؟

<!DOCTYPE html>
<html>
<head>
    <title>Automatic Prayer Times</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPrayerTimes);
            } else {
                console.log("Geolocation is not supported by this browser.");
            }
        }

        function showPrayerTimes(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            

            var url = "https://api.aladhan.com/v1/timings?latitude=" + latitude + "&longitude=" + longitude + "&method=5";

            $.ajax({
                url: url,
                method: "GET",
                success: function (data) {
                    var prayerTimes = data.data.timings;

                    document.getElementById("fajr").innerHTML = prayerTimes.Fajr;
                    document.getElementById("sunrise").innerHTML = prayerTimes.Sunrise;
                    document.getElementById("dhuhr").innerHTML = prayerTimes.Dhuhr;
                    document.getElementById("asr").innerHTML = prayerTimes.Asr;
                    document.getElementById("maghrib").innerHTML = prayerTimes.Maghrib;
                    document.getElementById("isha").innerHTML = prayerTimes.Isha;
                    document.getElementById("midnight").innerHTML = prayerTimes.Midnight;
                },
                error: function () {
                    console.log("Error retrieving prayer times.");
                }
            });
        }
      


    </script>
  
</head>
<body onload="getLocation()">
  <div class="prayer-times-1">
    <h1>أوقات الصلاة</h1>
    <h2>الفجر: <span id="fajr"></span></h2>
    <h2>الشروق: <span id="sunrise"></span></h2>
    <h2>الظهر: <span id="dhuhr"></span></h2>
    <h2>العصر: <span id="asr"></span></h2>
    <h2>المغرب: <span id="maghrib"></span></h2>
    <h2>العشاء: <span id="isha"></span></h2>
    <h2>منتصف الليل: <span id="midnight"></span></h2>
    </div>
</body>
</html>

التعليق السابق
0
mveghgv

كامل التحية و الشكر إستاذ مصطفي ❤ و لكن عندما قمت بالتجربة للأسف لم تعمل و لم يظهر التوقيت نهائياً و لا اعلم السبب صراحه لكنها عملت بالطريقة التي وضحها استاذ عبدالباسط

0
Mustafa_Suleiman

إليك مثال كامل يعمل بشكل سليم وتأكد من السماح بالوصول للموقع:

<!DOCTYPE html>
<html>
  <head>
    <title>Automatic Prayer Times</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPrayerTimes);
        } else {
          console.log('Geolocation is not supported by this browser.');
        }
      }


      function showPrayerTimes(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;


        var url =
          'https://api.aladhan.com/v1/timings?latitude=' +
          latitude +
          '&longitude=' +
          longitude +
          '&method=5';


        $.ajax({
          url: url,
          method: 'GET',
          success: function (data) {
            var prayerTimes = data.data.timings;


            convertTimeFormat(prayerTimes);


            document.getElementById('fajr').innerHTML = prayerTimes.Fajr;
            document.getElementById('sunrise').innerHTML = prayerTimes.Sunrise;
            document.getElementById('dhuhr').innerHTML = prayerTimes.Dhuhr;
            document.getElementById('asr').innerHTML = prayerTimes.Asr;
            document.getElementById('maghrib').innerHTML = prayerTimes.Maghrib;
            document.getElementById('isha').innerHTML = prayerTimes.Isha;
            document.getElementById('midnight').innerHTML = prayerTimes.Midnight;
          },
          error: function () {
            console.log('Error retrieving prayer times.');
          },
        });
      }


      function convertTimeFormat(prayerTimes) {
        for (var key in prayerTimes) {
          if (prayerTimes.hasOwnProperty(key)) {
            var time = prayerTimes[key];
            var hour = parseInt(time.substring(0, 2));


            if (hour > 12) {
              hour -= 12;
              prayerTimes[key] = hour + time.substring(2);
            } else {
              prayerTimes[key] = time + ' AM';
            }
          }
        }
      }
    </script>
  </head>
  <body onload="getLocation()">
    <div class="prayer-times-1">
      <h1>أوقات الصلاة</h1>
      <h2>الفجر: <span id="fajr"></span></h2>
      <h2>الشروق: <span id="sunrise"></span></h2>
      <h2>الظهر: <span id="dhuhr"></span></h2>
      <h2>العصر: <span id="asr"></span></h2>
      <h2>المغرب: <span id="maghrib"></span></h2>
      <h2>العشاء: <span id="isha"></span></h2>
      <h2>منتصف الليل: <span id="midnight"></span></h2>
    </div>
  </body>
</html>
0
mveghgv

اصبحت تعمل يبدو اني اخطأت في شئ ما شكرا لك