基于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 相关文章推荐
js有关元素内容操作小结
Dec 20 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
详解jquery选择器的原理
Aug 01 jQuery
小程序日历控件使用方法详解
Dec 29 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php页面缓存方法小结
2015/01/10 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
python插入排序算法的实现代码
2013/11/21 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python中np是做什么的
2020/07/21 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
意大利在线药房:Saninforma
2021/02/11 全球购物
客户代表自我评价范例
2013/09/24 职场文书
银行贷款委托书范本
2014/10/11 职场文书
商家认证委托书格式
2014/10/16 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python
windows server2008 开启端口的实现方法
2022/06/25 Servers