基于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来定位
Feb 20 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 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
十大“创意”战术!
2020/03/04 星际争霸
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
Python常用模块用法分析
2014/09/08 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Django REST framework视图的用法
2019/01/16 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
《值日生》教学反思
2014/02/17 职场文书
小学运动会前导词
2015/07/20 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js