سكريبت عرض مواقيت الصلاه اونلاين

مرحبا بالجميع، اليوم وبمناسبه شهر رمضان المبارك، الذي سوف يحل علينا بعد عده ايام باذن الله. اشارك معكم أداة مواقيت الصلاه هي أداة إلكترونية تستخدم لتحديد أوقات الصلاة الخمس في المنطقة التي يتم استخدامها في الموقع الإلكتروني. تستند هذه الأداة إلى مجموعة من قواعد بيانات API التي تتيح للمستخدم تحديد وقت الصلاة بدقة عالية وعلى مدار اليوم. كما شرحنا لكم مسبقا كيفيه اضافه مشغل القرآن الكريم في مدونة بلوجر.

ما هي أداة مواقيت الصلاة وكيف تعمل؟

تعتمد أداه عرض مواقيت الصلاة على مجموعة من مكتبات API خارجية حسابية، بما في ذلك مواقيت الشمس والقمر والتاريخ الهجري، لتحديد وقت الصلاة بدقة عالية. تتيح هذه الأداة للمستخدمين إدخال موقعهم الجغرافي وخطوط الطول والعرض الخاصة بهم، حيث يمكن للمستخدم أيضاً إختيار الطريقة التي يرغب في استخدامها لتحديد وقت الصلاة، سواء كانت الطريقة الشرعية (المذهبية) أو الطريقة العلمية (الحسابية).

شاهد أيضاً :-

بعد إدخال الموقع الجغرافي، تقوم الأداة بعرض أوقات الصلاة الصحيحة بحسب التوقيت المحلي للمستخدم، وتوفر أيضًا خيارات للتنبيهات والإشعارات لتذكير المستخدم بأوقات الصلاة. وبذلك، توفر أداة مواقيت الصلاة دقة وسهولة في تحديد وقت الصلاة للمستخدمين في المواقع الإلكترونية و التطبيقات. وتعد خاصية المكان الجغرافي وخطوط الطول والعرض أحد المكونات الأساسية التي تضمن دقة الأداة في تحديد أوقات الصلاة للمستخدمين.

شكل مواقيت الصلاه 1شكل Prayer times 2

سكريبت Aladhan API لعرض مواقيت الصلاه اونلاين

<div class="container">
  <label for="citySelect">اختر محافظة:</label>
  <select name="citySelect" id="citySelect">
  <option value="Cairo">القاهرة</option>
  <option value="Alexandria">الإسكندرية</option>
  <option value="Giza">الجيزة</option>
  <option value="Luxor">الأقصر</option>
  <option value="Aswan">أسوان</option>
  <option value="Asyut">أسيوط</option>
  <option value="Beheira">البحيرة</option>
  <option value="Beni Suef">بني سويف</option>
  <option value="Dakahlia">الدقهلية</option>
  <option value="Damietta">دمياط</option>
  <option value="Faiyum">الفيوم</option>
  <option value="Gharbia">الغربية</option>
  <option value="Ismailia">الإسماعيلية</option>
  <option value="Kafr El Sheikh">كفر الشيخ</option>
  <option value="Matruh">مطروح</option>
  <option value="Minya">المنيا</option>
  <option value="Monufia">المنوفية</option>
  <option value="New Valley">الوادي الجديد</option>
  <option value="North Sinai">شمال سيناء</option>
  <option value="Port Said">بورسعيد</option>
  <option value="Qalyubia">القليوبية</option>
  <option value="Qena">قنا</option>
  <option value="Red Sea">البحر الأحمر</option>
  <option value="Sharqia">الشرقية</option>
  <option value="Sohag">سوهاج</option>
  <option value="South Sinai">جنوب سيناء</option>
  <option value="Suez">السويس</option>
</select>
  <div class='btnF'>
    <button class='button' id="updateBtn">تحديث الأوقات</button>
    </div>
  <div id="prayer-times">
    <table>
      <thead>
        <tr>
          <th>الصلاة</th>
          <th>التوقيت</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>الإمساك:</td>
          <td id="imsak"></td>
        </tr>
        <tr>
          <td>الفجر:</td>
          <td id="fajr"></td>
        </tr>
        <tr>
          <td>الظهر:</td>
          <td id="dhuhr"></td>
        </tr>
        <tr>
          <td>العصر:</td>
          <td id="asr"></td>
        </tr>
        <tr>
          <td>المغرب:</td>
          <td id="maghrib"></td>
        </tr>
        <tr>
          <td>العشاء:</td>
          <td id="isha"></td>
        </tr>
        </tbody>
    </table>
  </div>
  <footer class='footer' style='text-align:center;'>
    <a id='created' title='Mr-Medo'><b>مستر ميدو</b></a>
  </footer>
</div>
<style>
.container{position:relative;padding:15px;background:#fff;margin-top:25px;border-radius:10px;box-shadow:0 3px 9px -2px;}.container::after{content:"";display:block;position:absolute;bottom:0;right:0;width:115px;height:115px;background:rgba(155,170,175,0.12);background-repeat:no-repeat;border-radius:120px 0 20px;transition:opacity 0.3s;opacity:1;}.container label{display:block;margin-bottom:10px;}.container select{display:block;width:100%;padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:16px;}.container table{width:100%;border-collapse:collapse;}.container th,td{padding:10px;border:1px solid #ccc;text-align:center;}.container thead th{background-color:#eee;}@media (max-width:600px){.container select{font-size:14px;}.container th,td{font-size:14px;}}
.drK .container{background:var(--darkBa);box-shadow:0 10px 40px rgba(0,0,0,0.2);}
.drK .container select{background:var(--darkBa)}
.drK .container thead th {background-color:#303030;}
</style>
<script>
const country = "Egypt";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('m j=I;(o(a,b){m u=I,J=a();Q(!![]){22{m R=-B(u(29))/(2a+-2b+2c)+-B(u(2d))/(2e*-2f+2g+-2h*S)*(-B(u(2i))/(2j+-2k*2l+-2m))+-B(u(2n))/(L*-2o+-T*2p+2q*2r)+B(u(2s))/(2t+-2u+2v)+B(u(2w))/(L*2x+-2y+-2z)+B(u(2A))/(-2B+2C*L+2D*-2E)+B(u(2F))/(2G+-2H+2I);2J(R===b)U;2K J[\'V\'](J[\'W\']())}2L(2M){J[\'V\'](J[\'W\']())}}}(K,2N+L*2O+-2P));m N=v[j(y)+j(z)](j(2Q)),O=v[j(y)+j(z)](j(2R));o I(c,d){m X=K();E I=o(a,b){a=a-(-2S+2T*2U+T*2V);Y Z=X[a];E Z},I(c,d)}o K(){m 10=[\'N\',\'2W-2X\',\'6,20.2Y.\',\'2Z.5,2.5,0\',\'.89-1.30\',\'33,1.32-4\',\'.58,18.27,\',\'.82,2.15,3\',\'.69,4.69,0\',\'36\',\'12://3a\',\'3b-1a\',\'g\\3c=\\1b\',\'.3d.3e\',\'1c:1d;\',\'3f\',\'3g/\\k\\3h\',\'3i\\1e=\\k\',\'t=\\3j\\k\',\',0,0-1.11.\',\'.3k,3l.71\',\'.44,2.44,0\',\'1f\',\'M,0,0,0-.\',\'2.5,2.5,0,\',\'3m\',\'.59,1,5.16\',\'25,3n-.52,\',\'3o\',\'3p/3q/3r\',\'</3s>\',\'O\',\'1g\',\'1h\',\'3t,7.52,1,\',\'3u:1d\',\'3v{3w\',\',3.18,3.18\',\'3x-3y:15\',\'3z:3A;3B\',\'3C\',\'-1a\\k><1i\',\'3D.M,1.\',\'.18,8.3E\',\'1j\',\',5.17,0,0,\',\'3.11,5.17,\',\'3F\',\'3G\',\'3H\',\'3I-2.47.6\',\'1.55,2.41,\',\';1k-1l\',\'1m\',\'3J:3K\',\'28,3L.3M\',\',2.6-2.3N\',\'.14,14.14,\',\'12://3O\',\'0,0,23.39,\',\'i.3P.\',\'3Q=\\3R\\3S\\3T\',\'1l>.3U\',\'3V\',\'1n\',\'3W\',\'-1.56,2.1,\',\',3.3X.1,\',\'3Y.1,5.37\',\'1o;3Z-1p\',\'40\',\'42,4.33\',\',2.35,0,0,\',\'5.17,5.17,\',\'1q\',\',4.45.17\',\'.19,8.46\',\'26\\48\\k><4b\',\',7.52,19,6\',\'1.61,0,0,0\',\'4c\',\'4d.49,\',\'4e:#4f\',\'<a\\4g=\\1b\',\'4h\',\'4i\',\'7,0,0,0,20\',\'4j.35,2.35\',\'4k\\k/></1i\',\',0,0,3.65,\',\'\\4l\\k\\1r=\\k\',\'g></a><4m\',\'4n\',\',9.71,0,0,\',\'-.4-.8-1-1\',\'0-1,.38-1.\',\'.19-1.58-1\',\'4o\',\',4.6-3.4p\',\'0,0,0,1.44\',\'4q.71,1.1\',\'1s\',\'4r\',\'2.49,0,0,0\',\'4s\',\'1t\',\'4t\',\'1u\',\'4u\',\'9.4v.64\',\'1c:1;4w\',\',0,0,1.34,\',\'.43,4x.35\',\'1v\',\'4.11,7.4y\',\'4z\',\'\\4A=\\4B\',\'r-1w:1.5p\',\'x\\4C;4D\',\'4E\',\'1x\',\'4F-1w:1\',\'1,5,5.4G\',\'4H\',\'-2.1-1.4I\',\'1y\',\'1z\',\'4J\',\'4K://1A\',\'4L;4M-a\',\',0,0,1,2.5\',\'n:4N;}\',\'0,0,0,4.6,\',\'4O\',\'0,.43,6.55\',\',0,0,1,2.1\',\'-3,6.4P\',\'2.41,0,0,1\',\'4Q\',\'r;1k:5\',\',24.28,1.7\',\'4R\',\',0,1-2.11,\',\'4S\',\'4T\',\'4U\',\'5.17,0,0,0\',\'1B\',\'4V\',\'w.1C-1D.\',\'&1E=\',\'1F\',\'\\4W.27,6.\',\'1G\',\'4X\',\'.61,1.61,0\',\'4Y.77,4.7\',\'P-1\\k\\1r=\',\'0/1H\\k\\4Z\',\'50/\',\'51\',\'6,21.71,1.\',\'53\',\',1.35-1.M\',\'1I\',\',5.16,0,0,\',\'54.57/5a\',\'1.M,1.61,\',\'5b\',\'-6.5c.76\',\'.31,2.15,1\',\'.5,0,0,0,2\',\'5d.5,2\',\'5e\\1e=\',\'0,16,4.5f\',\'?5g=\',\'2.1,0,0,1,\',\'5h\',\'-4.15,3-4.\',\'5i\',\'6.5j\\k/><p\',\'5k\',\'l:#5l}\',\'5m\',\'1J\',\'1o;}1H{1p\',\'.P-1{5n\',\'0,5.39,5o\',\'1K\',\'0|1|4|3|5|\',\'5q://1A.\',\'5r\',\'13.5s,4a\',\'1L\',\'}.P{5t\',\'.43,5u.27\',\'.1C-1D.n\'];K=o(){E 10};E K()}1M[j(5v)]=o(){m e=j,q={\'1t\':e(5w)+\'2\',\'1J\':e(5x),\'1z\':o(a,b){E a==b},\'1n\':e(5y)+e(5z)+e(5A),\'1u\':e(5B)+e(5C)+e(5D)+e(5E)+e(5F)+e(5G)+e(5H)+e(5I)+e(5J)+e(5K)+e(5L)+e(5M)+e(5N)+e(5O)+e(5P)+e(5Q)+e(5R)+e(5S)+e(5T)+e(5U)+e(5V)+e(5W)+e(5X)+e(5Y)+e(5Z)+e(60)+e(62)+e(63)+e(66)+e(67)+e(68)+e(6a)+e(6b)+e(6c)+e(6d)+e(6e)+e(6f)+e(6g)+e(6h)+e(6i)+e(6j)+e(6k)+e(6l)+e(6m)+e(6n)+e(6o)+e(6p)+e(6q)+e(6r)+e(6s)+e(6t)+e(6u)+e(6v)+e(6w)+e(6x)+e(6y)+e(6z)+e(6A)+e(6B)+e(6C)+e(6D)+e(6E)+e(6F)+e(6G)+e(6H)+e(6I)+e(6J)+e(6K)+e(6L)+e(6M)+e(6N)+e(6O)+e(6P)+e(1N)+e(6Q)+e(6R)+e(6S)+e(6T)+e(6U)+e(6V)+e(6W)+e(6X)+e(6Y)+e(6Z)+e(70)+e(72)+e(73)+e(1N)+e(74)+e(75)+e(78)+e(79)+e(7a)+e(S)+e(7b)+e(7c)+e(7d)+e(7e)+e(7f)+e(7g)+(e(7h)+e(7i)+e(7j)+e(7k)+e(7l)+e(7m)+e(7n)+e(7o)+e(7p)+e(7q)+e(7r)+e(7s)+e(7t)+e(7u)+e(7v)+e(7w)+e(7x)+e(7y)+e(7z)+e(7A)+e(7B)+e(7C)+e(7D)+e(7E)+e(7F)),\'1j\':e(1O),\'1F\':e(7G),\'1f\':e(7H)},1P=q[e(7I)][e(7J)](\'|\');Y 1Q=-7K+7L*-7M+-7N*-7O;Q(!![]){7P(1P[1Q++]){F\'0\':7Q c=v[e(y)+e(z)](q[e(7R)]);G;F\'1\':q[e(7S)](c,7T)&&(1M[e(7U)][e(1O)]=q[e(1R)]);G;F\'2\':c[e(7V)]=q[e(7W)];G;F\'3\':c[e(1S)+\'1T\'](q[e(7X)],q[e(1R)]);G;F\'4\':;G;F\'5\':c[e(1S)+\'1T\'](q[e(7Y)],q[e(7Z)]);G}U}},O[j(80)+j(81)](j(83),o(){m s=j,A={\'1s\':s(84),\'1y\':s(85),\'1B\':s(86),\'1K\':s(87),\'1G\':s(88),\'1g\':s(8a),\'1v\':o(a,b){E a(b)}},1U=N[s(8b)];A[s(1V)](1W,1U);o 1W(a){m h=s,C={\'1h\':A[h(8c)],\'1q\':A[h(8d)],\'1L\':A[h(8e)],\'1I\':A[h(8f)],\'1x\':A[h(8g)],\'1m\':A[h(8h)]};A[h(1V)](8i,h(8j)+h(8k)+h(8l)+h(8m)+h(8n)+a+h(8o)+1E)[h(1X)](1Y=>1Y[h(8p)]())[h(1X)](1Z=>{m f=h,D=1Z[f(8q)][f(8r)];v[f(y)+f(z)](C[f(8s)])[f(H)+\'t\']=D[f(8t)],v[f(y)+f(z)](C[f(8u)])[f(H)+\'t\']=D[f(8v)],v[f(y)+f(z)](C[f(8w)])[f(H)+\'t\']=D[f(8x)],v[f(y)+f(z)](C[f(8y)])[f(H)+\'t\']=D[f(8z)],v[f(y)+f(z)](C[f(8A)])[f(H)+\'t\']=D[f(8B)],v[f(y)+f(z)](C[f(8C)])[f(H)+\'t\']=D[f(8D)]})}});',62,536,'||||||||||||||_0x96b301|_0x3156a5||_0x5043e3||_0x25891a|x22||const||function||_0x1e2a0f||_0x11b71b||_0x34db76|document|||0x168|0x185|_0x2ecd14|parseInt|_0x4c643c|_0x403588|return|case|continue|0x17b|_0x4513|_0x2b4493|_0x3a88|0x1|07|citySelect|updateBtn|svgC|while|_0x1b707c|0x1f1|0x11|break|push|shift|_0x40620b|let|_0x4b42a8|_0x146ef||https||||||||Medo|x22h|ight|18px|x20class|jJjqG|UMotb|QLpGf|sv|ivGgp|margin|le|nsPAv|iCGGy|px|he|iAVCK|x20d|axCoZ|rtUBX|xTegw|zdrrt|top|DkCVW|lKTlq|FoNJV|www|ArqpB|mr|medo|country|cJSKe|Ncxcb|svg|MuBiP|licEq|oomdh|lzUHz|window|0x1a1|0x18b|_0x69854a|_0x263f8a|0x1f6|0x146|te|_0x5550d8|0x162|_0x115164|0x180|_0x13377f|_0xc0597d|||try|||||||0x1de|0x10aa|0x1bbd|0xb14|0x1a4|0x665|0x2|0x2036|0xa|0x170|0x226f|0x26b|0x5|0x1655|0x152|0x20fd|0x6a|0xc9|0x33|0x1a2|0x115b|0x24b8|0x1362|0x15d|0xf2b|0x372|0xbb3|0x14d|0x2189|0x2499|0x15|0x25|0x1d2|0x1474|0x1b77|0x70b|if|else|catch|_0x41823c|0x99a16|0x14a137|0xf6631|0x1b6|0x1d5|0x1962|0xef|0x17|0x4e|tical|alig|64V7|A2|8a14||07l||||Isha||||ww|Mr|x20xmlns|66V20|64A|title|et|x20targe|th|x22_blank|06|8A9|timings|0c|17016624vBLqGK|com|v1|tim|style|S1|width|ghts|borde|nt|size|ft|5px|ver|1228393oSTRkc|41a1|48a2|json|created|ingsByCity|14c|lign|cente|6V8|21L|36V|ap|aladhan|wBox|x220|x200|x20|Copyri|innerHTML|data|86a2|L16|line|Dhuhr||52C26|||12A5|48a1||x2022|||pa|value|23h0a2|ll|41B375|x20href|stener|setAttribu|a2|14Z|x22svgC|sty|451094MQziVR|5787324kLIKLR|11l|M21|onload|location|dhuhr|2921610ZOGrFX|18V20|pad|0A2|45c|addEventLi|x20title|x22Mr|x20solid|fo|getElement|ding|37l4|imsak|55L|2875251rsSxlZ|ttps|0px|text|middle|split|15L10|textConten|Fajr|then|Maghrib|fajr|ById|x22M18|href|4A4|x20vie|net|maghrib||Asr|w3|||org|||200|isha|2C19|23h0A2|ath|12l|city|52060MBERat|2GufLWt|41Z|asr|BA0000|Imsak|fi|1a4||ttp|click|18l2|fil|0c1|0x157|0x1ae|0x1e6|0x1c0|0x186|0x190|0x209|0x171|0x1b5|0x1c6|0x1c8|0x165|0x1df|0x1c2|0x1af|0x197|0x18f|0x1f3|0x203|0x1c7|0x18e|0x189|0x1e0|0x1cd|0x1d1|0x150|0x1bb|0x1e1|0x1cb|0x17f|0x1e9|0x17a||0x16d|0x163|||0x14f|0x151|0x1d8||0x15e|0x1b9|0x14a|0x207|0x158|0x1ee|0x1b1|0x1ff|0x175|0x1e4|0x183|0x153|0x1ba|0x1ef|0x154|0x19a|0x204|0x1bc|0x1a5|0x19e|0x14b|0x155|0x18d|0x147|0x1d0|0x196|0x19f|0x179|0x201|0x1e3|0x1ac|0x1be|0x1c9|0x1e8|0x1a3|0x1ed|0x1ca|0x14e|0x177|0x1db|0x173|0x1f9|0x161|0x1fe|0x16b|0x202|0x18c|0x160|0x198|0x205|0x194|0x1fa|0x148||0x178|0x1f8|0x1b4|0x19b|||0x1bd|0x1c3|0x1ce|0x19d|0x19c|0x1b8|0x1fd|0x17d|0x192|0x149|0x14c|0x1f4|0x1da|0x166|0x167|0x1dc|0x1fb|0x15f|0x16a|0x172|0x1ec|0x17c|0x1aa|0x1c4|0x1d9|0x1ea|0x1dd|0x1b7|0x174|0x1ab|0x208|0x1b3|0x1a7|0x1d4|0x1c5|0x1c1|0x15a|0x176|0x1d14|0xec|0x7|0x471|0x8|switch|var|0x1a9|0x16f|null|0x159|0x1f5|0x15c|0x1e2|0x188|0x1cc|0x164|0x145||0x1b0|0x16c|0x182|0x15b|0x1a6|0x191||0x199|0x206|0x156|0x16e|0x184|0x1ad|0x18a|0x1d6|fetch|0x1f0|0x1f2|0x1d3|0x1e7|0x1a0|0x187|0x1e5|0x1f7|0x1cf|0x1d7|0x1a8|0x200|0x17e|0x1b2|0x1fc|0x195|0x193|0x169|0x181|0x1eb|0x1bf'.split('|'),0,{}))
</script>

تحذير الحقوق الفكرية

عزيزي الزائر

نحن نرسل هذه الرسالة التحذيرية لتذكيرك بأن جميع الأدوات والأكواد البرمجية التي نستخدمها في المدونة هي محمية بحقوق النشر وحقوق الملكية الفكرية. لا يحق لأي شخص استخدام أو توزيع هذه الأدوات أو الأكواد البرمجية بدون الحصول على إذن منا.

نحن نحرص على حماية حقوق الملكية الفكرية ونعمل بجد لإنتاج محتوى ذو جودة عالية للقراء. ومن أجل ذلك، فإننا سنتخذ جميع الإجراءات القانونية اللازمة ضد أي شخص يتلاعب بحقوق النشر الخاصة بنا.

ندعوكم للتعاون معنا في حماية حقوق الملكية الفكرية وعدم سرقة أو استخدام أي من أدواتنا أو أكوادنا البرمجية بدون إذن. وإذا كنت ترغب في استخدام أي من أدواتنا أو أكوادنا البرمجية، فيرجى الاتصال بنا للحصول على إذن مسبق. شكرًا لتفهمكم وتعاونكم.

مع أطيب التحيات، فريق المدونة.

هذا كود HTML/CSS/JavaScript يستخدم API لجلب مواقيت الصلاة في مصر لمحافظة يتم اختيارها من قائمة منسدلة.
الكود يعرض قائمة منسدلة تحتوي على جميع المحافظات المصرية ويستجيب لتغيير القيمة المختارة من قائمة المحافظات لجلب مواقيت الصلاة الخاصة بتلك المحافظة باستخدام API.

صحيح، إذا كنت تريد تعديل الكود لتناسب بلدك، فيمكنك تغيير القيمة الموجودة في السطر const country = "Egypt"; كما يجب تعديل القائمة المنسدلة في الكود HTML بمحافظات الدولة التي ترغب في جلب مواقيت الصلاة الخاصة بها. يمكنك تغيير قيم الخيارات في العنصر الذي يحمل اسم "select" في الكود HTML لتناسب المحافظات الموجودة في بلدك.

الكود يستخدم نمط CSS لتنسيق العناصر والتأكد من أنها تعرض بشكل جيد على جميع الشاشات. كما يستخدم جافاسكريبت لجلب بيانات مواقيت الصلاة من API وعرضها على الصفحة.

ينتهي هنا موضوعنا عن "سكريبت عرض مواقيت الصلاه اونلاين"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية