Pengin membuat aplikasi countdown sederhana? Silahkan copy skrip aplikasi countdown 1 Syawal 1440 H di bawah ini dan tempatkan pada folder tertentu di website anda. Perhatikan alamat link file javascript dan css. Contohnya dapat diakses melalui web http://blogchem.com/ramadhan/
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml“> <head><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1“> <title>RAMADHAN 1440 H</title> <link rel=”shortcut icon” href=”http://blogchem.com/shalat/kubahmua.png“> <script type=text/javascript> var iTanggalM = 0; var iTanggalH = 0; var iBulanM = 0; var iBulanH = 0; var iTahunM = 0; var iTahunH = 0; var iTahunJ = 0; function intPart(floatNum) { return(floatNum<-0.0000001? Math.ceil(floatNum-0.0000001) : Math.floor(floatNum+0.0000001)); } function hitung_Hijriah(d,m,y) { mPart = (m-13)/12; jd = intPart((1461*(y+4800+intPart(mPart)))/4)+ intPart((367*(m-1-12*(intPart(mPart))))/12)- intPart((3*(intPart((y+4900+intPart(mPart))/100)))/4)+d-32075; l = jd-1948440+10632; n = intPart((l-1)/10631); l = l-10631*n+354; j = (intPart((10985-l)/5316))*(intPart((50*l)/17719))+(intPart(l/5670))*(intPart((43*l)/15238)); l = l-(intPart((30-j)/15))*(intPart((17719*j)/50))-(intPart(j/16))*(intPart((15238*j)/43))+29; iBulanH = intPart((24*l)/709); iTanggalH = l-intPart((709*iBulanH)/24); iTahunH = 30*n+j-30; iBulanH -= 1; } function hitung_Tanggal(format) { var namaBulanE = new Array( “January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”); var namaBulanH = new Array( “Muharram”,”Safar”,”Rabi Al-Awwal”,”Rabi Al-Thani”,”Jumada Al-Ula”,”Jumada Al-Thani”,”Rajab”,”Shaban”,”Ramadan”,”Shawwal”,”Dhul Qada”,”Dhul Hijja”); var namaBulanI = new Array( “Januari”,”Februari”,”Maret”,”April”,”Mei”,”Juni”,”Juli”,”Agustus”,”September”,”Oktober”,”November”,”Desember”); var namaBulanHI = new Array( “Muharram”,”Safar”,”Rabi’ul Awal”,”Rabi’ul Akhir”,”Jumadil Awal”,”Jumadil Akhir”,”Rajab”,”Sya’ban”,”Ramadhan”,”Syawal”,”Dzul Qa’dah”,”Dzul Hijjah”); var namaBulanJ = new Array( “Suro”,”Sapar”,”Mulud”,”Ba’da Mulud”,”Jumadil Awal”,”Jumadil Akhir”,”Rejeb”,”Ruwah”,”Poso”,”Syawal”,”Dulkaidah”,”Besar”); var namaHariE = new Array(“Thursday”,”Friday”,”Saturday”,”Sunday”,”Monday”,”Tuesday”,”Wednesday”); var namaHariH = new Array(“Al-Hamis”,”Al-Jum’a”,”As-Sabt”,”Al-Ahad”,”Al-Itsnayna”,”Ats-Tsalatsa'”,”Al-Arba’a'”); var namaHariI = new Array(“Kamis”,”Jumat”,”Sabtu”,”Minggu”,”Senin”,”Selasa”,”Rabu”); var namaHariJ = new Array(“Wage”,”Kliwon”,”Legi”,”Pahing”,”Pon”,”Wage”,”Kliwon”); now = new Date(); iTanggalM = now.getDate(); iBulanM = now.getMonth(); iTahunM = now.getYear(); if(iTahunM<1900) { iTahunM += 1900 }; // Y2K hitung_Hijriah(iTanggalM,iBulanM,iTahunM); hr = Date.UTC(iTahunM,iBulanM,iTanggalM,0,0,0)/1000/60/60/24; iTahunJ = iTahunH+512; sHariE = namaHariE[hr%7]; //string nama hari : Inggris sHariH = “Yaum “+namaHariH[hr%7]; //string nama hari : Arab sHariI = namaHariI[hr%7]; //string nama hari : Indonesia sHariJ = namaHariJ[hr%5]; //string nama hari : Jawa (hari pasar) sBulanE = namaBulanE[iBulanM]; //string nama bulan : Masehi – Inggris sBulanH = namaBulanH[iBulanH]; //string nama bulan : Hijriah – Arab sBulanI = namaBulanI[iBulanM]; //string nama bulan : Masehi – Indonesia sBulanHI = namaBulanHI[iBulanH]; //string nama bulan : Hijriah – Indonesia sBulanJ = namaBulanJ[iBulanH]; //string nama bulan : Hijriah – Jawa //iTanggalM : int tanggal Masehi (Inggris/Indonesia) //iTanggalH : int tanggal Hijriah (Arab/Indonesia/Jawa) zTanggalM = iTanggalM<10? “0”+iTanggalM : iTanggalM; //int tanggal Masehi (Inggris/Indonesia), + leading zero zTanggalH = iTanggalH<10? “0”+iTanggalH : iTanggalH; //int tanggal Hijriah (Arab/Indonesia/Jawa), + leading zero iBulanM += 1; //int bulan Masehi (Inggris/Indonesia) iBulanH += 1; //int bulan Hijriah (Arab/Indonesia/Jawa) zBulanM = iBulanM<10? “0”+iBulanM : iBulanM; //int bulan Masehi (Inggris/Indonesia), + leading zero zBulanH = iBulanH<10? “0”+iBulanH : iBulanH; //int bulan Hijriah (Arab/Indonesia/Jawa), + leading zero //iTahunM : int tahun Masehi (Inggris/Indonesia) //iTahunH : int tahun Hijriah (Arab/Indonesia) //iTahunJ : int tahun Jawa //FORMAT : //1 (default) (Indonesia) : Selasa, 1 Januari 1980 //2 (English) : Tuesday, 1 January 1980 //3 (Indonesia + hari pasar) : Selasa Legi, 1 Januari 1980 //4 (Jawa) : Selasa Legi, 12 Sapar 1912 //5 (Arab/Hijriah) : Yaum Ats-Tsalatsa, 12 Safar 1400 H //6 (Indonesia/Hijriah) : Selasa, 12 Safar 1400 H //7 (English + Jawa :P) : Tuesday Legi, 12 Sapar 1912 //de-el-el? : masih banyak variasi? 😀 😀 😀 switch(format) { case 2 : { sDate = sHariE+”, “+iTanggalM+” “+sBulanE+” “+iTahunM;break; } case 3 : { sDate = sHariI+” “+sHariJ+”, “+iTanggalM+” “+sBulanI+” “+iTahunM;break; } case 4 : { sDate = sHariI+” “+sHariJ+”, “+iTanggalH+” “+sBulanJ+” “+iTahunJ;break; } case 5 : { sDate = sHariH+”, “+iTanggalH+” “+sBulanH+” “+iTahunH+” H”;break; } case 6 : { sDate = sHariI+”, “+iTanggalH+” “+sBulanHI+” “+iTahunH+” H”;break; } case 7 : { sDate = sHariI+” “+sHariJ+”, “+iTanggalM+” “+sBulanI+” “+iTahunM+” / “+iTanggalH+” “+sBulanHI+” “+iTahunH+” H / “+iTanggalH+” “+sBulanJ+” “+iTahunJ+” J”;break; } case 8 : { sDate = sHariE+” “+sHariJ+”, “+iTanggalH+” “+sBulanJ+” “+iTahunJ;break; } default : { sDate = sHariI+” “+sHariJ+”, “+iTanggalM+” “+sBulanI+” “+iTahunM;break; } } return(sDate); } function tulis_Tanggal(format) { sDate = hitung_Tanggal(format); document.write(sDate); } </script> <style> td, th {font-family: verdana; font-size: 30px; color: #404040;} #timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; width: 9em;} #timetable td, #timetable th {border-width: 1px; border-spacing: 1px; padding: 2px 4px; border-style: inset; border-color: #CCCCCC;} #timetable th {color:black; text-align: center; font-weight: bold; background-color: #F8F7F4;} fieldset { border-width: 1px; border-style: outset; border-collapse: collapse; border-color: green; } body { background-image: url(”); background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-color: #ffffbf; } #td1 {font-family: verdana; font-size: 20px; color: #404040;} </style> <style> #demotext { text-shadow: 4px 3px 0px #7A7A7A, 2px 2px 2px rgba(206,89,55,0); color: #ffd24c; background: #FFD9FF; } #demotext2 { color: #ffffff; background: #ffd9ff; text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); background: #bfffef; } </style> <style> p { text-align: center; font-size: 60px; margin-top: 0px; } </style> <link rel=”stylesheet” href=”bootstrap.min.css“> <script src=”jquery.min.js“></script> <script src=”bootstrap.min.js“></script> </head> <body > <div id=”fb-root“></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1095905597087936”; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> <table width=”98%” align=”center” style=”margin-top: 10px;“> <tr> <td align=”center” bgcolor=”#ffffff” background=”segi6.png” valign=”middle” height=”115px“> <a target=”_blank” title=”Klik untuk lihat Tuntunan Ramadhan” href=”https://www.dropbox.com/s/drf1phrlf1q2a9n/TUNTUNAN%20RAMADHAN%201440%20H.pdf“><button class=”btn btn-primary“><font color=”yellow” size=”4“><i class=”glyphicon glyphicon-book“></i> Tuntunan Ramadhan</font></button></a> <a target=”_blank” title=”Membaca AlQuran Online” href=”http://quran.ksu.edu.sa/index.php?l=id#aya=1_1&m=hafs&qaree=afasy&trans=id_indonesian“><button class=”btn btn-primary“><font color=”yellow” size=”4“><i class=”glyphicon glyphicon-book“></i> AlQuran Online</font></button></a> <a target=”_blank” title=”Klik untuk lihat jadwal imsakiyah 1440 H kota Semarang” href=”http://www.suaramuhammadiyah.id/wp-content/uploads/sites/2/2019/04/imsakiyah1440h__-SEMARANG.pdf“><button class=”btn btn-primary“><font color=”yellow” size=”4“><i class=”glyphicon glyphicon-time“></i> Jadwal Semarang</font></button></a> <a target=”_blank” title=”Klik untuk lihat jadwal imsakiyah 1440 H kota-kota lain” href=”jadwal_shalat.htm“><button class=”btn btn-primary“><font color=”yellow” size=”4“><i class=”glyphicon glyphicon-time“></i> Jadwal Kota Lain</font></button></a> <a target=”_blank” title=”Klik untuk lihat Peta Arah Kiblat” href=”http://masjid.unnes.ac.id/kiblat/“><button class=”btn btn-primary“><font color=”yellow” size=”4“><i class=”glyphicon glyphicon-globe“></i> Arah Kiblat</button></a> </td> </tr> </table> <table width=”98%” align=”center” style=”margin-top: 10px;“> <tr> <td id=”td1” bgcolor=”#000000” width=”130px” align=”center” style=”color: white;“>Artikel </td> <td id=”td1” valign=”middle” align=”right” bgcolor=”#f8f8f8” > <marquee behavior=”scroll” direction=”left” onmouseover=”this.stop();” onmouseout=”this.start();“> <small> ♦ <a target=”_blank” href=”http://blogchem.com/rumahfiqih/“>Buku Islami Gratis</a> ♦ <a target=”_blank” href=”http://masjid.unnes.ac.id/?p=556“>Marhaban Ya Ramadhan</a> ♦ <a target=”_blank” href=”http://masjid.unnes.ac.id/?p=567“>Waktu Utama Makan Sahur</a> ♦ <a target=”_blank” href=”https://rumaysho.com/401-semangat-di-bulan-ramadhan.html“>Keutamaan Bulan Ramadhan</a> ♦ <a target=”_blank” href=”https://www.dropbox.com/sh/4gvdwrppdr1jo5w/AABBIFN7Lbwt79jY9Arzlblea?dl=0&preview=Ramadhan+Bersama+Nabi+Tablet+Version.pdf“>Ramadhan Bersama Nabi SAW</a> ♦ <a target=”_blank” href=”https://docs.google.com/viewerng/viewer?url=https://rumaysho.com/wp-content/uploads/2018/04/24-Jam-di-Bulan-Ramadhan-2.pdf“>24 jam di Bulan Ramadhan</a> ♦ <a target=”_blank” href=”https://rumaysho.com/11211-5-amalan-pelebur-dosa-di-bulan-ramadhan.html“>5 Amalan pelebur Dosa di Bulan Ramadhan</a> ♦ <a target=”_blank” href=”https://docs.google.com/viewerng/viewer?url=https://rumaysho.com/wp-content/uploads/2018/04/Kajian-Dlingo-Semua-Jadi-Sia-Sia-di-Bulan-Ramadhan-Muhammad-Abduh-Tuasikal.pdf“>5 Perusak Amalam di Bulan Ramadhan</a> ♦ <a target=”_blank” href=”https://rumaysho.com/466-membedah-kesalahan-kesalahan-di-bulan-ramadhan.html“>Membedah Kesalahan-kesalahan di Bulan Ramadhan</a> ♦ <a target=”_blank” href=”https://rumaysho.com/1219-panduan-zakat-fithri.html“>Panduan Zakat Fithri</a> ♦ <a target=”_blank” href=”https://rumaysho.com/15929-panduan-singkat-zakat-maal-dan-zakat-fitrah.html“>Panduan Zakat Maal dan Fithri</a> ♦ <a target=”_blank” href=”http://blogchem.com/rumahfiqih/“>Buku Islami Gratis</a> </small> </marquee> </td> </tr> </table> <table width=”98%” align=”center” style=”margin-top: 10px;“> <tr> <td align=”center” bgcolor=”#ffefbf“> <fieldset id=”fieldset” bgcolor=”#ffefbf“> <center> <br/> <button class=”btn btn-success“> <a title=”Free download buku Islami, wakaf dari Rumah Fiqih Indonesia” href=”http://blogchem.com/rumahfiqih/” target=”_blank“><span style=”font-size:50px; color: #fffff2“>FREE DOWNLOAD BUKU ISLAMI</span></a> </button><br/><br/> </center> </fieldset> </td> </tr> </table> <table width=”98%” align=”center” style=”margin-top: 10px;“> <tr> <td align=”center” bgcolor=”#FFD9FF“> <fieldset id=”fieldset” bgcolor=”#FFD9FF“> <center> <span style=”font-size:50px; color: brown“>Countdown 1 Syawwal 1440 H</span><br/> <div id=”demotext“><p id=”demo“></p></div> <script> // Set the date we’re counting down to var countDownDate = new Date(“Jun 4, 2019 17:31:00”).getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate – now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id=”demo” document.getElementById(“demo”).innerHTML = days + ” Hari, ” + hours + ” Jam, “ + minutes + ” Menit, ” + seconds + ” Detik “; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById(“demo”).innerHTML = “Selamat Idul Fitri 1440 H”; } }, 1000); </script> </center> </fieldset> <br/> </td> </tr> </table> <table width=”98%” align=”center” style=”margin-top: 10px;“> <tr> <td bgcolor=”#bfffef“> <fieldset id=”fieldset” bgcolor=”#dfffbf“> <div valign=”middle” align=”center“> <center> <a href=”https://time.is/Semarang” id=”time_is_link” rel=”nofollow” style=”font-size:100px“></a><span style=”font-size:50px; color: darkgreen“>WAKTU SEMARANG</span><br/> <div id=”demotext2“><span id=”Semarang_z41c” style=”font-size:200px“></span><div> <script src=”t.js“></script> <script> time_is_widget.init({Semarang_z41c:{}}); </script> <br/> <button class=”btn btn-success“> <span style=”font-size:30px; color: white“> <script type=text/javascript>tulis_Tanggal(7);</script> </span> </button> </center> </div> <br/> </fieldset> </td> </tr> </table> <table width=”98%” align=”center” style=”margin-top: 10px; margin-bottom: 10px;” > <tr> <td align=”center” bgcolor=”#efffbf“> <br/> <fieldset id=”fieldset” bgcolor=”#dfffbf“> <button class=”btn btn-warning“><span style=”font-size:20px; color: white“>JADWAL WAKTU SHALAT WILAYAH SEMARANG</span></button><br/> <script type=”text/javascript” src=”PrayTimes.js“></script> <div align=”center” id=”table“></div> <script type=”text/javascript“> var date = new Date(); // today var times = prayTimes.getTimes(date, [-7.06745, 110.40263], +7); var list = [‘Fajr’, ‘Sunrise’, ‘Dhuhr’, ‘Asr’, ‘Maghrib’, ‘Isha’, ‘Midnight’]; html = ‘<font color=”red”>Shubuh: </font>’+times[list[0].toLowerCase()]+’, <font color=”red”>Dhuhur: </font>’+times[list[2].toLowerCase()]+’, <font color=”red”>Ashar: </font>’+times[list[3].toLowerCase()]+’, <font color=”red”>Maghrib: </font>’+times[list[4].toLowerCase()]+’, <font color=”red”>Isya: </font>’+times[list[5].toLowerCase()]; document.getElementById(‘table’).innerHTML = html; </script> </fieldset> <br/> </td> </tr> </table> <table width=”98%” align=”center” > <tr><td> <h3 align=”left“><button type=”button” class=”btn btn-primary btn-sm active“><font color=”white” style=”text-shadow: 1px 1px 1px #000000;“>Informasi dan Pesan Anda</font></button></h3> <small> <div class=”scroll“> <div class=”fb-comments” data-href=”http://blogchem.com/ramadhan/” data-width=”100%” data-numposts=”3” data-order-by=”reverse_time“></div> </small> </div> </td></tr> </table> <table width=”98%” align=”center” style=”margin-top: 10px; margin-bottom: 50px;” > <tr> <td width=”100%” bgcolor=”#686859” height=”50px“> <center> <font color=”#ffffff” size=”2“>Copyright © Kasmui, 2019. All Rights Reserved. Powered by </font><a href=”https://blogchem.com” target=”_blank“><font color=”white” size=”2“>Blogchem.com</a></font> </center> </td> </tr> </table> <br/> </body>