基于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 组件之旅(一)分析和设计
Oct 28 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
jQuery的position()方法详解
Jul 19 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Python中decorator使用实例
2015/04/14 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
男女朋友协议书
2014/04/23 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
听课评课活动心得体会
2016/01/15 职场文书
2019个人工作总结
2019/06/21 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript