js 给样式添加随机颜色
下面提供了三种获取随机颜色值的方法
方法一:
创建一个颜色 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 给样式添加随机颜色的更多相关文章
- JS多种方法实现随机颜色;
JS随机颜色有很多地方要用到:比如大家看到很多标签连接都是五颜六色.实现随机颜色的方法有多种,下面来看看具体的实现代码: 方法一: var getRandomColor = function() { ...
- 用 js 写一个获取随机颜色的程序
function getColor(){ var color="#"; for(var i=0;i<6;i++){ color+=(Math.random()*16 | 0) ...
- 原生js实现的一个随机颜色的简单效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...
- JS中取整以及随机颜色问题
前言:感觉自己已经好久好久没有写博客了,最近都是在写在线笔记比较多.现在来到新公司了,昨天刚刚完成一个项目所以今天有空研究研究一下前端方面的技术.下午在看一个游戏代码的时候,发现了几个别人留下的不错的 ...
- JS实现随机颜色的3种方法与颜色格式的转化
JS实现随机颜色的3种方法与颜色格式的转化 随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验.所以这篇文章主要介绍了JS实现随机颜色的3种 ...
- js随机生成验证码以及随机颜色
Javascript通过Math.random()随机生成验证码. 代码如下: <!DOCTYPE html><html> <head> <meta char ...
- 原生js实现多个随机大小颜色位置速度小球的碰壁反弹
文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...
- 获取随机颜色js
获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...
- JS一行代码,生成一个16进制随机颜色,简单粗暴。
var color = '#'+ Math.random().toString(16).substr(-6); document.body.style.backgroundColor = color; ...
随机推荐
- 【HDU】1850 Being a Good Boy in Spring Festival
http://acm.hdu.edu.cn/showproblem.php?pid=1850 题意:同nim...顺便求方案数... #include <cstdio> #include ...
- PHP面向对象学习五 类中接口的应用
类中接口的应用 接口:一种成员属性全部为抽象的特殊抽象类,在程序中同为规范的作用 抽象类:1.类中至少有一个抽象方法.2.方法前需要加abstract 接口: 1.类中全部为抽象方法,抽象方法前不 ...
- PHP curl 模拟POST 上传文件(含php 5.5后CURLFile)
<?php /** * Email net.webjoy@gmail.com * author jackluo * 2014.11.21 * */ //* function curl_post( ...
- C#中WinForm程序退出方法技巧总结(转)
本文实例总结了C#中WinForm程序退出方法技巧.分享给大家供大家参考.具体分析如下: 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit ...
- mongodb数据导入导出以及备份恢复
昨日在公司收到游戏方发来一个1G多的数据文件,要求导入联运账号中.细细一看,纳尼!文件竟然是BSON格式. 哇塞,这不是去年给大家分享的NoSql中的MongoDB的备份文件吗? 于是搭好环境 1.启 ...
- 序列化,反序列化,模拟ATM机
package com.bank.unionpay; //银行卡的接口 public interface I_yinhangka { //抽象方法 //public abstract默认修饰抽象的 p ...
- HTML静态网页 Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
- HTML - 毛玻璃 滤镜 模糊
css 秘密花园 http://dabblet.com/gist/d9f243ddd7dbffa341a4 场景,背景图片 + 毛玻璃遮盖 原理:利用background的cover特性,将毛玻璃的区 ...
- 创建Struct2的web应用(一)
1.上http://struts.apache.org/ 下载Struct2 2.解压缩,将lib文件夹内的部分JAR复制到java web应用的WEB-INF/lib目录下.所需JAR: commo ...
- BigInteger在Java8中的改进
BigInteger在Java8里增加了一组方法: 123 public byte byteValueExact()public int intValueExact()public long long ...