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://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.

Hướng dẫn random hình nền bằng JavaScript được thiết kế đẹp hiện đại chuyên nghiệp chuẩn seo, tối ưu code giúp trang blogspot load nhanh

Chi tiết liên hệ ĐT / Zalo: 097 1539 681

Khi mua template các bạn được hỗ trợ cài đặt hoàn chỉnh, hỗ trợ qua Teamviewer, Ultraviewer

Tags: Blog JavaScript