# 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();
}