利用php/html实现随机抓取网页图片,视频做背景

CodeAE

我们在浏览网页时会发现有一些网站的背景是可以随机生成的，而且每刷新一次网页都会改变背景，今天我们来学习一下实现的方法。
实现的方法有很多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等，必须需要与用户交互才能播放。

通过以上方法大家可以举一反三，，可以将随机图片与随机视频结合在一起，这里就不再一一举例，有需要的大家可以下载本站提供的源码测试，将案例应该用自己的网站上，比如搜索页、登录注册页面等。

[PHP] 利用php/html实现随机抓取网页图片,视频做背景

相关帖子

ZBlogPhp为网站添加随机背景

CSS3荧光灯文字闪烁动画特效

php实现超简的分页功能

PHP版贪吃蛇小游戏

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

javascript如何改变背景

阿里云盘自动签到脚本

利用宝塔面板实现夸克网盘自动签到获取永久容量

CodeAE LV9