基于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 相关文章推荐
JQuery从头学起第二讲
Jul 04 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 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缩小png图片不损失透明色的解决方法
2013/12/25 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
php中如何执行linux命令详解
2018/11/06 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
UNIX文件系统常用命令
2012/05/25 面试题
雪山饭庄的创业计划书范文
2014/01/18 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
学生退学证明
2015/06/23 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB