下面提供了三种获取随机颜色值的方法

方法一:

创建一个颜色 HEX 值数组,然后随机抽取这个数组里6个值,组合生成颜色。

function color1(){
var color = "";
var colors = [0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];
for(var i=0;i<6;i++){
var n = Math.ceil(Math.random()*15);
color += "" + colors[n];
if(i==5){
return "#"+color;
}
}
}

简写:

function color4(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}

方法二:

在0-16777215之间的生成一个随机数,然后转换为16进制,如果没有6位数就在前面加 0。

function color2(){
var color = Math.ceil(Math.random()*16777215).toString(16);
while(color.length<6){
color = "0" + color;
}
return "#"+color;
}

方法三:

这个和上面那个方法差不多,随机数转成16进制,和前面5个0的字符生成一个长字符串,再截取字符串最后6位字符。

function color3(){
return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
}

js 给样式添加随机颜色的更多相关文章

  1. JS多种方法实现随机颜色;

    JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.实现随机颜色的方法有多种,下面来看看具体的实现代码: 方法一: var getRandomColor = function() { ...

  2. 用 js 写一个获取随机颜色的程序

    function getColor(){ var color="#"; for(var i=0;i<6;i++){ color+=(Math.random()*16 | 0) ...

  3. 原生js实现的一个随机颜色的简单效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  4. JS中取整以及随机颜色问题

    前言:感觉自己已经好久好久没有写博客了,最近都是在写在线笔记比较多.现在来到新公司了,昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术.下午在看一个游戏代码的时候,发现了几个别人留下的不错的 ...

  5. JS实现随机颜色的3种方法与颜色格式的转化

    JS实现随机颜色的3种方法与颜色格式的转化   随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...

  6. js随机生成验证码以及随机颜色

    Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...

  7. 原生js实现多个随机大小颜色位置速度小球的碰壁反弹

    文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...

  8. 获取随机颜色js

    获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...

  9. JS一行代码,生成一个16进制随机颜色,简单粗暴。

    var color = '#'+ Math.random().toString(16).substr(-6); document.body.style.backgroundColor = color; ...

随机推荐

  1. [Cocos2D-x For WP8]Box2D物理引擎

    物理引擎通过为刚性物体赋予真实的物理属性的方式来计算运动.旋转和碰撞反映.为每个游戏使用物理引擎并不是完全必要的—简单的“牛顿”物理(比如加速和减速)也可以在一定程度上通过编程或编写脚本来实现.然而, ...

  2. 【BZOJ】1104: [POI2007]洪水pow

    题意 给一个\(n * m(1 \le n, m \le 1000)\)的矩阵,如果\(a_{i, j}\)为正表示城市.\(|a_{i, j}|(|a_{i, j}| \le 1000)\)是格子\ ...

  3. 【HDU】3516 Tree Construction

    http://acm.hdu.edu.cn/showproblem.php?pid=3516 题意:平面n个点且满足xi<xj, yi>yj, i<j.xi,yi均为整数.求一棵树边 ...

  4. Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_GiftAnimationView"

    1> error 详情: Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_GiftAnimationView&quo ...

  5. Maven_根据不同个环境打包, 获取不同的配置文件等等

    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 3 ...

  6. 八、天气App案例

    该app为 现版本 SDK 8.4 Xcode 一.新建项目 运行Xcode 选择 Create a new Xcode project ->Single View Application 命名 ...

  7. 获取IP(windows和linux)

    #ifdef _WIN32 #include <winsock2.h> #include <Ws2tcpip.h> #pragma comment(lib,"ws2_ ...

  8. UML(一):类、接口、抽象类

    一.类之间的关系 1.继承(包括继承类+接口).聚合.组合.依赖.关联: 1.1 类图表示: 第一行:类名(如果是抽象类斜体) 第二行:特性(字段和属性) 第三行:操作(方法或行为) 操作和特性都分三 ...

  9. django1.9 创建项目和app并初始化项目

    创建项目: django-admin startproject  mytest04 创建app: python manage.py startapp app04 配置:settings.py 1. 2 ...

  10. android几个实用的判定代码

    之前项目有几个判定代码很实用,特此做一个整理. 一.验证手机格式是否正确 //判断手机号码是否合理 private boolean judgePhoneNums(String phoneNums) { ...