前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS生成随机颜色的简单方式,16进制自动补0

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

作者头像
德顺
发布2019-11-12 23:17:33
4.8K0
发布2019-11-12 23:17:33
举报
文章被收录于专栏:前端资源

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

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

RGB随机颜色:

代码语言:javascript
复制
<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进制随机颜色:

代码语言:javascript
复制
<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://cloud.tencent.com/developer/article/1537818

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • RGB随机颜色:
  • 16进制随机颜色:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档