文章地址 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. Android——app基础

    Android Application基础 系统启动过程 APK文件介绍 APK是Android Package的缩写,即android安装包.APK 文件其实是zip 格式,但后缀名被修改为apk  ...

  3. Vue动态加载异步组件

    背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...

  4. SAS-一些有用的语句

    SAS-一些有用的语句 今天本想继续介绍 summary过程的,但是发现别人整理的比我更好,于是周末再更,好好整理一下描述性统计分析及评分卡建模,今天给大家介绍一些sas有用的语句吧. 1.如果在同一 ...

  5. 寒哥带你深入了解下Swift中的Value Type

    http://www.cocoachina.com/swift/20150923/13539.html 关于开发到底使用ValueType 值类型还是Reference Type 引用类型,关于这个, ...

  6. Leetcode747.Largest Number At Least Twice of Others至少是其他数字两倍的最大数

    在一个给定的数组nums中,总是存在一个最大元素 . 查找数组中的最大元素是否至少是数组中每个其他数字的两倍. 如果是,则返回最大元素的索引,否则返回-1. 示例 1: 输入: nums = [3, ...

  7. 跟我一起认识axure（一）

    第一步下载:https://www.axure.com.cn/ 第二步点击安装,一路next 第三步:认识Axure RP工作界面

  8. 找顺数【数位dp】

    输出1到n中含有6的数的个数. 样例输入 100 样例输出 19 找规律感觉好难想(好像是什么100以内有19个,200以内有19*2个,600以内115个,700以内214个...,1000以内有2 ...

  9. jq获取浏览器可视窗口的高度

    <script> var window_height = $(window).height(); </script>

  10. el标签 2016-06-05 21:39 477人阅读 评论(15) 收藏

    JSP EL语言定义 E L(Expression Language) 目的:为了使JSP写起来更加简单. 表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 JSP ...