基于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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
用PHP读注册表
2006/10/09 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php如何连接sql server
2015/10/16 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
构建Python包的五个简单准则简介
2015/06/15 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
使用Tkinter制作信息提示框
2020/02/18 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
python 模拟登录B站的示例代码
2020/12/15 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
两只小狮子教学反思
2014/02/05 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
电工技术比武方案
2014/05/11 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python