suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementieren Sie einen zufälligen Farbänderungseffekt basierend auf Javascript_Javascript-Fähigkeiten

Implementieren Sie einen zufälligen Farbänderungseffekt basierend auf Javascript_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:20:071226Durchsuche

Dieser Artikel erklärt den zufälligen Farbänderungseffekt basierend auf JavaScript und stellt ihn Ihnen als Referenz zur Verfügung. Der spezifische Inhalt ist wie folgt

<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>

Eine weitere js-Funktion zum Implementieren zufälliger Farben: 

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);

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erkennen Sie mithilfe von javascript_javascript-Kenntnissen, ob das Flash-Plug-in deaktiviert istNächster Artikel：So erkennen Sie mithilfe von javascript_javascript-Kenntnissen, ob das Flash-Plug-in deaktiviert ist

In Verbindung stehende Artikel

Mehr sehen