基于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学习网址备忘
May 29 Javascript
我见过最全的个人js加解密功能页面
Dec 12 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 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&amp;MYSQL留言板源码
2020/07/19 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
行政经理岗位职责
2015/04/15 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书