博主某日在github閑逛的時(shí)候, 發(fā)現(xiàn)了一個(gè)有意思的網(wǎng)站推薦: https://shibe.online/ (你每次打開, 都會(huì)看到不一樣的狗狗圖片), 可以把它看做是DogBook
這個(gè)網(wǎng)站提供了一個(gè)接口, http://shibe.online/api/shibes , 最有用的參數(shù)是count,取值是1-100(可以返回1-100張圖片)
最近博主的狗子表情包, 比較欠缺, 所以正好用這個(gè)接口補(bǔ)一補(bǔ)!
成品頁(yè)面如圖所示: http://fangyuanxiaozhan.com/demo/dog
進(jìn)入頁(yè)面后默認(rèn)請(qǐng)求20張狗圖, 你也可以在底部輸入框輸入100, 然后點(diǎn)擊搜索按鈕, 獲取100張狗圖(小心流量~)
關(guān)于api
- 網(wǎng)站提供的api是不允許跨域請(qǐng)求的, 這就很蛋疼, 所以我在自己的服務(wù)器轉(zhuǎn)發(fā)了一下, 生成了新的api
http://fangyuanxiaozhan.com/get_dog_json,- 如果需要請(qǐng)求100張圖片,直接
http://fangyuanxiaozhan.com/get_dog_json?count=100
源碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="方圓小站,木子昭,工具癖, 程序員, 前端">
<meta name="description" content="方圓小站,專注極客體驗(yàn),享受效率生活,讓程序去做唄,程序又不會(huì)累">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>狗黨福利</title>
</head>
<body>
<div class="input-group" style="position: fixed; bottom: 0; padding: 10px;background-color: #ffffff">
<input type="text" class="form-control" placeholder="想獲取多少?gòu)埞饭穲D?(請(qǐng)輸入1-100的整數(shù))" id="dog_num">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="get_dog()">搜索</button>
</span>
</div>
<div id="dog" style="margin: 20px auto; text-align: center">
</div>
<script>
function get_dog(){
var dog_images_list = [];
console.log(document.getElementById("dog_num"));
var num = document.getElementById("dog_num").value || 20;
if((parseInt(num))){
console.log((parseInt(num)));
$.ajax(
{
url: 'http://fangyuanxiaozhan.com/get_dog_json?count='+num,
success: function(res){
res["dog_images_list"].map(function(value, index){
dog_images_list.push("<image class='img-rounded' style='width: 300px;margin-bottom: 10px' "+ "src="+value +" /><br/>");
});
document.getElementById("dog").innerHTML = dog_images_list.join('');
}
}
);
}else{
alert("請(qǐng)輸入整數(shù)1-100");
}
}
get_dog();
</script>
</body>
</html>
源碼相關(guān)資源都使用了cdn, 源碼保存到本地文件
dog.html, 雙擊文件即可享用~
小結(jié):
沒(méi)事兒逛逛Github, 總能有一些意外收獲, 如果你不知道哪些項(xiàng)目值得看,那我肯定推薦星數(shù)排名靠前的項(xiàng)目~ 如何查看Github星數(shù)排名靠前的項(xiàng)目? 可以查看這篇文章查看github星數(shù)排行榜
