Membuat Halaman Redirect dengan Waktu Menggunakan Javascript


Saya ingin memberi tahu sedikit tutorial untuk membuat halaman yang bisa melempar (redirect) ke halaman yang akan di tuju. Langsung saja deh

 

<html>
<head>
<title>Contoh Redirect</title>
</head>
<script type="text/JavaScript">
<!--
function eventualRedirect(redirectTo, timeoutPeriod) {
setTimeout("location.href = redirectTo;",timeoutPeriod);
}
// -->
</script>

<script type="text/JavaScript">
<!--
setTimeout("location.href = 'http://www.temaram.co.cc';",5000);
-->
</script>

<body>
<br>
<br><br><br>
<center>
<h1>Anda akan dialihkan ke www[dot] Temaram [dot]co[dot]cc</h1>
<h1>Tunggu <script type="text/javascript">

// KONFIGURASI
var menit = 1; // Lamanya hitung mundur (dalam menit)
var detik = 5; // Detik standar (jangan diubah kecuali Anda tahu yang Anda lakukan)
var penghitung_detik = detik; // Set variabel detik yang lain untuk dimanipulasi

// HITUNG MUNDUR
penghitung_detik = 0;
function hitung_mundur() {
penghitung_detik--; // Setiap siklus 1 detik mengurangi nilainya 1 poin
if (penghitung_detik == -1) { // Deteksi detik ketika nilainya "0"
menit--; // Setiap siklus 1 menit mengurangi nilainya 1 poin
penghitung_detik = detik; // Me-reset detik untuk memulai hitung mundur menit yang baru
if (menit <= -1) { // Hitung mundur selesai
menit = 0;penghitung_detik = 0; // Menset menit dan detik ke "0"
clearTimeout(penghitung); // Stop hitung mundur
}
}
if (document.getElementById) {
document.getElementById("hitung_mundur_tampil").innerHTML=penghitung_detik; // Memasukkan nilai variabel menit dan detik untuk ditampilkan
}
penghitung=setTimeout("hitung_mundur()", 1000); // Set siklus penghitungan mundur (standar: 1 detik)
}

// INISIALISASI
if (document.all||document.getElementById)
document.write(' <b id="hitung_mundur_tampil">'+penghitung_detik+' </b>'); // Format tampilan hitung mundur di antarmuka
hitung_mundur();
</script> Detik </h1>
<br><br>
<div style="background-color:#a5ed3f;padding:10px;width:200px;cursor:pointer;">Anda akan dialihkan ke Temaram</div>
<br><br><div style="background-color:#dee3a6;padding:5px;width:300px;cursor:pointer;">
Terimakasih Telah menunggu.</div>
</body>
</html>


Demo

About these ads

, , , , , ,

  1. #1 by ayankcell on 20 Maret, 2012 - 4:53 pm

    Mantep banget…! Saya izin comot untuk diterapkan ilmunya, soalnya lagi seneng belajar kode-kode nih. Makasih banyak..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

%d bloggers like this: