Js网页背景随机选用本地图片

2024-03-15T15:25:00

一直想写个api,,但是能力有限...

最近学了点js,,就试着写了个这个(和api差别还是挺大的,不过似乎也能用)
话不多说,记录下

实现:

<!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>
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »