基于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 开天辟地入门篇一
Dec 09 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue实现固定位置显示功能
May 30 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
vue实现输入一位数字转汉字功能
Dec 13 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
用缓存实现静态页面的测试
2006/12/06 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
django中瀑布流写法实例代码
2019/10/14 Python
python实现实时视频流播放代码实例
2020/01/11 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
学习雷锋精神心得体会范文
2014/03/12 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
小学四年级作文之写景
2019/08/23 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
总结Python连接CS2000的详细步骤
2021/06/23 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技