Waktu Solat Terkini<\/title><\/p>\n<style>\nbody {\n font-family: sans-serif;\n font-size: 14px;\n color: #FFF;\n padding: 10px;\n margin: 0;\n background-color: #000;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n.solat-wrapper {\n display: flex;\n gap: 60px;\n}\n.kiri, .kanan {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.tajuk {\n font-weight: bold;\n font-size: 14px;\n color: #FFF;\n text-transform: uppercase;\n margin-top: 10px;\n text-align: center;\n}\n#nextSolatName {\n font-size: 14px;\n margin-bottom: 6px;\n text-align: center;\n}\n#extraInfo {\n margin-bottom: 6px;\n text-align: center;\n}\n.baris-3 {\n display: grid;\n grid-template-rows: repeat(2, auto);\n gap: 4px;\n justify-items: center;\n}\n.baris-3 span { margin-right: 10px; }\n.baris-3 .atas span, .baris-3 .bawah span { display: inline-block; }\n.semasa { color: green; }\n.akan-datang { color: #d4af37; }\n.separator { margin: 0 6px; color: #999; user-select: none; }<\/p>\n<p>\/* TIMER PROGRESS BULATAN *\/\n.timer-wrapper {\n display: flex;\n gap: 10px;\n margin-bottom: 6px;\n}\n.circle-svg {\n transform: rotate(-90deg);\n}\n.circle-bg {\n fill: none;\n stroke: #333;\n stroke-width: 6;\n}\n.circle-progress {\n fill: none;\n stroke: #d4af37;\n stroke-width: 6;\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s linear;\n}\n.timer-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n.timer-container {\n position: relative;\n width: 70px;\n height: 70px;\n transition: transform 0.3s ease-in-out;\n}\n.timer-container span.label {\n display: block;\n font-size: 10px;\n color: #FFF;\n margin-top: 2px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"solat-wrapper\">\n <\/p>\n<div class=\"kiri\">\n<div id=\"extraInfo\">Loading\u2026<\/div>\n<div id=\"solatInline\" class=\"baris-3\">\n<div class=\"atas\"><\/div>\n<div class=\"bawah\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"kanan\">\n <\/p>\n<div id=\"nextSolatName\">Waktu solat seterusnya: Loading\u2026<\/div>\n<p> <\/p>\n<div class=\"timer-wrapper\">\n<div class=\"timer-container\" id=\"timerHours\">\n <svg width=\"70\" height=\"70\" class=\"circle-svg\">\n <circle class=\"circle-bg\" cx=\"35\" cy=\"35\" r=\"30\"><\/circle>\n <circle class=\"circle-progress\" cx=\"35\" cy=\"35\" r=\"30\" stroke-dasharray=\"188.4\" stroke-dashoffset=\"188.4\"><\/circle>\n <\/svg><\/p>\n<div class=\"timer-text\">\n<div id=\"hours\">—<\/div>\n<p><span class=\"label\">Jam<\/span><\/div>\n<\/p><\/div>\n<div class=\"timer-container\" id=\"timerMinutes\">\n <svg width=\"70\" height=\"70\" class=\"circle-svg\">\n <circle class=\"circle-bg\" cx=\"35\" cy=\"35\" r=\"30\"><\/circle>\n <circle class=\"circle-progress\" cx=\"35\" cy=\"35\" r=\"30\" stroke-dasharray=\"188.4\" stroke-dashoffset=\"188.4\"><\/circle>\n <\/svg><\/p>\n<div class=\"timer-text\">\n<div id=\"minutes\">—<\/div>\n<p><span class=\"label\">Minit<\/span><\/div>\n<\/p><\/div>\n<div class=\"timer-container\" id=\"timerSeconds\">\n <svg width=\"70\" height=\"70\" class=\"circle-svg\">\n <circle class=\"circle-bg\" cx=\"35\" cy=\"35\" r=\"30\"><\/circle>\n <circle class=\"circle-progress\" cx=\"35\" cy=\"35\" r=\"30\" stroke-dasharray=\"188.4\" stroke-dashoffset=\"188.4\"><\/circle>\n <\/svg><\/p>\n<div class=\"timer-text\">\n<div id=\"seconds\">—<\/div>\n<p><span class=\"label\">Saat<\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"tajuk\">Zon SGR01-Selangor<\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\nasync function getHijriDate() {\n const now = new Date();\n const yyyy = now.getFullYear();\n const mm = now.getMonth() + 1;\n const dd = now.getDate();\n const url = `https:\/\/api.aladhan.com\/v1\/gToH?date=${dd}-${mm}-${yyyy}`;\n try{ const res=await fetch(url); const data=await res.json(); if(data.code===200) return data.data.hijri; } catch{return null;}\n}<\/p>\n<p>function namaHari(tarikh){const hariMelayu=['Ahad','Isnin','Selasa','Rabu','Khamis','Jumaat','Sabtu']; return hariMelayu[tarikh.getDay()];}\nfunction toTimeObj(timeStr){const [h,m]=timeStr.split(':').map(Number); const now=new Date(); const target=new Date(now); target.setHours(h,m,0,0); if(target<now) target.setDate(now.getDate()+1); return target;}\n\nfunction updateCountdown(startTime,targetTime,name){\n const now=new Date();\n let diff=Math.floor((targetTime-now)\/1000);\n if(diff<0) diff+=86400;\n\n const totalSeconds=Math.floor((targetTime-startTime)\/1000);\n\n const h=Math.floor(diff\/3600);\n const m=Math.floor((diff%3600)\/60);\n const s=diff%60;\n\n document.getElementById('hours').textContent=String(h).padStart(2,'0');\n document.getElementById('minutes').textContent=String(m).padStart(2,'0');\n document.getElementById('seconds').textContent=String(s).padStart(2,'0');\n\n \/\/ Nama solat + waktu sebenar\n document.getElementById('nextSolatName').textContent=`Waktu solat seterusnya: ${name} (${targetTime.getHours().toString().padStart(2,'0')}:${targetTime.getMinutes().toString().padStart(2,'0')})`;\n\n const circleHours=document.querySelectorAll('.circle-progress')[0];\n const circleMinutes=document.querySelectorAll('.circle-progress')[1];\n const circleSeconds=document.querySelectorAll('.circle-progress')[2];\n\n const elapsed=totalSeconds-diff;\n circleHours.style.strokeDashoffset=188.4*(1-(h*3600+m*60+s)\/totalSeconds);\n circleMinutes.style.strokeDashoffset=188.4*(1-m\/60);\n circleSeconds.style.strokeDashoffset=188.4*(1-s\/60);\n\n \/\/ Effect denyut \u22645 minit\n const timerContainers=[document.getElementById('timerHours'),document.getElementById('timerMinutes'),document.getElementById('timerSeconds')];\n if(diff<=300){\n timerContainers.forEach(tc=>{\n const scale=1+0.05*Math.sin(Date.now()\/200);\n tc.style.transform=`scale(${scale})`;\n });\n } else {\n timerContainers.forEach(tc=>tc.style.transform='scale(1)');\n }<\/p>\n<p> updateExtraInfo();\n}<\/p>\n<p>async function updateExtraInfo(){\n const now=new Date();\n const hari=namaHari(now);\n const tarikhMasihi=now.toLocaleDateString('ms-MY',{day:'numeric',month:'long',year:'numeric'});\n const hijri=await getHijriDate();\n let tarikhHijri=hijri?`${hijri.day} ${hijri.month.en} ${hijri.year}H`:'\u2014';\n document.getElementById('extraInfo').innerHTML=`${hari} <span class=\"separator\">|<\/span> ${tarikhMasihi} <span class=\"separator\">|<\/span> ${tarikhHijri}`;\n}<\/p>\n<p>fetch('https:\/\/api.aladhan.com\/v1\/timingsByCity?city=Hulu%20Langat&country=Malaysia&method=9')\n.then(r=>r.json())\n.then(data=>{\n const t=data.data.timings;\n const nama={Fajr:'Subuh',Sunrise:'Syuruk',Dhuhr:'Zohor',Asr:'Asar',Maghrib:'Maghrib',Isha:'Isyak'};\n const keys=['Fajr','Sunrise','Dhuhr','Asr','Maghrib','Isha'];<\/p>\n<p> const now=new Date();\n const nowMin=now.getHours()*60+now.getMinutes();\n const toMin=(str)=>{const [h,m]=str.split(':').map(Number); return h*60+m;};<\/p>\n<p> let current=null,next=null;\n for(let i=0;i<keys.length;i++){\n const curMin=toMin(t[keys[i]]);\n const nextMin=keys[i+1]?toMin(t[keys[i+1]]):1440;\n if(nowMin>=curMin && nowMin<nextMin){\n current=keys[i];\n next=keys[i+1]||'Fajr';\n break;\n }\n }\n\n const startTime=toTimeObj(t[current]);\n const targetTime=toTimeObj(t[next]);\n setInterval(()=>{updateCountdown(startTime,targetTime,nama[next]);},1000);<\/p>\n<p> \/\/ baris 3 kiri\n const bar=document.getElementById('solatInline');\n const atas=bar.querySelector('.atas'); const bawah=bar.querySelector('.bawah');\n atas.innerHTML='';bawah.innerHTML='';\n keys.forEach((k,i)=>{\n const span=document.createElement('span');\n span.textContent=`${nama[k]}: ${t[k]}`;\n if(k===current) span.classList.add('semasa');\n else if(k===next) span.classList.add('akan-datang');\n if(i<=2) atas.appendChild(span);\n else bawah.appendChild(span);\n });\n\n updateExtraInfo();\n});\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Waktu Solat Terkini Loading\u2026 Waktu solat seterusnya: Loading\u2026 — Jam — Minit — Saat Zon SGR01-Selangor<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11350","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/pages\/11350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/comments?post=11350"}],"version-history":[{"count":11,"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/pages\/11350\/revisions"}],"predecessor-version":[{"id":11355,"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/pages\/11350\/revisions\/11355"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/media?parent=11350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11350,"date":"2025-10-31T15:29:50","date_gmt":"2025-10-31T07:29:50","guid":{"rendered":"https:\/\/www.ukm.my\/pusatislam\/?page_id=11350"},"modified":"2025-10-31T15:58:42","modified_gmt":"2025-10-31T07:58:42","slug":"waktu-solat","status":"publish","type":"page","link":"https:\/\/www.ukm.my\/pusatislam\/waktu-solat\/","title":{"rendered":"Waktu Solat"},"content":{"rendered":"

\n
\n
\n
\nWaktu Solat Terkini<\/title><\/p>\n<style>\nbody {\n font-family: sans-serif;\n font-size: 14px;\n color: #FFF;\n padding: 10px;\n margin: 0;\n background-color: #000;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n.solat-wrapper {\n display: flex;\n gap: 60px;\n}\n.kiri, .kanan {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n.tajuk {\n font-weight: bold;\n font-size: 14px;\n color: #FFF;\n text-transform: uppercase;\n margin-top: 10px;\n text-align: center;\n}\n#nextSolatName {\n font-size: 14px;\n margin-bottom: 6px;\n text-align: center;\n}\n#extraInfo {\n margin-bottom: 6px;\n text-align: center;\n}\n.baris-3 {\n display: grid;\n grid-template-rows: repeat(2, auto);\n gap: 4px;\n justify-items: center;\n}\n.baris-3 span { margin-right: 10px; }\n.baris-3 .atas span, .baris-3 .bawah span { display: inline-block; }\n.semasa { color: green; }\n.akan-datang { color: #d4af37; }\n.separator { margin: 0 6px; color: #999; user-select: none; }<\/p>\n<p>\/* TIMER PROGRESS BULATAN *\/\n.timer-wrapper {\n display: flex;\n gap: 10px;\n margin-bottom: 6px;\n}\n.circle-svg {\n transform: rotate(-90deg);\n}\n.circle-bg {\n fill: none;\n stroke: #333;\n stroke-width: 6;\n}\n.circle-progress {\n fill: none;\n stroke: #d4af37;\n stroke-width: 6;\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s linear;\n}\n.timer-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n}\n.timer-container {\n position: relative;\n width: 70px;\n height: 70px;\n transition: transform 0.3s ease-in-out;\n}\n.timer-container span.label {\n display: block;\n font-size: 10px;\n color: #FFF;\n margin-top: 2px;\n}\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"solat-wrapper\">\n <\/p>\n<div class=\"kiri\">\n<div id=\"extraInfo\">Loading\u2026<\/div>\n<div id=\"solatInline\" class=\"baris-3\">\n<div class=\"atas\"><\/div>\n<div class=\"bawah\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"kanan\">\n <\/p>\n<div id=\"nextSolatName\">Waktu solat seterusnya: Loading\u2026<\/div>\n<p> <\/p>\n<div class=\"timer-wrapper\">\n<div class=\"timer-container\" id=\"timerHours\">\n <svg width=\"70\" height=\"70\" class=\"circle-svg\">\n <circle class=\"circle-bg\" cx=\"35\" cy=\"35\" r=\"30\"><\/circle>\n <circle class=\"circle-progress\" cx=\"35\" cy=\"35\" r=\"30\" stroke-dasharray=\"188.4\" stroke-dashoffset=\"188.4\"><\/circle>\n <\/svg><\/p>\n<div class=\"timer-text\">\n<div id=\"hours\">—<\/div>\n<p><span class=\"label\">Jam<\/span><\/div>\n<\/p><\/div>\n<div class=\"timer-container\" id=\"timerMinutes\">\n <svg width=\"70\" height=\"70\" class=\"circle-svg\">\n <circle class=\"circle-bg\" cx=\"35\" cy=\"35\" r=\"30\"><\/circle>\n <circle class=\"circle-progress\" cx=\"35\" cy=\"35\" r=\"30\" stroke-dasharray=\"188.4\" stroke-dashoffset=\"188.4\"><\/circle>\n <\/svg><\/p>\n<div class=\"timer-text\">\n<div id=\"minutes\">—<\/div>\n<p><span class=\"label\">Minit<\/span><\/div>\n<\/p><\/div>\n<div class=\"timer-container\" id=\"timerSeconds\">\n <svg width=\"70\" height=\"70\" class=\"circle-svg\">\n <circle class=\"circle-bg\" cx=\"35\" cy=\"35\" r=\"30\"><\/circle>\n <circle class=\"circle-progress\" cx=\"35\" cy=\"35\" r=\"30\" stroke-dasharray=\"188.4\" stroke-dashoffset=\"188.4\"><\/circle>\n <\/svg><\/p>\n<div class=\"timer-text\">\n<div id=\"seconds\">—<\/div>\n<p><span class=\"label\">Saat<\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"tajuk\">Zon SGR01-Selangor<\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\nasync function getHijriDate() {\n const now = new Date();\n const yyyy = now.getFullYear();\n const mm = now.getMonth() + 1;\n const dd = now.getDate();\n const url = `https:\/\/api.aladhan.com\/v1\/gToH?date=${dd}-${mm}-${yyyy}`;\n try{ const res=await fetch(url); const data=await res.json(); if(data.code===200) return data.data.hijri; } catch{return null;}\n}<\/p>\n<p>function namaHari(tarikh){const hariMelayu=['Ahad','Isnin','Selasa','Rabu','Khamis','Jumaat','Sabtu']; return hariMelayu[tarikh.getDay()];}\nfunction toTimeObj(timeStr){const [h,m]=timeStr.split(':').map(Number); const now=new Date(); const target=new Date(now); target.setHours(h,m,0,0); if(target<now) target.setDate(now.getDate()+1); return target;}\n\nfunction updateCountdown(startTime,targetTime,name){\n const now=new Date();\n let diff=Math.floor((targetTime-now)\/1000);\n if(diff<0) diff+=86400;\n\n const totalSeconds=Math.floor((targetTime-startTime)\/1000);\n\n const h=Math.floor(diff\/3600);\n const m=Math.floor((diff%3600)\/60);\n const s=diff%60;\n\n document.getElementById('hours').textContent=String(h).padStart(2,'0');\n document.getElementById('minutes').textContent=String(m).padStart(2,'0');\n document.getElementById('seconds').textContent=String(s).padStart(2,'0');\n\n \/\/ Nama solat + waktu sebenar\n document.getElementById('nextSolatName').textContent=`Waktu solat seterusnya: ${name} (${targetTime.getHours().toString().padStart(2,'0')}:${targetTime.getMinutes().toString().padStart(2,'0')})`;\n\n const circleHours=document.querySelectorAll('.circle-progress')[0];\n const circleMinutes=document.querySelectorAll('.circle-progress')[1];\n const circleSeconds=document.querySelectorAll('.circle-progress')[2];\n\n const elapsed=totalSeconds-diff;\n circleHours.style.strokeDashoffset=188.4*(1-(h*3600+m*60+s)\/totalSeconds);\n circleMinutes.style.strokeDashoffset=188.4*(1-m\/60);\n circleSeconds.style.strokeDashoffset=188.4*(1-s\/60);\n\n \/\/ Effect denyut \u22645 minit\n const timerContainers=[document.getElementById('timerHours'),document.getElementById('timerMinutes'),document.getElementById('timerSeconds')];\n if(diff<=300){\n timerContainers.forEach(tc=>{\n const scale=1+0.05*Math.sin(Date.now()\/200);\n tc.style.transform=`scale(${scale})`;\n });\n } else {\n timerContainers.forEach(tc=>tc.style.transform='scale(1)');\n }<\/p>\n<p> updateExtraInfo();\n}<\/p>\n<p>async function updateExtraInfo(){\n const now=new Date();\n const hari=namaHari(now);\n const tarikhMasihi=now.toLocaleDateString('ms-MY',{day:'numeric',month:'long',year:'numeric'});\n const hijri=await getHijriDate();\n let tarikhHijri=hijri?`${hijri.day} ${hijri.month.en} ${hijri.year}H`:'\u2014';\n document.getElementById('extraInfo').innerHTML=`${hari} <span class=\"separator\">|<\/span> ${tarikhMasihi} <span class=\"separator\">|<\/span> ${tarikhHijri}`;\n}<\/p>\n<p>fetch('https:\/\/api.aladhan.com\/v1\/timingsByCity?city=Hulu%20Langat&country=Malaysia&method=9')\n.then(r=>r.json())\n.then(data=>{\n const t=data.data.timings;\n const nama={Fajr:'Subuh',Sunrise:'Syuruk',Dhuhr:'Zohor',Asr:'Asar',Maghrib:'Maghrib',Isha:'Isyak'};\n const keys=['Fajr','Sunrise','Dhuhr','Asr','Maghrib','Isha'];<\/p>\n<p> const now=new Date();\n const nowMin=now.getHours()*60+now.getMinutes();\n const toMin=(str)=>{const [h,m]=str.split(':').map(Number); return h*60+m;};<\/p>\n<p> let current=null,next=null;\n for(let i=0;i<keys.length;i++){\n const curMin=toMin(t[keys[i]]);\n const nextMin=keys[i+1]?toMin(t[keys[i+1]]):1440;\n if(nowMin>=curMin && nowMin<nextMin){\n current=keys[i];\n next=keys[i+1]||'Fajr';\n break;\n }\n }\n\n const startTime=toTimeObj(t[current]);\n const targetTime=toTimeObj(t[next]);\n setInterval(()=>{updateCountdown(startTime,targetTime,nama[next]);},1000);<\/p>\n<p> \/\/ baris 3 kiri\n const bar=document.getElementById('solatInline');\n const atas=bar.querySelector('.atas'); const bawah=bar.querySelector('.bawah');\n atas.innerHTML='';bawah.innerHTML='';\n keys.forEach((k,i)=>{\n const span=document.createElement('span');\n span.textContent=`${nama[k]}: ${t[k]}`;\n if(k===current) span.classList.add('semasa');\n else if(k===next) span.classList.add('akan-datang');\n if(i<=2) atas.appendChild(span);\n else bawah.appendChild(span);\n });\n\n updateExtraInfo();\n});\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Waktu Solat Terkini Loading\u2026 Waktu solat seterusnya: Loading\u2026 — Jam — Minit — Saat Zon SGR01-Selangor<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11350","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/pages\/11350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/comments?post=11350"}],"version-history":[{"count":11,"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/pages\/11350\/revisions"}],"predecessor-version":[{"id":11355,"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/pages\/11350\/revisions\/11355"}],"wp:attachment":[{"href":"https:\/\/www.ukm.my\/pusatislam\/wp-json\/wp\/v2\/media?parent=11350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}