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
Mustafa_Suleiman

عليك تعديل دالة showPrayerTimes لمعالجة التحويل بالشكل التالي:

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


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


  $.ajax({
    url: url,
    method: "GET",
    success: function (data) {
      const 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 (let key in prayerTimes) {
    if (prayerTimes.hasOwnProperty(key)) {
      const time = prayerTimes[key];
      const hour = parseInt(time.substring(0, 2));


      if (hour > 12) {
        hour -= 12;
        prayerTimes[key] = hour + time.substring(2);
      } else {
        prayerTimes[key] = time + " صباحًا";
      }
    }
  }
}

لاحظ دالة convertTimeFormat التي تقوم بالتكرار على كائن أوقات الصلاة وتحويل كل وقت 24 ساعة إلى تنسيق 12 ساعة، وتستدعي دالة showPrayerTimes الرئيسية تلك الدالة قبل تحديث أوقات الصلاة على الصفحة.

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

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