Aplikasi Countdown

      Tak ada komentar pada Aplikasi Countdown

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-Typecontent=”text/html; charset=iso-8859-1“>
<title>RAMADHAN 1440 H</title>
<link rel=”shortcut iconhref=”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=”stylesheethref=”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=”centerstyle=”margin-top: 10px;“>
<tr>
<td align=”centerbgcolor=”#ffffffbackground=”segi6.pngvalign=”middleheight=”115px“>
<a target=”_blanktitle=”Klik untuk lihat Tuntunan Ramadhanhref=”https://www.dropbox.com/s/drf1phrlf1q2a9n/TUNTUNAN%20RAMADHAN%201440%20H.pdf“><button class=”btn btn-primary“><font color=”yellowsize=”4“><i class=”glyphicon glyphicon-book“></i> Tuntunan Ramadhan</font></button></a>&nbsp;
<a target=”_blanktitle=”Membaca AlQuran Onlinehref=”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=”yellowsize=”4“><i class=”glyphicon glyphicon-book“></i> AlQuran Online</font></button></a>&nbsp;
<a target=”_blanktitle=”Klik untuk lihat jadwal imsakiyah 1440 H kota Semaranghref=”http://www.suaramuhammadiyah.id/wp-content/uploads/sites/2/2019/04/imsakiyah1440h__-SEMARANG.pdf“><button class=”btn btn-primary“><font color=”yellowsize=”4“><i class=”glyphicon glyphicon-time“></i> Jadwal Semarang</font></button></a>&nbsp;
<a target=”_blanktitle=”Klik untuk lihat jadwal imsakiyah 1440 H kota-kota lainhref=”jadwal_shalat.htm“><button class=”btn btn-primary“><font color=”yellowsize=”4“><i class=”glyphicon glyphicon-time“></i> Jadwal Kota Lain</font></button></a>&nbsp;
<a target=”_blanktitle=”Klik untuk lihat Peta Arah Kiblathref=”http://masjid.unnes.ac.id/kiblat/“><button class=”btn btn-primary“><font color=”yellowsize=”4“><i class=”glyphicon glyphicon-globe“></i> Arah Kiblat</button></a>
</td>
</tr>
</table>
<table width=”98%align=”centerstyle=”margin-top: 10px;“>
<tr>
<td id=”td1bgcolor=”#000000width=”130pxalign=”centerstyle=”color: white;“>Artikel </td>
<td id=”td1valign=”middlealign=”rightbgcolor=”#f8f8f8” >
<marquee behavior=”scrolldirection=”leftonmouseover=”this.stop();onmouseout=”this.start();“>
<small>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”http://blogchem.com/rumahfiqih/“>Buku Islami Gratis</a>
&diams;&nbsp;<a target=”_blankhref=”http://masjid.unnes.ac.id/?p=556“>Marhaban Ya Ramadhan</a>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”http://masjid.unnes.ac.id/?p=567“>Waktu Utama Makan Sahur</a>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”https://rumaysho.com/401-semangat-di-bulan-ramadhan.html“>Keutamaan Bulan Ramadhan</a>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”https://www.dropbox.com/sh/4gvdwrppdr1jo5w/AABBIFN7Lbwt79jY9Arzlblea?dl=0&preview=Ramadhan+Bersama+Nabi+Tablet+Version.pdf“>Ramadhan Bersama Nabi SAW</a>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”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>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”https://rumaysho.com/11211-5-amalan-pelebur-dosa-di-bulan-ramadhan.html“>5 Amalan pelebur Dosa di Bulan Ramadhan</a>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”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>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”https://rumaysho.com/466-membedah-kesalahan-kesalahan-di-bulan-ramadhan.html“>Membedah Kesalahan-kesalahan di Bulan Ramadhan</a>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”https://rumaysho.com/1219-panduan-zakat-fithri.html“>Panduan Zakat Fithri</a>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”https://rumaysho.com/15929-panduan-singkat-zakat-maal-dan-zakat-fitrah.html“>Panduan Zakat Maal dan Fithri</a>
&nbsp;&diams;&nbsp;<a target=”_blankhref=”http://blogchem.com/rumahfiqih/“>Buku Islami Gratis</a>
</small>
</marquee>
</td>
</tr>
</table>
<table width=”98%align=”centerstyle=”margin-top: 10px;“>
<tr>
<td align=”centerbgcolor=”#ffefbf“>
<fieldset id=”fieldsetbgcolor=”#ffefbf“>
<center>
<br/>
<button class=”btn btn-success“>
<a title=”Free download buku Islami, wakaf dari Rumah Fiqih Indonesiahref=”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=”centerstyle=”margin-top: 10px;“>
<tr>
<td align=”centerbgcolor=”#FFD9FF“>
<fieldset id=”fieldsetbgcolor=”#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=”centerstyle=”margin-top: 10px;“>
<tr>
<td bgcolor=”#bfffef“>
<fieldset id=”fieldsetbgcolor=”#dfffbf“>
<div valign=”middlealign=”center“>
<center>
<a href=”https://time.is/Semarangid=”time_is_linkrel=”nofollowstyle=”font-size:100px“></a><span style=”font-size:50px; color: darkgreen“>WAKTU SEMARANG</span><br/>
<div id=”demotext2“><span id=”Semarang_z41cstyle=”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=”centerstyle=”margin-top: 10px; margin-bottom: 10px;” >
<tr>
<td align=”centerbgcolor=”#efffbf“>
<br/>
<fieldset id=”fieldsetbgcolor=”#dfffbf“>
<button class=”btn btn-warning“><span style=”font-size:20px; color: white“>JADWAL WAKTU SHALAT WILAYAH SEMARANG</span></button><br/>
<script type=”text/javascriptsrc=”PrayTimes.js“></script>
<div align=”centerid=”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=”buttonclass=”btn btn-primary btn-sm active“><font color=”whitestyle=”text-shadow: 1px 1px 1px #000000;“>Informasi dan Pesan Anda</font></button></h3>
<small>
<div class=”scroll“>
<div class=”fb-commentsdata-href=”http://blogchem.com/ramadhan/data-width=”100%data-numposts=”3data-order-by=”reverse_time“></div>
</small>
</div>
</td></tr>
</table>
<table width=”98%align=”centerstyle=”margin-top: 10px; margin-bottom: 50px;” >
<tr>
<td width=”100%bgcolor=”#686859height=”50px“>
<center>
<font color=”#ffffffsize=”2“>Copyright &copy; Kasmui, 2019. All Rights Reserved. Powered by </font><a href=”https://blogchem.comtarget=”_blank“><font color=”whitesize=”2“>Blogchem.com</a></font>
</center>
</td>
</tr>
</table>
<br/>
</body>

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *