基于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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 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
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
react组件基本用法示例小结
2020/04/27 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Django如何将URL映射到视图
2019/07/29 Python
python二元表达式用法
2019/12/04 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
工程地质勘察专业大学生求职信
2013/10/13 职场文书
师范学院教师自荐书
2014/01/31 职场文书
社区庆八一活动方案
2014/02/02 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
高中教师个人总结
2015/02/10 职场文书
单位同意报考证明
2015/06/17 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
mysql 获取时间方式
2022/03/20 MySQL