文章地址 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. python中数字转换成字符串

    数字转换成字符串: num=123 str='%d' %num str就变成了"123"

  2. 从0开始学习 GitHub 系列之「04.向GitHub 提交代码」

    之前的这篇文章「从0开始学习 GitHub 系列之「Git速成」」相信大家都已经对 Git 的基本操作熟悉了,但是这篇文章只介绍了对本地 Git 仓库的基本操作,今天我就来介绍下如何跟远程仓库一起协作 ...

  3. 深入探索WebSockets

    WebSockets简介 在2008年中期,开发人员Michael Carter和Ian Hickson特别敏锐地感受到Comet在实施任何真正强大的东西时所带来的痛苦和局限. 通过在IRC和W3C邮 ...

  4. ThinkPHP5.0中的build.php自动生成所需的目录结构的详细方法

    一.来到根目录下,找到bulid.php文件进行改写. 改写方法:保留常用的目录结构,其余按照需求改吧! 二.复制一份build.php文件到application目录下 此时根目录下的bulid.p ...

  5. JS 寄生 继承

    寄生构造函数 寄生构造函数的用途目的:给String内置对象功能扩充 稳妥的构造函数 继承 对象冒充继承 一般继承 组合继承 原型链继承:借助于中转函数和已有对象 寄生式继承:把原型式+工厂式结合而来 ...

  6. Balanced Binary Tree 判断平衡二叉树

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  7. SQLServer —— 用户权限操作

    说明 以下操作都是基于SQLServer登陆验证方式登陆.而且操作员都是 sa. 一.添加登陆账号 use master go ' 第一个(xu)是登陆名,第二个(123456)是登陆密码. 执行语句 ...

  8. Flask 第二篇

    Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返回字符串 2 ...

  9. Java练习 SDUT-1253_进制转换

    进制转换 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入一个十进制数N,将它转换成R进制数输出. Input 输入 ...

  10. This cache store does not support tagging.

    用户权限管理系统 https://github.com/Zizaco/entrust 再添加角色的时候... 报了一个错.. BadMethodCallException in Repository. ...