目錄
- 前言
- 如何實作？
- 前端頁面
- php介面
- 總結
- 電腦為配置php環境怎么辦？
- 寫在最后
前言
前幾天我花了一下午的時間搭建好了個人主頁，大家可以去看一下—>>>皮小孩的個人主頁
想著再實作幾個好玩的功能頁面，目前已經實作的有：舔狗語錄在線生成、QQ機器人網頁版和關鍵詞隨機圖片，
體驗地址：關鍵詞隨機圖片
直接輸入關鍵詞然后點擊搜索按鈕即可回傳一張隨機圖片，
如何實作？
要實作這個功能頁面，需要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>
寫在最后
制作不易，期待大家的一鍵三連，
有什么問題可以隨時在評論區交流，另外小伙伴們可以去我的個人主頁體驗一下功能哦，
地址：隨機圖片
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/302549.html
標籤：其他
上一篇：C | 簡易三子棋的實作