js基础-点击切换div背景颜色

最新推荐文章于 2024-06-12 16:26:06 发布

前端笨鸟

最新推荐文章于 2024-06-12 16:26:06 发布

阅读量7.1k

点赞数 5

分类专栏： js特效文章标签： js

本文链接：https://blog.csdn.net/qq_41670147/article/details/88083185

版权

js特效专栏收录该内容

18 篇文章 0 订阅

订阅专栏

随机产生一个十六进制的颜色值，封装成一个函数，进行调用！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-height: 100%;
            height: auto;
            background-color: coral;
            text-align: center;
        }
        
        div strong {
            display: block;
            font-size: 30px;
            padding-top: 20%;
        }
    </style>
</head>

<body>
    <div><strong>点击随机切换颜色</strong></div>

    <script>
        function changeBgColor() {
            var str = "#";
            var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
            for (var i = 0; i < 6; i++) {
                var result = parseInt(Math.random() * 16);
                str += arr[result];
            }
            return str;
        }
        var div = document.querySelector('div');
        div.onclick = function() {
            div.style.backgroundColor = changeBgColor();
        }
    </script>
</body>

</html>

在这里插入图片描述

前端笨鸟

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js基础-点击切换div背景颜色

随机产生一个十六进制的颜色值，封装成一个函数，进行调用！function changeBgColor() { var str = &quot;#&quot;; //一个十六进制的值的数组 var arr = [&quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;
复制链接

扫一扫

专栏目录