web API-页面刷新，图片随机更换、页面刷新，背景图随机更换

最新推荐文章于 2024-03-15 15:17:23 发布

Q _Q

最新推荐文章于 2024-03-15 15:17:23 发布

阅读量768

点赞数 1

文章标签：前端 css3 css html javascript

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131368993

版权

<!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>
</head>
<body>
    <img src="./images/1.jpg" alt="">
    <script>
        // 需求：当我们刷新页面，页面中的图片随机显示不同的图片
        // 分析：
        //     ①：随机显示，则需要用到随机函数
        //     ②：更换图片需要用到图片的 src 属性，进行修改
        //     ③：核心思路：
        //         1. 获取图片元素
        //         2. 随机得到图片序号
        //         3. 图片.src = 图片随机路径


        // 创建图片数组
        let arrar_pics = ['./images/1.jpg', './images/22.jpg', './images/3.jpg', './images/44.jpg']
        // 获取img对象
        let img = document.querySelector('img')
        // 生成随机数
        let random = getRandom(0, arrar_pics.length - 1)
        // 替换图片
        img.src = arrar_pics[random]


        // 随机数生成函数
        function getRandom(min = 0, max = 1) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
    </script>
</body>
</html>

<!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>
</head>
<body style="background-image: url(./images/1.jpg);">
    <script>
        // 需求：当我们刷新页面，页面中的背景图片随机显示不同的图片
        // 分析：
        //     ①： 随机函数
        //     ②： css页面背景图片  background - image
        //     ③： 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style 

        // 创建图片数组
        let array_pics = ['./images/1.jpg', './images/22.jpg', './images/3.jpg', './images/44.jpg']
        // 生成随机数
        let random = getRandom(0, array_pics.length - 1)
        // 随机获得图片
        let randompic = array_pics[random]
        // 替换图片
        document.body.style.backgroundImage = `url('${randompic}')`
        // 随机数生成函数
        function getRandom(min = 0, max = 1) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
    </script>
</body>
</html>