Hướng dẫn random hình nền bằng JavaScript

Hướng dẫn tự động thay đổi hình nền khi load trang cho blogspot, Hướng dẫn random hình nền bằng JavaScript đơn giản giúp cho blog của bạn sôi động hơn.

Đầu tiên viết CSS như sau:

<style>

#setbackground {

  width: 100%;

  height: 450px;

  border: 1px solid black;

  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFLMNcBGt9Nz5KL3_jrvvD1k7xAQgXfa-ISi1OCZo4yL5bB5KmEr6b7t6LG-M0LN2yAmc7l-17jWsKiretEtSKUDd_co3dHIiK2EROPBdnwBfn7NoAW2lvt282YgRKgfYOwjTyCSYvoq-/s16000/homepage-min.jpg');

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

}

</style>

Tiếp theo viết HTML

<div id='setbackground'>

</div>

Và cuối cùng viết đoạn JavaScript để xử lý như sau:

<script>

  //<![CDATA[

  var random = Math.floor(Math.random() * 6) + 0;

  var imagearray = ["url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJP1R5h-OU9hCNjTaw6GDgGRKYahP62oYrZnw_66ExrqTq0YYi_M2kxWc2-dfW4krXFjgq7E-_BNB3zQN1pZsXG9cBptz5SUKaSNKp-Jfo-6dkSak5BBc7MWEcU-PLKPkgYAACtaa0edA/s16000/background-1.jpg')",

                    "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHlsdNMsJR7MR5XAmAefpLcSmX4I5u79MZORX6oMGTyWqUEvs5EdfGwMSSWbq91i1uOhrTyZgqzuEs0ye_k6jvk1yr9_EuA77TzZ6pLlL36ONPk3io9-8HLJvWcxpc3E7WNthMv277Fhu/s16000/background-2.jpg')",

                    "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSRhuH_DSW8vyNbOt0g2Y9p0_vOtZGX-fSJsdVOse3GXLTJ8IyubbOFr5uiyrEcRQ0KV_rTqfUpDfxj5rjEOZ0qZbwMGHHysg27-qQ0ybuVp3RN4Q3rH8S8UywYMx4uhnR6NzV9G4VYHhI/s16000/background-3.jpg')",

                    "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeVBlrWnnJNczjhQHoncVQe6s9ZbnMdy2MjzP3PFJES_bhO7QSxS7kyLCi7onHAV7KAN325ciWD4SkaeuaFj49CIFzthjusw_yfDTo-7GV32wtkphUq-BqRv8hYuHXYFWTupnU8cUnX8QP/s16000/background-4.jpg')",

                    "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtzFuDGK9GZN5Sh82pqDj329lDwEUG_CLcxDjA5aZsMSsoxdr83Indx4RFzC6C0ShjUuQpuiOh8cCX4kqFENm94ySFELeVLwVxaaSXZFWrFKy4jJMq9ggQUFgTlqGMF3pfntqJexx_miiY/s16000/background-5.jpg')",

                    "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJj6PEBtLygvkkKGCVXyhqKYBfX-9LbrilWoKP_WcdCqzNj6qRsJC4FXANu1cr8XAZyOWvjcwJoy_RQMdVnOTiDaBwtu-zsBlPBFY5deJY10K7Vg0RURP0Bc5yrVWk-UL_vEQNFX0vfNYa/s16000/background-6.jpg')"];

  document.getElementById("setbackground").style.backgroundImage = imagearray[random];

  //]]>

</script>

Như đoạn JavaScript trên thì sẽ có 6 hình và khi load lại trang thì sẽ random 1 trong 6 hình làm hình nền.