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

Zalo 0971539681 Tư vấn & Hỗ trợ
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.

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



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


<style>
#setbackground {
  width: 100%;
  height: 450px;
  border: 1px solid black;
  background-image: url('https://1.bp.blogspot.com/-rgSj0WtOD98/X8WmQFpsfmI/AAAAAAAAAb8/Xfo4CmuI_gw4GOX9a9yRZ_2pBdC0-P4gQCLcBGAsYHQ/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://1.bp.blogspot.com/-RVaXkeXJSKg/X8WlkANYelI/AAAAAAAAAbY/hGKFBWZ2HOwiFQHiSPtE2hIEa82Ae-YrwCLcBGAsYHQ/s16000/background-1.jpg')",
                    "url('https://1.bp.blogspot.com/-ozEAkdOGRS0/X8WlkD2D9QI/AAAAAAAAAbQ/OQ21beMWV146lLshIYxcgEz2OIJwzUivACLcBGAsYHQ/s16000/background-2.jpg')",
                    "url('https://1.bp.blogspot.com/-DNnST4aKXM0/X8WlkB3FK3I/AAAAAAAAAbU/nTfrv9gBNbk0VeIPbd-Y-WAmmhwDU7spwCLcBGAsYHQ/s16000/background-3.jpg')",
                    "url('https://1.bp.blogspot.com/-7m63TZUjtaw/X8WlkmeR8xI/AAAAAAAAAbc/FEVmzTPEmT0-NAcpBp5W4f-NN8PEWZTmgCLcBGAsYHQ/s16000/background-4.jpg')",
                    "url('https://1.bp.blogspot.com/-zRZM7zR4gSc/X8WllJaEAcI/AAAAAAAAAbg/gYJBXLRv0R0-33LBjqZQRRCDHJFvDghwQCLcBGAsYHQ/s16000/background-5.jpg')",
                    "url('https://1.bp.blogspot.com/-xozGuFKfU00/X8WllMqQimI/AAAAAAAAAbk/z1auoPXrpCw9TW9J0jFw0MVzD6rGTwBagCLcBGAsYHQ/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.

Nhận xét

×