文章地址 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. Codeforces Round #416 (Div. 2) A. Vladik and Courtesy【思维/模拟】

    A. Vladik and Courtesy time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  2. LeetCode169 Majority Element, LintCode47 Majority Number II, LeetCode229 Majority Element II, LintCode48 Majority Number III

    LeetCode169. Majority Element Given an array of size n, find the majority element. The majority elem ...

  3. Mongodb停止和启动

    mongodb开启.停止.重启操作 #开启service mongodb start#停止service mongodb stop#重启service mongodb restart

  4. PyCharm切换Python版本

    由于代码格式问题,很多情况下需要我们去切换Python版本,那么在当下火爆的PyCharm中是如何切换Python版本的呢? 打开File菜单,选择Settings: 打开Settings窗口后,选择 ...

  5. Go语言开发教程

    Go语言简述 兴起:2009年Gogle发布的第二款开源编程语言 特征: 语法简单:语法标准比较严格,适合开发人员短时间高效的服务端开发. 并发模型:Goroutine是Go最显著的特征,使用类协程的 ...

  6. SpringCloud Zuul 路由映射规则配置

    阅读目录 前言 快速入门 路由详解 Cookie与头信息 本地跳转 Hystrix和Ribbon支持 过滤器解释 动态加载 后记 回到目录 前言 本文起笔于2018-06-26周二,接了一个这周要完成 ...

  7. jq动态添加代码监听问题

     $(document).on('click', '.class', function() { console.log($(this).attr('id')); }); 

  8. linux下安装使用MySQL 以及 python mysqldb 遇到的问题

    一.安装mysql sudo apt-get install mysql-client-core-5.5 然后会出现: ERROR 2002 (HY000): Can't connect to loc ...

  9. iOS 9 适配系列教程

    http://www.cocoachina.com/ios/20150703/12392.html 本文是投稿文章,作者:ChenYilong(https://github.com/ChenYilon ...

  10. Flask学习之三 web表单

    本部分Miguel Grinberg教程的翻译地址:http://www.pythondoc.com/flask-mega-tutorial/webforms.html 开源中国的:http://ww ...