js 点击按钮随机更改颜色页面

最新推荐文章于 2024-05-30 11:27:58 发布

清酒独酌

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量928

点赞数

分类专栏： javascript 文章标签： javascript 前端 css html

本文链接：https://blog.csdn.net/yang68668/article/details/121010106

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

//按钮的样式
<style>
        button {
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top: 300px;
            cursor: pointer;
        }
    </style>


//
<body>
    <button id="btn">点击切换颜色</button>
    <script>
        function getColor() {
            /*  设置颜色的变量 */
            var str = '#';
            /* 定义16进制的数组 */
            var arr = ["0", "1", "2", "3", "4", "5", "6", '7', "8", "9", "A", "B", "C", "D", "E", "F"];
            /* 循环6次，生成随机字符 */
            for (i = 0; i < 6; i++) {
                //随机获取6个下标的下标。
                var index = gteNum(0, 15);
                /* 拼接 */
                str += arr[index]
            }
            return str;
        }
        /* 调用这个函数 */
        getColor();
        /* 封装的随机生成数 */
        function gteNum(n, m) {
            /* 判断n是否大于m，如果是，调换位置。 */
            if (n > m) {
                var tmp = n;
                n = m;
                m = tmp;
            }
            return Math.floor(Math.random() * (m + 1 - n) + n);
        }
        //通过id属性获取按钮节点
        var btn = document.getElementById('btn');
        //点击btn按钮触发函数中的代码
        btn.onclick = function() {
            var color = getColor();
            document.body.style.backgroundColor = color;
        }
    </script>
</body>

清酒独酌

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js 点击按钮随机更改颜色页面

//按钮的样式<style> button { display: block; width: 100px; height: 100px; margin: 0 auto; margin-top: 300px; cursor: pointer; } </style>//<body>.
复制链接

扫一扫