文章地址 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. WPF数据绑定详解

    元素绑定 数据绑定最简单的形式是,源对象是WPF元素而且源属性是依赖属性.依赖项属性具有内置的更改通知支持,当在源对象中改变依赖项属性的值时,会立即更新目标对相中的绑定属性. <!--Xaml程 ...

  2. [新手必看] 17个常见的Python运行时错误

    对于刚入门的Pythoner在学习过程中运行代码是或多或少会遇到一些错误,刚开始可能看起来比较费劲.随着代码量的积累,熟能生巧当遇到一些运行时错误时能够很快的定位问题原题.下面整理了常见的17个错误, ...

  3. SpringBoot启动报错Failed to determine a suitable driver class

    SpringBoot启动报错如下 Error starting ApplicationContext. To display the conditions report re-run your app ...

  4. c标签 if else c标签 总结

    [b]STL标签用法 关键字:JSTL标签.<c:choose>.<c:forEach>.<c:forTokens>.<c:if>.<c:impo ...

  5. python ndarray相关操作：重构

  6. jmeter的关联-正则表达式的应用

    LoadRunnner中的关联为web_reg_save_param,查找左右边界,下次请求的时候会用到上次请求服务器返回的数据,那么我们把符合左右边界的数据保存下来,以便下次请求的时候用到. jme ...

  7. 2019-8-31-C#-标准性能测试高级用法

    title author date CreateTime categories C# 标准性能测试高级用法 lindexi 2019-08-31 16:55:58 +0800 2018-07-08 0 ...

  8. python 类的创建

  9. SDUT-2140_判断给定图是否存在合法拓扑序列

    数据结构实验之图论十:判断给定图是否存在合法拓扑序列 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给定一个有向图,判 ...

  10. SDUT-3363_驴友计划

    数据结构实验之图论七:驴友计划 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 做为一个资深驴友,小新有一张珍藏的自驾游 ...