Change Background After Time With JavaScript

Ở bài viết này mình sẽ hướng dẫn độc giả của TrollVL cách làm sao để thay đổi hình nền theo thời gian sử dụng Javascript. Các bạn có thể xem trước demo trước khi quyết định có nên thêm vào blog/website của mình hay không

Demo

Thực hiện

Bước 1: Thay thế đoạn CSS sau bằng các thuộc tính sẵn có của thẻ body trong template của bạn

body {background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglsfBpOeyqq7P2oBE-VwQ1hgenhUZH3_UHzPwhMJyP4YmtGNE_j9kpens8f2_cLxdUfW5SJm56idGfIf5j-hVh4ww3m68mRqu3SBIOPrizEOOoP95v8nRWLGt0uny_uGnll_zFu3DkHRU7/s0/YouTube-Logo-Widescreen-Wallpaper.jpg')no-repeat fixed center center;-webkit-transition: all 1.0s ease;-moz-transition: all 1.0s ease;transition: all 1.0s ease;}

Bước 2: Chèn đoạn Javascript sau vào trước thẻ đóng </head> trong template sau đó lưu lại và xem kết quả

<script type="text/javascript">
   var num;
   var temp=0;
   var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
   var preloads=[];
/* add any number of images here */
preload(
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglsfBpOeyqq7P2oBE-VwQ1hgenhUZH3_UHzPwhMJyP4YmtGNE_j9kpens8f2_cLxdUfW5SJm56idGfIf5j-hVh4ww3m68mRqu3SBIOPrizEOOoP95v8nRWLGt0uny_uGnll_zFu3DkHRU7/s0/YouTube-Logo-Widescreen-Wallpaper.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOgKqH20qntEYGwYAi52UXs4Gh_GcNLzDjGFJf4wd4pYS93P1NzOFr7zoU0tlbSgcGQOBs9muaE-QWZXOBN50f0br_2Hd6Bx-1ltwupYzuYcKMz_TnLM_u0-yvWH3ztZE1AUsVb1SG_VG6/s0/2.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHSCJwqDXwzw6CvqQwg5E4G5uuKZYGFI67au70wkiEK3b5Mlh7iEZvj_B7toA0FDuv6Jo4DfdPnQTWx_VBkBGrd3t3yp3-Io1B9Z83e0oMgmW5FDMpODk98H94WYSfSrOT_Z2Hr8-xlpFj/s0/1.jpg',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWfUp7sDy2KMPFbrwrSeNs3acG2Pop-1YWHEOMUqWM24V2bMDF6Q-YXJl1vhC0Lbql2vFKsckvJbfzBvjYotMv8EKZFaha_Ey8wyWKwFvW5oasY2_G9VsYC9UQXEcvV_4Gf5JbRkGkqdMd/s0/3.jpg'
);
function preload(){
for(var c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];
  }
 }
function rotateImages() {
   num=Math.floor(Math.random()*preloads.length);
if(num==temp){
   rotateImages();
 }
else{
   document.body.style.backgroundImage='url('+preloads[num].src+')';
   temp=num;
setTimeout(function(){rotateImages()},speed);
  }
 }

if(window.addEventListener){
   window.addEventListener('load',function(){setTimeout(function(){rotateImages()},speed)},false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',function(){setTimeout(function(){rotateImages()},speed)});
  }
 }
</script>

Tùy chỉnh:

• var speed=5000: Tương ứng với cứ 5s hình nền sẽ thay đổi
• Thay đổi những đường link màu đỏ thành hình ảnh nền của bạn