专栏首页前端资源JS生成随机颜色的简单方式,16进制自动补0

JS生成随机颜色的简单方式,16进制自动补0

有时会遇到需要随机生成颜色的需求,可以使用下面的JS代码来实现。

分为两种,一种是 rgb() ,一种是16进制。

RGB随机颜色:

<script>
    function rgb(){//rgb颜色随机
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var rgb = 'rgb('+r+','+g+','+b+')';
        return rgb;
    }
</script>

16进制随机颜色:

<script>
    function color16(){//十六进制颜色随机
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        //var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
        var color = '#'+(Array(6).join(0) + (r.toString(16)+g.toString(16)+b.toString(16))).slice(-6);
        return color;
    }
</script>

这地多谢网友提醒,因为评论显示是访客,暂时不知道怎么称呼,原始的方法会出现16进制不足6位,无法显示颜色的问题,需要使用“前补0”的的方法补齐6位,这样就可以正常显示了。

前补0具体方法实现:JS实现16进制颜色、数字前自动补0

声明:本文由w3h5原创,转载请注明出处:《JS生成随机颜色的简单方式,16进制自动补0》 https://www.w3h5.com/post/281.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • git仓库包含子仓库时,add报错的解决办法

    本文主要介绍在一个仓库内部克隆另外一个仓库,后续该如何进行管理。最近在尝试使用 Hexo 博客,在添加主题后使用 git 的 add 命令时报错。

    德顺
  • 分享:12个CSS小技巧,让你的代码简洁高效

    你不需要分别添加 line-height 到每个 <p>,<h*>等。只要添加到 body 即可:

    德顺
  • Web/PhpStorm设置代码缩进后代码格式化不起效的解决方法

    PhpStorm 或者 WebStorm 等 JetBrains 系列软件默认的是 4个空格。

    德顺
  • CTO不写代码,真的可以吗?

    导读:CTO 在公司里是干嘛的?到底写不写代码?该不该做代码评审(Code Review),亲力亲为给程序员做出榜样?还是把握一下大方向,设计架构,管管程序员,...

    华章科技
  • 在AppCode中的razor调用HtmlHelper方法和UrlHelper方法

    using System.Web.WebPages; using System.Web.Mvc;

    javascript.shop
  • HTTP在要传输的内容大小未知时应该怎样

          一般情况HTTP的Header包含Content-Length域来指明报文体的长度。如: ?      有时候服务生成HTTP回应是无法确定消息大小...

    老白
  • 浅谈js的date对象对时间字符串的解析

    最近的时间都在开发社团内部的应用–隧道口,虽然只有简单的几个页面,但是依然是遇到了不少坑。 其中 date 的时间处理就是一个。

    用户1394570
  • 黑客游戏| Owasp juice shop (一)

    0x01 前言 最近看到一篇关于owasp juice shop的文章,觉的很有意思,斗哥就自己撸了个环境,上手后深深觉的这是一个很棒的漏洞靶场,所以就把该...

    漏斗社区
  • web.xml 配置中 classpath: 与 classpath*: 的区别

      通常我们一般使用这种写法实在web.xml中,比如spring加载bean的上下文时,如下代码:

    黑泽君
  • Classpath路径? 原

    1、src不是classpath, WEB-INF/classes,lib才是classpath,WEB-INF/ 是资源目录, 客户端不能直接访问。

    wuweixiang

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动