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

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

<!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>

实现效果,点击按钮可更换颜色
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/horizon12/article/details/108358798