js：点击按钮随机生成背景颜色

最新推荐文章于 2023-04-18 11:16:23 发布

文科僧

最新推荐文章于 2023-04-18 11:16:23 发布

阅读量2.2k

点赞数 5

文章标签： javascript html html5

本文链接：https://blog.csdn.net/horizon12/article/details/108358798

版权

通过点击按钮更换整个页面的背景颜色
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            width: 150px;
            height: 50px;
            background-color:yellow;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <input type="button" value="点击更换背景颜色" id="btn">
    <!-- 设置按钮 -->
    <script>
        function suiJi(m,n){
            return m+parseInt(Math.random()*(n-m+1))
        }
        //随机生成m-n之间的整数，包含m，n
        function yanSe(){
            var result = "#"
            for(var i = 0; i<6; i++){
                result +=suiJi(0,15).toString(16)
            }
        return result;
        //生成一个随机颜色编码#000000-#ffffff
        }
        var btn =  document.getElementById("btn")
        //获取节点
        btn.onclick = function(){
            document.body.style.background = yanSe();
        }
    </script>
</body>
</html>