javascript生成随机颜色示例代码


Posted in Javascript onMay 05, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body{ 
font-size:12px; 
font-family:"Courier New", Courier, monospace; 
letter-spacing:5px; 
} 
ul{ 
list-style:none; 
} 
li{ 
width:130px; 
height:130px; 
line-height:130px; 
vertical-align:middle; 
text-align:center; 
float:left; 
margin-left:20px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<title>javascript生成随机颜色</title> 
<script type="text/javascript"> 
$(function(){ 
$("ul li").each(function(){ 
$(this).css("background-color",getRandomColor()); 
}); 
}) 
function getRandomColor() 
{ 
var c = '#'; 
var cArray = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; 
for(var i = 0; i < 6;i++) 
{ 
var cIndex = Math.round(Math.random()*15); 
c += cArray[cIndex]; 
} 
return c; 
} </script> 
</head> 
<body> 
<div> 
<ul> 
<li>第一个色块</li> 
<li>第二个色块</li> 
<li>第三个色块</li> 
<li>第四个色块</li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
借助javascript代码判断网页是静态还是伪静态
May 05 #Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 #Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 #Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 #Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 #Javascript
javascript 获取元素样式必杀技
May 04 #Javascript
javascript操作excel生成报表全攻略
May 04 #Javascript
You might like
解析PHP汉字转换拼音的类
2013/06/18 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
javascript制作2048游戏
2015/03/30 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
杨善洲观后感
2015/06/04 职场文书
2016年元旦致辞
2015/08/01 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
Go语言入门exec的基本使用
2022/05/20 Golang