JS脚本实现刷新页面,随机加载背景图片

发布时间 2023-11-07 12:59:13作者: 风之夭夭

新建switch.js,内容如下:

	var imgs = [
	           "https://mlabs.gitee.io/pics/webp/tiankong002-mid.webp",
	           "https://mlabs.gitee.io/pics/webp/wallhaven-gp1q87.webp",
	           "https://mlabs.gitee.io/pics/webp/shanshui007small.webp",
	           "https://mlabs.gitee.io/pics/webp/shenlin001-small.webp",
	           "https://mlabs.gitee.io/pics/webp/shanshui005-small.webp",
	           "https://mlabs.gitee.io/pics/webp/shanshui005-mid.webp",
	           "https://mlabs.gitee.io/pics/webp/shanshui004-small.webp",
	           "https://mlabs.gitee.io/pics/webp/shanshui003-samll.webp",
	           "https://mlabs.gitee.io/pics/webp/jianzhou001-small.webp",
	           "https://mlabs.gitee.io/pics/webp/wallhaven-exvvqk.webp",
	           "https://mlabs.gitee.io/pics/webp/tianyuan001-small.webp",
	           "https://mlabs.gitee.io/pics/webp/yuzhou001-small.webp",
	           ];
	var index=Math.floor(Math.random()*imgs.length);;
	var img = imgs[index];
    document.write("<BODY BACKGROUND="+img+"  no-repeat>");

新建switch.html,内容如下:

<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Switch</title>
	<script src="./switch.js"></script>
	<style>
        body {
	         background-color: #efefef;
             background-repeat: no-repeat; 
		     background-attachment: fixed; 
		     background-position: center 0; 
		     background-size: cover; 
    	}
     </style>
</head>
<body>
</body>
</html>