HTML: 刷新页面随机加载网络图片作为背景

定义好一个图片url地址字典随机请求罢了,免了做后端接口,本篇只是为了方便以后copy记录一下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KazeFrame</title>
    <link rel="icon" href="https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/icon/angeldog/angeldog_32.ico"
        type="image/icon">
</head>

<body>
    <h1>KazeFrame</h1>
</body>

</html>

<style>
    html,
    body {
        height: 100%;
        width: 100vw;
        margin: 0;
        padding: 0;
        font-size: 50px;
        color: white;
        cursor: default;
        background-repeat: no-repeat;
        text-shadow:
            0px 0px 20px rgb(80, 120, 160),
            0px 0px 40px rgb(160, 200, 240),
            0px 0px 60px rgb(193, 180, 240);
        display: flex;
        justify-content: center;
        align-items: center;
        background-position: center;
        background-size: cover;
    }
    @media (max-width:768px) {
        html,
        body {
            font-size: 24px;
        }
    }
</style>

<script>
    var imageUrls = [
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/001.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/002.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/003.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/004.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/005.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/006.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/007.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/008.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/009.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/010.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/011.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/012.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/013.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/050.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/051.webp",
        "https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/052.webp",
    ];
    function getRandomImage() {
        var randomIndex = Math.floor(Math.random() * imageUrls.length);
        var randomImageUrl = imageUrls[randomIndex];
        document.body.style.backgroundImage = "url('" + randomImageUrl + "')";
    }
    window.onload = getRandomImage;
</script>
暂无评论

发送评论 编辑评论


				
上一篇
下一篇