Js实现网页随机背景图

一、前言

emmm,纯html+css+js实现,css是为了让图片适应窗口(js调整图片我暂时不会)

就用了个随机数,,没sql好像实现不了统计文件夹图片文件数量(俺不会a,菜鸟勿喷),需要的参考参考,具体文件以及细节笔记都注释了哈~

二、代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript实现访问随机背景图</title>
<style type="text/css">
/*设置背景图片铺满*/
body{
/*设置背景图片水平垂直居中*/
background-postion:center;
/*设置背景图不重复*/
background-repeat:no-repeat;
/*设置图片基于盒子大小自适应缩放保持比例*/
background-size:cover;

}
</style>
</head>
<body onLoad="loadingChange();">
<!--
 也可以 onLoad 加载时自动执行方法
 onLoad = "javascript:loadingChange();"	
 -->
<script>
function loadingChange(){
	var FileNum,name,img
	//文件夹内图片文件数量(图片从0开始命名如0.jpg)
	fileNum = 15
	//随机数生成一个文件名.jpg
	name = Math.floor(Math.random()*fileNum)
	img=name
	var imgs
	imgs= "img/"+name+".jpg"
	//得到的imgs图片路径作为背景(图片存放在img文件夹下)
	//随机获取本地图片后输出到网页
	document.body.style.backgroundImage="url("+imgs+")" ;	

	/*自动加载设置超时自动执行实现
	 setTimeout("loadingChange()",1000); //1000ms后自动执行*/

}
</script>
</body>
</html>

相关推荐

  1. js随机生成背景

    2024-03-21 00:32:02       53 阅读
  2. css 实现背景背景色正片叠底

    2024-03-21 00:32:02       30 阅读
  3. js动态几何背景

    2024-03-21 00:32:02       52 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-21 00:32:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-21 00:32:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-21 00:32:02       87 阅读
  4. Python语言-面向对象

    2024-03-21 00:32:02       96 阅读

热门阅读

  1. .net core 接入nacos

    2024-03-21 00:32:02       44 阅读
  2. 力扣-3. 无重复字符的最长子串

    2024-03-21 00:32:02       44 阅读
  3. 智慧能源-数字化能源转型革命

    2024-03-21 00:32:02       42 阅读
  4. tcp拥塞控制详解

    2024-03-21 00:32:02       37 阅读
  5. C语言学习笔记day10

    2024-03-21 00:32:02       42 阅读
  6. 在AI中无所不在的微积分

    2024-03-21 00:32:02       41 阅读
  7. 如何防御XSS攻击

    2024-03-21 00:32:02       38 阅读
  8. LeetCode1492. The kth Factor of n

    2024-03-21 00:32:02       44 阅读
  9. 如何在 Flutter 中实现地理定位和地图功能?

    2024-03-21 00:32:02       39 阅读
  10. Linux命令-dhclient命令(动态获取或释放IP地址)

    2024-03-21 00:32:02       46 阅读
  11. 一篇文章搞懂vue基础(上)

    2024-03-21 00:32:02       35 阅读
  12. stm32F407+ESP8266+AT指令+阿里云+代码进阶版(4)

    2024-03-21 00:32:02       37 阅读
  13. ARM汇编程序设计 注释 “每日读书“

    2024-03-21 00:32:02       41 阅读