点击按钮生成随机颜色

最新推荐文章于 2025-06-12 13:16:54 发布

原创最新推荐文章于 2025-06-12 13:16:54 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #css

这篇博客介绍了如何使用JavaScript创建一个按钮，并绑定点击事件，当点击按钮时，通过生成随机颜色并设置为页面背景色。主要涉及的方法包括事件监听、颜色生成、DOM操作等，适合初学者了解JavaScript交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路:

1.按钮

2.绑定事件

3.各种方法

4.拼接方法

<input type="button" value="按钮">
    <script>
        class colors{
            constructor(){
                //获取按钮页面节点
                this.body = this.$("body");
                this.btn = this.$("input");
                //绑定按钮监听事件
                this.btn.addEventListener("click",this.clickFn.bind(this));
            }
            //点击事件
            clickFn(){
                let color = this.getColor();
                //设置背景颜色
                this.body.style.background = color;
            }
            //获取颜色方法(原理:拼接六个被十六进制转换的随机0-15的数)
            getColor(){
                let color = "#";
                for(let i=0 ; i<6 ; i++){
                    color += this.getRandom(0,15).toString(16);
                }
                return color;
            }
            //获取随机数方法(获取两个数之间的随机数)
            getRandom(min,max){
                return Math.round(Math.random()*(max-min)+min);
            }
            //绑定节点方法
            $(tag){
                return document.querySelector(tag);
            }
        }
        new colors
    </script>