zoukankan      html  css  js  c++  java
  • js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/

    写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色)。产生的是一个随机颜色。

    <!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>
        body {
            text-align: center;
        }
        #wrap {
             200px;height: 200px;border: 1px solid black;text-align: center;
            margin: 10px auto;font-size: 30px;
        }
        button {
             150px;height: 40px;color: black;text-align: center;
            margin: 10px;
        }
        </style>
    </head>
    <body>
        <button id="btn1">change bgcolor</button><br>
        <button id="btn2">change color</button>
        <div id="wrap">
            test text
        </div>
    
        <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var wrap = document.getElementById("wrap");
        // 获取元素
    
        function getColor(){
            // 封装随机生成颜色的函数作为返回值
            return Math.round(Math.random()*255);
        }
    
        function giveColor(){
            var red = getColor();
            var green = getColor();
            var blue = getColor();
            // 获取三个rgb的值
            var color= "rgb(" + red + "," + green + "," + blue + ")";
            // 吧rhb值拼接在一起给变量color
            return color;
            // 返回color
        }
    
        btn1.onclick = function(){
            wrap.style.backgroundColor = giveColor();
            // btn1注册点击时间,改变wrap的背景色
        }
    
        btn2.onclick = function(){
            wrap.style.color = giveColor();
            // btn1注册点击时间,改变wrap的字体颜色
        }
    
        </script>
    </body>
    </html>
  • 相关阅读:
    opencv c++编译
    报bug
    ssh的server安装和安装指定版本的软件的方法
    caffe修改需要的东西 6:40
    caffe修改需要的东西
    leveldb学习:DBimpl
    AndroidStudio加快Gradle速度的方法-android study之旅(103)
    hdu2222--Keywords Search+AC自己主动机模板
    ListView setOnItemClickListener无效原因分析
    Linux打包命令
  • 原文地址:https://www.cnblogs.com/sandraryan/p/11338036.html
Copyright © 2011-2022 走看看