信鸽网

基于javascript实现随机颜色变化效果

  作者：bea

本文实例讲解了基于javascript实现随机颜色变化效果，分享给大家供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css">#thediv{ width:100px;

本文实例讲解了基于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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: