指令碼和css控制！文字漸變效果！

sunnylovecmc發表於2009-11-08
指令碼CSS

 <!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" />
<title>無標題文件</title>

<style>

#z{
 color: rgb(0,0,0);
 font-size:1000%;
 position:absolute;
 left:5px;
 top:50px;
 border:dotted 1px blue;
}

</style>


<script language="javascript">

var timer;

function change(){
 
 document.getElementById('z').style.color = 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';
 
 document.getElementById('z').style.left = Math.floor(Math.random()*200)+"px";
 //document.getElementById('z').style.top = Math.floor(Math.random()*500)+"px";
 
 
 var time = new Date();

 
 document.getElementById('clock').innerHTML = time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+"."+time.getMilliseconds();
 
 timer = window.setTimeout("change()", 1);
}

function stopChange(){
 window.clearTimeout(timer);
}


var dis;
var distimer;

function moveto(leftpx){
 //得到當前位置
 dis = leftpx;
 window.clearTimeout(distimer);
 var now = document.getElementById('z').offsetLeft;
 if(leftpx == now){
  //nothing to do 
 }else{
  //迴圈移動
  move();
 }
}

function move(){
 
 if(document.getElementById('z').offsetLeft == dis){
  return true;
 }
 var step = (dis > document.getElementById('z').offsetLeft ? 1 : -1);
 
 document.getElementById('z').style.left = document.getElementById('z').offsetLeft + step + 'px';
 distimer = window.setTimeout(move, 10);
}

var nowYellowColor;//99~255
var ctimer;

function cColor(){
 nowYellowColor = 0;
 window.clearTimeout(ctimer);
 changebg();
}

function changebg(){
 nowYellowColor++;
 if(nowYellowColor >= 255){
  return true;
 }
 
 document.getElementById('z').style.backgroundColor = 'rgb('+nowYellowColor+','+nowYellowColor+','+nowYellowColor+')';
 
 ctimer = window.setTimeout(changebg, 1);
}


</script>
</head>

<body>

<div id="z" onclick="cColor()">文字</div>
<button onclick="change();">變</button>
<button onclick="stopChange();">停</button>

<button onmouseover="moveto(0);">&lt;&lt;</button>
<button onmouseover="moveto(500);">&gt;&gt;</button>

<div id="clock"></div>
</body>
</html>

相關文章