基于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继承的实现代码
Aug 05 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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的日期与时间函数技巧
2008/04/24 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Django实现网页分页功能
2019/10/31 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
幼儿教师求职信
2014/05/24 职场文书
党员志愿者活动总结
2014/06/26 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
一年级小学生评语大全
2014/12/25 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
运输公司工作总结
2015/08/11 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang