首页 > 其他分享 >JS脚本实现刷新页面,随机加载背景图片

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

时间:2023-11-07 13:00:10浏览次数:35  
标签:pics https gitee mlabs webp io JS 背景图片 加载

新建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>

标签:pics,https,gitee,mlabs,webp,io,JS,背景图片,加载
From: https://www.cnblogs.com/ilab/p/17814764.html

相关文章

  • js 拼接字符串带变量(js方法参数单双引号拼接的问题记录)
    小结:外面单引号,里面双引号,然后方法参数给转义的单引号即可(看下面的onClick事件即可)//刷新二级信号表格(增删改操作后)functionreloadSignal(subId){//清空$("#msgAll"+subId).empty();//js手工添加表格varhtmlStart='<spanstyle="posit......
  • window系统通过反向代理部署nodejs
       https://dev.to/petereysermans/hosting-a-node-js-application-on-windows-with-iis-as-reverse-proxy-397b ......
  • CSS3 实现动态旋转加载样式
    CSS3实现动态旋转加载样式要使用CSS3创建一个动态旋转加载样式,你可以使用CSS动画和旋转变换。下面是一个简单的示例:HTML:<divclass="loader"></div>CSS:.loader{width:50px;height:50px;border:4pxsolid#3498db;border-top:4pxsolidtransparent;......
  • http://localhost:xxxxx/sockjs-node/info?t=1699323049868
    http://localhost:xxxxx/sockjs-node/info?t=1699323049868 sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。解决办法: 配置devServer,然后重启项目1.在vue.config.js中找到devServer中加入 host:'l......
  • 使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为
    一个报表的查询,用ajax调用的Service,查询条件没有问题,后台也能返回数据,就一直返回Error提示,F12看到是因为返回json时出错了 在web.config的configuration加以下代码即可解决<system.web.extensions><scripting><webServices><jsonSerializationmaxJs......
  • js将数字转换为对应的中文数字
    /***将数字转换为中文*@param{}num*@returns*/exportconstchangeNumToHan=(num)=>{vararr1=['零','一','二','三','四','五','六','七','八','九'......
  • 在NestJS应用程序中使用 Unleash 实现功能切换的指南
    前言近年来,软件开发行业迅速发展,功能开关(FeatureToggle)成为了一种常见的开发实践。通过功能开关,可以在运行时动态地启用或禁用应用程序的特定功能,以提供更灵活的软件交付和配置管理。对于使用NestJS框架构建的应用程序而言,实现功能开关也是一项重要的任务。而Unleash是一个......
  • js 数组按指定字段转map-list结构
    js数组按指定字段转map-list结构背景介绍在开发过程中经常会出现接口返回整个数组,我们需要将数组进行二次处理,如下格式按照不同功能模块(type)进行数据拆分原始数据constlist=[{"type":"red","id":1,"name":"a","count":1}, {"type":"red","......
  • js获去select选中值
    我想获取select选中的value,或者text,或者……比如这个:第一个option第二个option一:JavaScript原生的方法1:拿到select对象:`varmyselect=document.getElementById("select");2:拿到选中项的索引:varindex=myselect.selectedIndex;//selectedIndex代表的是你所选中项的ind......
  • js之文档对象操作
    DOM:文档对象模型怎样选择对应的元素(即标签)?对元素能做哪些操作?DOM中将HTML文档视为树结构节点:网页中的所有内容叫节点。案例:网页开关灯渲染效果:......