隨機改變顏色

     隨便寫的小東西^__^

     先來效果圖,每隔一秒隨機改變背景色和字體顏色。


下面是HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
	<title>RunJS 演示代碼</title>
  </head>
<body>
	<div class='content' style='color:#ddd;background-Color:#999'>
		<div style="margin:30% 20%;">
			 <button id="btnStop">
		WIPE OUT 
	</button>
			<span id="span">THE FLASH COLOR</span>
		</div>
   
  </div>
	
  </body>
</html>


下面是JS代碼,引用了JQUERY插件

$(document).ready(function(){
	changeColor();
 	
});
var mainOperation = function(){
var objBackColor = getRandomColor();
	var objFontColor = getRandomColor();
	$(".content").css({'color':objFontColor,'background-color':objBackColor});
 // $(".content").css('background-color',objBackColor);
}
		var changeColor = function(){
			var timer = setInterval('mainOperation()',1000);
	document.getElementById("btnStop").onclick = function(){
		window.clearInterval(timer);
		document.getElementById("span").innerHTML ="^__^||";
	};
		}
var getRandomColor = function(){
		var ColorR = Math.floor(Math.random()*255).toString(16);
	var ColorG = Math.floor(Math.random()*255).toString(16);
	var ColorB = Math.floor(Math.random()*255).toString(16);
	ColorR = 1 == ColorR.length ? '0'+ ColorR : ColorR;
	ColorG = 1 == ColorG.length ? '0'+ ColorG : ColorG;
	ColorB = 1 == ColorB.length ? '0'+ ColorB : ColorB;
		return '#'+ColorR+ColorG+ColorB;
	}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章