利用php/html实现随机抓取网页图片,视频做背景
我们在浏览网页时会发现有一些网站的背景是可以随机生成的，而且每刷新一次网页都会改变背景，今天我们来学习一下实现的方法。实现的方法有很多php或者html+JavaScript均可以实现。
大家可以先看一下效果：应用案例
一、首先看php的方法：
<?php
$randomImage = rand(1, 10) . '.jpg';
?>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('images/<?php echo $randomImage; ?>');
}
</style>
</head>
<body>
<h1>PHP随机背景生成</h1>
</body>在上面的代码中，我们使用 rand() 函数生成一个介于 1 和 10 之间的随机整数，然后将其与 .jpg 拼接起来，得到一个随机的图片文件名。然后，在 HTML 代码中，我们使用内联样式将 body 元素的背景图片设置为 $randomImage 变量的值，images为你的图片文件夹路径。
代码中的1, 10是图片的数量和起启，可以跟据自己有需要更改。
二、下面再看HTML的实现方法，纯html属于静态页面不可执行动态命令，所以如果想要html的就必须配合JavaScript来实现。
代码如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/CSS" href="styles.css">
<script>
window.onload = function() {
var randomImage = 'images/' + (Math.floor(Math.random() * 10) + 1) + '.jpg';
document.body.style.backgroundImage = "url('" + randomImage + "')";
}
</script>
</head>
<body>
<h1>html+JavaScript随机背景生成</h1>
</body>
</html>此代码使用JavaScript在页面加载时生成一个1到10之间的随机数，然后使用该数字创建背景图片的文件名。然后更新body标签的style属性以设置页面的背景图像，图片位于名为images的文件夹中，文件夹内放置10张图片分别命名1.jpg~10.jpg。
代码中的1, 10是图片的数量和起启，可以跟据自己有需要更改。
三、视频随机抓取
代码如下：
<!DOCTYPE html>
<html>
<head>
<script>
function randomBackground() {
var randomVideo = 'videos/' + (Math.floor(Math.random() * 10) + 1) + '.mp4';
var videoElement = document.createElement('video');
videoElement.setAttribute('src', randomVideo);
videoElement.setAttribute('autoplay', true);
videoElement.setAttribute('loop', true);
videoElement.setAttribute('muted', true);
document.body.appendChild(videoElement);
}
</script>
<style>
body {
margin: 0;
}
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
</style>
</head>
<body onload="randomBackground()">
<h1>视频随机抓取</h1>
</body>
</html>这段代码创建了一个video元素，并将其src属性设置为从videos目录中随机选择的视频。autoplay、loop和muted属性被设置以确保视频自动播放、循环播放并静音。然后将video元素附加到页面的body中。
*以上代码虽然设置了视频自动播放的属性，但并不能适应于所有浏览器，比如Chrome和Microsoft Edge等，必须需要与用户交互才能播放。
通过以上方法大家可以举一反三，，可以将随机图片与随机视频结合在一起，这里就不再一一举例，有需要的大家可以下载本站提供的源码测试，将案例应该用自己的网站上，比如搜索页、登录注册页面等。
页:
[1]