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

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

0
Abdelbaset_ibrahem

بالإضافة للحل في التعليق السابق يمكنك استخدام الدالة التالية 

function convertTo12HourFormat(time24) {
            // تحويل الوقت من تنسيق 24 ساعة إلى 12 ساعة
            var time12 = "";
            var splitTime = time24.split(":");
            var hours = parseInt(splitTime[0]);
            var minutes = splitTime[1];
            var ampm = hours >= 12 ? "م" : "ص";
            
            hours = hours % 12;
            hours = hours ? hours : 12; // الساعة 12 في تنسيق 12 ساعة تعني الظهر

            time12 = hours + ":" + minutes + " " + ampm;

            return time12;
        }

ثم يم استخدام هذه الدالة بالشكل التالي

document.getElementById("fajr").innerHTML = convertTo12HourFormat(prayerTimes.Fajr);
0
mveghgv

شكراً جزيلاً استاذ مصطفي انها تعمل الان بشكل جيد❤😍