IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> PHP知识库 -> 【关键词随机图片页面】美女、头像和壁纸都有，快学起来?(^_-) -> 正文阅读

[PHP知识库]【关键词随机图片页面】美女、头像和壁纸都有，快学起来?(^_-)

目录

前言

前几天我花了一下午的时间搭建好了个人主页，大家可以去看一下—>>>皮小孩的个人主页
想着再实现几个好玩的功能页面，目前已经实现的有：舔狗语录在线生成、语音机器人网页版和关键词随机图片。
在这里插入图片描述

体验地址：关键词随机图片
直接输入关键词然后点击搜索按钮即可返回一张随机图片。
在这里插入图片描述

如何实现？

要实现这个功能页面，需要html+css+js和php接口，所以需要电脑配置好php环境，大家可以上网找一下配置教程。当然没有php环境也是没有关系的，可以定义一个图片url数组，然后随机访问。前端通过输入关键词，提交表单到php接口，php接口通过file_get_contents函数解析数据，然后返回结果到前端，再随机使用一个图片链接即可。
我的目录结构：
在这里插入图片描述

前端页面

需要一个搜索按钮，我在一个开源的前端库找了了不错的页面，最后再加上一张背景图片即可。
在这里插入图片描述

下面的代码你可以复制过去，但是要注意文件放的位置（看我上面的目录结构）。背景图片自己找一张，命名为1.jpg.

pictures.html：

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>随机图片</title>
	<style>
.img1{
text-align:center;
margin-top:170px;
}
body{overflow:hidden;}
img {
	max-height: 500px;
	width: auto;
}
@media screen and (min-width:320px) and (max-width:770px){
    img {
	max-height: 500px;
	max-width:400px;
	width: auto;
}
}
.p2{
font-size:20px;color:#f4f4f4;
}
	</style>
<link rel="stylesheet" type="text/css" href="./css/default.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="./css/search-form.css" />

</head>

<form onSubmit="submitFn(this, event);">
	<div class="search-wrapper">
		<div class="input-holder">
			<input type="text" class="search-input" placeholder="请输入关键词(美女、头像、壁纸等)" />
			<button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>
		</div>
		<span class="close" onClick="searchToggle(this, event);"></span>

		<div class="result-container">

		</div>
	</div>
	<div style="text-align:center;">
		<span style="top: 120px;
    position: absolute;
    left: 10%;
    width: 80%;">第一次加载比较慢，请耐心等待一下。图片可长按保存！</span>
	</div>

</form>
<div class="img1">
	<img src="https://c-ssl.duitang.com/uploads/blog/202103/26/20210326151630_93931.thumb.400_0.jpeg" id="img"/>
</div>
<div style="text-align:center;width:90%;left:5%;bottom:20px;position:fixed;">
    <a href="http://ridesharing.top" target="_blank" class="p2">皮小孩个人主页</a>
    <a href="http://ridesharing.top/tiangou.html" target="_blank" class="p2">舔狗语录</a>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function searchToggle(obj, evt){
	var container = $(obj).closest('.search-wrapper');

	if(!container.hasClass('active')){
		  container.addClass('active');
		  evt.preventDefault();
	}
	else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
		  container.removeClass('active');
		  // clear input
		  container.find('.search-input').val('');
		  // clear and hide result container when we press close
		  container.find('.result-container').fadeOut(100, function(){$(this).empty();});
	}
}

function submitFn(obj, evt){
	value = $(obj).find('.search-input').val().trim();
	var a = Math.random();           //生成0——1的随机数
		a = a*5;                        //0——5的随机数
		a = Math.ceil(a);                //上取整，完成随机生成1——5的整数
	var id=a*24;
            $.ajax({
    type:"post",
    url:"pictures.php",
    data:{"str":value,'id':id},
    dataType:"json",
    success: function(msg){
        console.log(msg);
              var i=Math.floor(Math.random()*(msg.data.object_list.length));
              document.getElementById('img').src=msg.data.object_list[i].photo.path;
    }
});
	_html = "您搜索的关键词： ";
	if(!value.length){
		_html = "关键词不能为空。";
	}
	else{
		_html += "<b>" + value + "</b>";
	}

	$(obj).find('.result-container').html('<span>' + _html + '</span>');
	$(obj).find('.result-container').fadeIn(100);

	evt.preventDefault();
}
</script>

</body>
</html>

下面两个css文件放在css文件夹里面。
defaule.css:

body, html { font-size: 100%; 	padding: 0; margin: 0;}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	color: #fff;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}

search-form.css:

html,body {height: 100%;}
body {padding: 0px; margin:0px; background:url(../images/1.jpg) ; background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat;}

.search-wrapper {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top:50px;
    left:50%;
}
.search-wrapper.active {}

.search-wrapper .input-holder {
    overflow: hidden;
    height: 70px;
    background: rgba(255,255,255,0);
    border-radius:6px;
    position: relative;
    width:70px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    border-radius: 50px;
    width:450px;
    background: rgba(0,0,0,0.5);
    -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input {
    width:100%;
    height: 50px;
    padding:0px 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color:#FFF;
    -webkit-transform: translate(0, 60px);
    -moz-transform: translate(0, 60px);
    transform: translate(0, 60px);
    -webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    transform: translate(0, 10px);
}

.search-wrapper .input-holder .search-icon {
    width:70px;
    height:70px;
    border:none;
    border-radius:6px;
    background: #FFF;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 50px;
    height:50px;
    margin: 10px;
    border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
    width:22px;
    height:22px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    -moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

}
.search-wrapper.active .input-holder .search-icon span {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute;
    content:'';
}
.search-wrapper .input-holder .search-icon span::before {
    width: 4px;
    height: 11px;
    left: 9px;
    top: 18px;
    border-radius: 2px;
    background: #e09e4b;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 0px;
    top: 0px;
    border-radius: 16px;
    border: 4px solid #e09e4b;
}

.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:24px;
    right:20px;
    width:25px;
    height:25px;
    cursor: pointer;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.search-wrapper.active .close {
    right:-50px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #FFF;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 5px;
    height: 25px;
    left: 10px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 25px;
    height: 5px;
    left: 0px;
    top: 10px;
}
.search-wrapper .result-container {
    width: 100%;
    position: absolute;
    top:80px;
    left:0px;
    text-align: center;
    font-family: "Open Sans", Arial, Verdana;
    font-size: 14px;
    display:none;
    color:#B7B7B7;
}


@media screen and (max-width: 560px) {
    .search-wrapper.active .input-holder {width:300px;}
}

php接口

要实现一个php接口需要找一个图片网站，我找的网站是：堆糖
根据关键词会返回许多图片，质量也是不错的。
在这里插入图片描述
f12进入开发者模式，点击网络，再点击XHR，此时是空的。
在这里插入图片描述
不要着急，我们鼠标一直往下滑，使其加载更多图片，可以看到出现了一行东西，那个就是图片的接口url了。
在这里插入图片描述
往下滑可以看到请求参数，最重要的是kw和after_id。分别是关键词和下一个图片开始的序号，比如此时24表示最后一个图片序号为23，说明已经一次接口可以返回24张图片。
在这里插入图片描述
把两个参数放在请求url后面。（下面的链接复制到网上即可看到密密麻麻的json数据）
https://www.duitang.com/napi/blogv2/list/by_search/?kw=头像&after_id=24
当然我们也可以直接点击预览，可以看到有24条数据，每条数据里面都有图片链接。
在这里插入图片描述
前端需要传入的参数为kw和after_id，然后再解析数据返回。
pictures.php：

<?php
header('Content-Type:application/json');
$ke=$_POST['str'];
$id=$_POST['id'];
$data = file_get_contents('https://www.duitang.com/napi/blogv2/list/by_search/?&after_id='.$id.'&kw='.$ke);
print_r($data); 
?>

文章前面我已经给了完整的html代码，在这里我简单的说明一下。

$.ajax({
    type:"post",
    url:"pictures.php",
    data:{"str":value,'id':id},
    dataType:"json",
    success: function(msg){
        console.log(msg);
              var i=Math.floor(Math.random()*(msg.data.object_list.length));
              document.getElementById('img').src=msg.data.object_list[i].photo.path;
    }
});

post请求pictures.php传入的数据为{“str”:value,‘id’:id}，其中value就是输入关键词，id是随机生成的24的倍数的整数。返回的数据类型为json，然后获取长度再随机选择一个图片链接。

value = $(obj).find('.search-input').val().trim();
var a = Math.random();           //生成0——1的随机数
a = a*5;                        //0——5的随机数
a = Math.ceil(a);                //上取整，完成随机生成1——5的整数
var id=a*24;

总结

要实现这个页面，需要的文件有背景图片（命名为1.jpg）、pictures.html、default.css、search-form.css、pictures.php。
目录结构（那两个css文件放在css文件夹里面）：
在这里插入图片描述

电脑为配置php环境怎么办？

电脑没有配置php环境的小伙伴也不要着急，可以定义一个数组，里面存放图片链接，或者本地图片都可以。
找到文章前面的pictures.html里面的submitFn函数，把下面代码替换掉之前的。然后在img_list数组里面放图片的链接即可。

<script type="text/javascript">
function submitFn(obj, evt){
	value = $(obj).find('.search-input').val().trim();
	var img_list=['']//这里放图片链接
	var i=Math.floor(Math.random()*(img_list.length));
    document.getElementById('img').src=img_list[i];
	_html = "您搜索的关键词： ";
	if(!value.length){
		_html = "关键词不能为空。";
	}
	else{
		_html += "<b>" + value + "</b>";
	}
	$(obj).find('.result-container').html('<span>' + _html + '</span>');
	$(obj).find('.result-container').fadeIn(100);
	evt.preventDefault();
}
</script>

写在最后

制作不易，期待大家的一键三连。
有什么问题可以随时在评论区交流，另外小伙伴们可以去我的个人主页体验一下功能哦。
地址：随机图片
请添加图片描述
  PHP知识库 最新文章
Laravel 下实现 Google 2fa 验证
UUCTF WP
DASCTF10月 web
XAMPP任意命令执行提升权限漏洞（CVE-2020-
[GYCTF2020]Easyphp
iwebsec靶场 代码执行关卡通关笔记
多个线程同步执行，多个线程依次执行，多个
php 没事记录下常用方法 (TP5.1)
php之jwt
2021-09-18
上一篇文章           查看所有文章
加:2021-09-27 13:52:49  更:2021-09-27 13:54:07 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/29 5:01:43-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计