这是一个用PHP生成的纯JavaScript时钟
PHP代码不长，但是JavaScript代码就比较长了。
大家可以到http://disapart.oso.com.cn/temp/clock.php预览
也可以到http://disapart.oso.com.cn/temp/clock.txt下载原文件
<?
$height = 200;
$width = 200;
$left = 100;
$top = 100;
?>
<html><head><title>My Clock Example</title><script>
var height = <? echo $height; ?> ;
var width = <? echo $width; ?> ;
var left = <? echo $left; ?> ;
var top = <? echo $top; ?> ;
function getPos(i,time,percent,isLeft)
{
if(isLeft)
return (left+width*(1-Math.sin(3.1415926/30*(i*5-time))*percent/100)/2);
return (top+height*(1-Math.cos(3.1415926/30*(i*5-time))*percent/100)/2);
}
//function_onidle_start
function onidle()
{
var now = new Date();
var shi = now.getHours ()*5;
var fen = now.getMinutes ();
var miao = now.getSeconds ();
<?
for($t=0;$t<12;$t++)
{
?>
divShi<? echo $t; ?>.style.top = getPos ( <? echo $t; ?> ,shi+fen/12,50,0);
divShi<? echo $t; ?>.style.left = getPos ( <? echo $t; ?> ,shi+fen/12,50,1);
divFen<? echo $t; ?>.style.top = getPos ( <? echo $t; ?> ,fen ,75,0);
divFen<? echo $t; ?>.style.left = getPos ( <? echo $t; ?> ,fen ,75,1);
divMiao<? echo $t; ?>.style.top = getPos ( <? echo $t; ?> ,miao,99,0);
divMiao<? echo $t; ?>.style.left = getPos ( <? echo $t; ?> ,miao,99,1);
<?
}
?>
setTimeout("onidle();",250);
}
//function_onidle_end
</script><body onLoad="onidle();">
<div style="z-index:1;position:absolute;background-color:purple;left:<? echo $left+$width/2+3; ?>;top:<? echo $top; ?>;width:2;height:<? echo $height/2; ?>">
</div>
<?
for($t=0;$t<12;$t++)
{
?>
<div id=divShi<? echo $t; ?> style="z-index:4;position:absolute;"><font size=3 color=red ><? echo $t; ?></font></div>
<div id=divFen<? echo $t; ?> style="z-index:3;position:absolute;"><font size=3 color=green ><? echo $t*5; ?></font></div>
<div id=divMiao<? echo $t; ?> style="z-index:2;position:absolute;"><font size=3 color=blue ><? echo $t*5; ?></font></div>
<?
}
?>
</body>
</html>
|