# randomimgs
通过
前端js
跳转实现随机图片 API
# 思路
- Github page 可以上传静态代码
- js 可以随机读取 url 文件,并在 js 数组中用 random 函数实现随机返回 url 部分内容
- 使用 js 跳转功能,当用户通过 Github Page 点击到前端页面时,背后的 Js 将根据随机函数,随机跳转到图片的 url
- 图片以第三方图床的形式保存
- TG 图床
- Github Page 使用 cloudflare 实现加速同步部署
# 代码实现
2023/03/16/l51Lx | |
2023/03/14/fLKzb | |
2023/03/09/Y0iNK | |
2023/03/09/Y0hOs | |
2023/03/09/Y0zdB | |
2023/03/09/Y0kTl | |
2023/03/09/Y0qLD | |
2023/03/09/YSCTr | |
2023/03/09/YS2LU | |
2023/03/09/YSj7p |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="author" content="瓶子的跋涉"> | |
<title>Random photo API</title> | |
<script src="index.js" type="text/javascript" ></script> | |
</head> | |
<body> | |
</body> | |
</html> |
// 当打开 html 自动调用 | |
window.onload = function() { | |
// 调用随机函数 | |
loadRandomImage(); | |
} | |
// 函数 | |
function loadRandomImage() { | |
var xhttp = new XMLHttpRequest(); | |
xhttp.onreadystatechange = function() { | |
// 始终进行 | |
if (xhttp.status === 200) { | |
// 将所有图片 url 放入 imageUrls 当中 | |
var imageUrls = this.responseText.split("\n"); | |
// 实现随机访问 | |
var randomIndex = Math.floor(Math.random() * imageUrls.length); | |
// 实现额面跳转 | |
window.location.href="https://i.imgtg.com/" + imageUrls[randomIndex] + ".jpg"; | |
} | |
else{ | |
console.log("图片文件状态异常,可联系foryouos@qq.com") | |
} | |
}; | |
// 打开文件 | |
xhttp.open("GET", "photos_urls.txt", true); | |
xhttp.send(); | |
} |
随机图片API
琉璃的医学 & 编程笔记