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.

Trước tiên mình xin cảm ơn tất cả khách hàng đã luôn tin tưởng và ủng hộ mình trong suốt thời gian qua (2016 tới hiện tại).

Nhằm nâng cao chất lượng phục vụ Quý khách hàng và hoàn thiện chất lượng như hỗ trợ, template. Hôm nay ngày 04/2/2021 mình là Hòa Trần admin trang Giaodien.blog sẽ tiến hành mở một trang Feedback để khách hàng đã mua, sử dụng dịch vụ bên mình toàn quyền nhận xét đánh giá công khai ở trang này.

Từ những Feedback này những gì mình làm được và chưa làm được, từ đó mình sẽ rút ra được những kinh nghiệm, và hoàn thiện tốt dịch vụ bên mình.

Quý khách hàng có thể để lại nhận xét reviews tại trang Feedback

Tags: Blog JavaScript