基于javascript实现随机颜色变化效果


Posted in Javascript onJanuary 14, 2016

本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>随机颜色变化效果</title> 
<style type="text/css">
#thediv{
 width:100px;
 height:100px;
}
</style>
<script type="text/javascript"> 
var colorList=["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007"]; 
for(var i=0;i<colorList.length;i++){ 
 var bgColor=getColorByRandom(colorList); 
} 
function getColorByRandom(colorList){ 
 var colorIndex=Math.floor(Math.random()*colorList.length); 
 var color=colorList[colorIndex]; 
 colorList.splice(colorIndex,1); 
 return color; 
} 
window.onload=function(){
 var odiv=document.getElementById("thediv");
 function func(){
  odiv.style.backgroundColor=getColorByRandom(colorList);
 }
 setInterval(func,1000);
}
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

另一个js函数实现随机颜色:

function randomcolor()
{
var colorvalue=["0","2","3","4","5","6","7","8","9","a","b","c","d","e","f"],
colorprefix="#",
index;
for(var i=0;i < 6; i++){
index=Math.round(Math.random()*14);
colorprefix+=colorvalue[index];
}
return colorprefix;
}
var test=randomcolor();
alert(test);

以上就是本文的全部内容,希望对大家的学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
js实现的map方法示例代码
Jan 13 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
JavaScript事件类型中UI事件详解
Jan 14 #Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 #Javascript
详解JavaScript中localStorage使用要点
Jan 13 #Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 #Javascript
jquery悬浮提示框完整实例
Jan 13 #Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 #Javascript
jQuery简单操作cookie的插件实例
Jan 13 #Javascript
You might like
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
Vue.use源码分析
2017/04/22 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
ES6 十大特性简介
2020/12/09 Javascript
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
党员民主评议个人总结
2014/10/20 职场文书
500字小学生检讨书
2015/02/19 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript