基于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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
了解javascript中的Dom操作
May 27 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
js实现单元格拖拽效果
Feb 10 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 函数语法介绍一
2009/06/14 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
Python合并多个Excel数据的方法
2018/07/16 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
环保建议书300字
2014/05/14 职场文书
社区娱乐活动方案
2014/08/21 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python