09-随机更换背景图片

最新推荐文章于 2024-09-14 18:52:56 发布

Strohhut

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量68

点赞数

分类专栏：黑马程序员APIs（1）文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Strohht/article/details/130674974

版权

黑马程序员APIs（1）专栏收录该内容

17 篇文章 1 订阅

订阅专栏

该代码段展示了一个HTML文档，其中使用JavaScript生成1到10之间的随机数，并据此改变页面背景图片。通过`getRandom`函数实现随机数生成，然后动态更新`body`的样式，设置新的背景图片URL。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url(./images/desktop_1.jpg) no-repeat top center /cover;
        }
    </style>
</head>

<body>
    <script>
        //不用获取body
        // 可以直接写document.body.style
        //取 N ~ M 的随机函数  直接套公式
        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N
        }
        const random = getRandom(1, 10)
        // 修改样式 [对象.style.样式属性 = '值']
        document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg`
    </script>
</body>

</html>