为什么不能加个狗狗专用的接口呢?
时间:2022-06-19
本文章向大家介绍为什么不能加个狗狗专用的接口呢?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
- 博主某日在github闲逛的时候, 发现了一个有意思的网站推荐: https://shibe.online/ (你每次打开, 都会看到不一样的狗狗图片), 可以把它看做是DogBook
- 这个网站提供了一个接口, http://shibe.online/api/shibes , 最有用的参数是count,取值是1-100(可以返回1-100张图片)
- 最近博主的狗子表情包, 比较欠缺, 所以正好用这个接口补一补!
成品页面如图所示: http://fangyuanxiaozhan.com/demo/dog
进入页面后默认请求20张狗图, 你也可以在底部输入框输入100, 然后点击
搜索
按钮, 获取100张狗图(小心流量~)
关于api
- 网站提供的api是不允许跨域请求的, 这就很蛋疼, 所以我在自己的服务器转发了一下, 生成了新的api
http://fangyuanxiaozhan.com/get_dog_json
, - 如果需要请求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="方圆小站,专注极客体验,享受效率生活,让程序去做呗,程序又不会累">
<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" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 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="想获取多少张狗狗图?(请输入1-100的整数)" 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("请输入整数1-100");
}
}
get_dog();
</script>
</body>
</html>
源码相关资源都使用了cdn, 源码保存到本地文件
dog.html
, 双击文件即可享用~
小结:
没事儿逛逛Github, 总能有一些意外收获, 如果你不知道哪些项目值得看,那我肯定推荐星数排名靠前的项目~ 如何查看Github星数排名靠前的项目? 可以查看这篇文章查看github星数排行榜
- 全能型反汇编引擎 – Capstone-Engine
- Hijack攻击揭秘
- 都在说微服务,那么微服务的反模式和陷阱是什么(二)
- Spring Boot 2.0 - WebFlux framework
- Spring Cloud构建微服务架构:服务网关(路由配置)【Dalston版】
- SpringCloud实战小贴士:Zuul的路径匹配
- 程序员你为什么这么累【续】:编码习惯之参数校验和国际化规范
- 程序员你为什么这么累【续】:编码习惯-函数编写建议
- 那些年,我们一起碰到过的骗局
- Spring Security (五) 动手实现一个IP_Login
- 史上最全Linux提权后获取敏感信息方法
- Spring Security (四) 核心过滤器源码分析
- Spring Security (三) 核心配置解读
- Spring Cloud配置中心获取不到最新配置信息的问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- HTML--HTML入门篇(我想10分钟入门HTML,可以,交给我吧)
- 移动端初级知识点解析:translateZ translateY rotateY(上上上)
- new String() split详解
- XML--XML从入门到精通 Part 1 认识XML
- css的linear-gradient注意点
- css的linear-gradient
- 第十届山东省赛L题Median(floyd传递闭包)+ poj1975 (昨晚的课程总结错了,什么就出度出度,那应该是叫讨论一个元素与其余的关系)
- css中border-radius
- css的border-radius注意点
- js的join split startsWith endsWith
- 详解length charAt indexOf lastIndexOf includes concat slice substring substr详解
- sort实现
- border-radius
- USACO Training Section 1.1黑色星期五Friday the Thirteenth
- background-clip默认从border开始的哈