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.

Bài viết: Hướng dẫn random hình nền bằng JavaScript được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog JavaScript