隨便寫的小東西^__^
先來效果圖,每隔一秒隨機改變背景色和字體顏色。
下面是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;
}