基于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 相关文章推荐
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 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截取中文字符串的问题
2006/07/12 PHP
Zend公司全球首推PHP认证
2006/10/09 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
微信JS接口大全
2016/08/25 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python银行系统实现源码
2019/10/25 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
求职简历自荐信范文
2013/10/21 职场文书
运动会通讯稿400字
2014/01/28 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年读书月活动总结
2015/03/26 职场文书
同学聚会感言一句话
2015/07/30 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
python基础学习之递归函数知识总结
2021/05/26 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python