html生成随机颜色,JavaScript生成随机颜色值的两种方式方法

为了营造网页的绚丽效果,有时候会使用让一些文本或者是元素每次刷新都呈现出不同的颜色样式,阿萌此次就来说一说两种实现随机颜色值的概念方法。

此次介绍的两种思路是这样的:

①利用数组或者是文本先定义好部分颜色值,然后随机抽取。

②利用随机函数通过特殊定义来生成颜色值。

第一种,通过数组先定义几个需求的颜色值,然后随机抽取,这样用的比较多,毕竟万一随机到不舒服的颜色还会给网站造成负面效果。

我是颜色

var getColorArr = new Array("000000","D600FF","FF0000","0000FF","00A836");

var getRandomColor = '#' + getColorArr[Math.floor(Math.random()*getColorArr.length)];

document.getElementById('coo1').style.color=getRandomColor;

效果浏览:我是颜色

第二种,这种方法也比较简便,其实纵观颜色值,从#000000到#ffffff。看到这我们就应能联想到十六进制,那么我们就可以通过随机产生6位的十六进制数来作为颜色值。

我是颜色

var getRandomColor = '#'+Math.floor(Math.random()*16777215).toString(16);

document.getElementById('coo2').style.color=getRandomColor;

效果浏览:我是颜色

其实还有其他方式随机生成颜色值的,例如定义字符串“0~F”,然后循环随机抽取一个字符,但是其实方式都差不多,我也就不多说了,如果有不理解的或者觉得代码有缺陷的,希望联系我探讨和改进,谢谢。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值