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 相关文章推荐
JavaScript中常见陷阱小结
Apr 27 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
微信小程序实现评论功能
Nov 28 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
借助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操作excel文件 基于phpexcel
2010/07/02 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
上课玩手机检讨书
2014/02/08 职场文书
教师批评与自我批评
2014/10/15 职场文书
装修安全责任协议书
2016/03/22 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python