基于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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
javascript实现简单页面倒计时
Mar 02 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控制网页过期时间的代码
2008/09/28 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
js option删除代码集合
2008/11/12 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
vue中的计算属性实例详解
2018/09/19 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python开启debug模式的方法
2019/06/27 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
红旗方阵解说词
2014/02/12 职场文书
校园标语大全
2014/06/19 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
追讨欠款律师函
2015/05/27 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
导游词之贵州织金洞
2019/10/12 职场文书