zoukankan      html  css  js  c++  java
  • JavaScript随机生成颜色的方法

    这篇文章主要介绍了JavaScript随机生成颜色的方法的相关资料,非常不错,代码简单易懂,具有参考借鉴价值,需要的朋友可以参考下

     

    废话不多说了直接给大家贴js代码了,具体代码如下所述:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <button id="btn1">调用第一种</button>
    <button id="bnt2">调用第二种</button>
    <button id="btn3">调用第三种</button>
    <script>
    var btn1=document.getElementById('btn1');
    btn1.onclick=function(){
    document.body.style.background=bg1()
    };
    var btn2=document.getElementById('bnt2');
    btn2.onclick=function(){
    document.body.style.background=bg2();
    };
    var btn3=document.getElementById('btn3');
    btn3.onclick=function(){
    document.body.style.background=bg3();
    };
    function bg1(){
    return '#'+Math.floor(Math.random()*256).toString(10);
    }
    function bg2(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
    }
    function bg3(){
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
    }
    </script>
    </body>
    </html>

    (转载)http://www.jb51.net/article/94832.htm

  • 相关阅读:
    Vue 项目结构介绍
    使用命令行创建 Vue 项目
    GitHub无法访问怎么办?-- 已解决
    Spa 单页面应用简介
    JetBrains WebStorm 常用快捷键总结
    使用 WebStorm + Vue 写一个九九乘法表
    使用 WebStorm 2018 运行第一个 Vue 程序
    小工具
    elasticsearch安装部署
    命令行连接ftp
  • 原文地址:https://www.cnblogs.com/snowlove/p/6067683.html
Copyright © 2011-2022 走看看