Random dan Rotasi Konten Mengggunakan Javascript

Dalam proyek yang saya lakukan baru-baru ini ada kebutuhan untuk konten yang ditampilkan secara acak dalam bentuk salah satu dari mereka "Apakah Anda tahu" tipsnya ?. Ada 8 sampai 10 paragraf teks dan klien ingin menampilkan hanya satu yang dipilih secara acak. Sejak itu situs statis saya memutuskan untuk pergi dengan solusi front end. Saya sadar bahwa ada banyak solusi back-end yang lebih elegan namun Anda akan melihat bahwa ada keuntungan untuk ini juga.

Mari kita mulai !

Saya akan meletakan semua konten yang akan ditampilkan secara random/acak :

<ul id="tips">
 <li>... if you want to become a better coder you need to eat your vegetables?</li>
 <li>... it takes more time to code a web page then to make a pizza?</li>
 <li>... you should validate your code?</li>
 <li>... jQuery is your friend? For real!</li>
 <li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>

Idenya adalah untuk menyembunyikan semua konten dan kemudian menampilkannya secara acak memilih salah satunya dengan menggunakan JavaScript.

Jadi untuk menyembunyikan daftar konten di atas kita menggunakan kode CSS berikut:

#tips, #tips li{
 margin:0;
 padding:0;
 list-style:none;
 }
#tips{
 width:250px;
 font-size:16px;
 line-height:120%;
 }
#tips li{
 padding:20px;
 background:#e1e1e1;
 display:none; /* hide the items at first only */
 }

Untuk menampilkan salah satunya secara acak maka kita akan menggunakan script jQuery. Tentu saja Anda harus men-download file jQuery dan menyimpannya di suatu tempat pada server Anda dan di link dengan menempatkan kode ini di dalam tag <head> dokumen html Anda (link ke file jquery.js Anda). Atau anda bisa menempatkan javascript ini pada tag <head>..</head> html Anda :

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

Selanjutnya :

<script type="text/javascript">

this.randomtip = function(){
 var length = $("#tips li").length;
 var ran = Math.floor(Math.random()*length) + 1;
 $("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){ 
 randomtip();
});

</script>

Singkat bukan ?. Lihatlah demo (refreshlah halaman beberapa kali) untuk melihat cara kerjanya.

Mengambil Satu Langkah Selanjutnya

Jika fungsi sederhana ini tidak memuaskan Anda, di sini ada lagi dengan memodifikasi kode di atas sedikit kita bisa fade in / out konten yang memutar secara acak. Tentu saja kode tidak memungkin yang sama untuk menampilkan dua kali berturut-turut.

Perhatikan bahwa Anda dapat memodifikasi panjang jeda antara rotasi acak.

<script type="text/javascript">

this.randomtip = function(){

 var pause = 3000; // define the pause for each tip (in milliseconds) 
 var length = $("#tips li").length; 
 var temp = -1;  

 this.getRan = function(){
  // get the random number
  var ran = Math.floor(Math.random()*length) + 1;
  return ran;
 };
 this.show = function(){
  var ran = getRan();
  // to avoid repeating
  while (ran == temp){
   ran = getRan();
  }; 
  temp = ran;
  $("#tips li").hide(); 
  $("#tips li:nth-child(" + ran + ")").fadeIn("fast");  
 };
 
 show(); setInterval(show,pause);
 
};

$(document).ready(function(){ 
 randomtip();
});

</script>

Lihatlah demo ini untuk melihatnya hasilnya.

Tips Trik Alfanetcell

Random dan Rotasi Konten Mengggunakan Javascript