文章地址 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 {

        width: 200px;height: 200px;border: 1px solid black;text-align: center;

        margin: 10px auto;font-size: 30px;

    }

    button {

        width: 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>

js点击按钮为元素随机字体颜色和背景色的更多相关文章

  1. Mardown字体颜色、背景色

    Markdown字体颜色.背景色 字体颜色表 Markdwon测试 **粗体文字**,或__加文字__ 加粗 Markdown测试 *斜体文字*, 或_斜体_ 斜体 Markdwon测试 列表: 背景 ...

  2. 原生JS 实现点击按钮创建元素

    要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...

  3. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  4. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

  5. JS点击按钮打开新的独立页面

    工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...

  6. JS_简单的效果-鼠标移动、点击、定位元素、修改颜色等

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  7. js+css--单选按钮，自定义选中的颜色???(性别按钮，男女)

    效果图: html: <div class="item"><div class="rad"></div><span c ...

  8. iOS_UIWebView字体大小、字体颜色、背景色

    前段时间需要修改webView背景色,上stackoverflow搜了很久没有找到结果,百度搜索,各种转载,各种坑爹,搜出来的都只有字体大小和字体颜色,页面背景没有看到,本人发布方法,希望可以帮助到更 ...

  9. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

随机推荐

  1. Python3 中 configparser 模块用法

    configparser 简介 configparser 是 Pyhton 标准库中用来解析配置文件的模块,并且内置方法和字典非常接近.Python2.x 中名为 ConfigParser,3.x 已 ...

  2. arcgis几何对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 在一个已经使用mybatis的项目里引入mybatis-plus，结果不能共存

    mybatis-plus版本号:3.0.6 问题产生原因: 原有的项目使用的是springboot+mybatis的框架,一切接口服务均没有问题.由于新的需求增加shiro权限认证,然后也在考虑用my ...

  4. Linux SSH远程链接 短时间内断开

    Linux SSH远程链接 短时间内断开 操作系统:RedHat 7.5 问题描述: 在进行SSH链接后,时不时的就断开了 解决方案: 修改 /etc/ssh/sshd_config 文件,找到 Cl ...

  5. oracle国家字符集

    国家字符集是一个备用字符集,利用此字符集可以在没有Unicode 数据库字符集的数据库中存储 Unicode 字符. 选择国家字符集的其它原因如下: 对于频繁的字符处理操作,不同的字符编码方案可能更为 ...

  6. NOIP模拟 17.8.20

    NOIP模拟17.8.20 A.阶乘[题目描述]亲爱的xyx同学正在研究数学与阶乘的关系,但是他喜欢颓废,于是他就制作了一个和阶乘有关系的数学游戏:给出两个整数 n,m,令 t = !n,每轮游戏的流 ...

  7. Sum Root to Leaf Numbers深度优先计算路径和

    Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...

  8. sql标签和include标签的使用

    <sql>用来封装SQL语句, <include>用来调用<sql>封装的语句 代码片段: <sql id="select"> SE ...

  9. 配置一个Oracle共享服务器进程环境需要哪两项参数

    SHARED_SERVERS和DISPATCHERS. PROTOCOL(pro或prot): 调度程序要监听的网络协议.这是唯一必需的属性 ADDRESS(ADD或者ADDR): 指定调度程序正在上 ...

  10. 通过DataWorks数据集成归档日志服务数据至MaxCompute进行离线分析

    通过DataWorks归档日志服务数据至MaxCompute 官方指导文档:https://help.aliyun.com/document_detail/68322.html但是会遇到大家在分区上或 ...