点击按钮变换图片（含随机变换颜色，定时器，页面获取元素）

最新推荐文章于 2024-09-25 17:58:10 发布

幼儿崽

最新推荐文章于 2024-09-25 17:58:10 发布

阅读量111

点赞数

文章标签： javascript html css Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73917034/article/details/129066591

版权

案例里的图

这是做完之后的效果图，只不过做完后是动态的，这个是截屏静止的

<!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>
    <h1>点击换图</h1>

    <div class="k">
        &emsp;&nbsp;&nbsp;<button>刘德华</button>&emsp;&emsp;&nbsp;<button>张学友</button>

        <br>
        <img src="../day01.html/images/ldh.jpg" alt="" width="150px" height="150px">
    </div>

    <script>
        var Ok = document.getElementsByTagName('div')
        var btns = document.getElementsByTagName('button');
        var oH1 = document.getElementsByTagName('h1');
        var oImg = document.getElementsByTagName('img')[0];
        btns[0].onclick = function () {
            oImg.src = '../day01.html/images/ldh.jpg';
        }
        btns[1].onclick = function () {
            oImg.src = '../day01.html/images/zxy.jpg';
        }
        var Okong = document.getElementsByTagName('div')[0];
        console.log(Okong);
        Okong.style.margin = 'auto';
        Okong.style.padding = '30px 40px';
        Okong.style.width = '200px';
        Okong.style.height = '200px';
        Okong.style.border = '3px solid green';
        oImg.style.margin = 'auto 25px 30px';


        var timer = setInterval(function () {
            var r = getRandom(0, 255);
            var g = getRandom(0, 255);
            var b = getRandom(0, 255);
           Okong.style.border= 'rgb(' + r + ',' + g + ',' + b + ')3px solid'
        }, 100);
        function getRandom(min,max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
    </script>
</body>

</html>