2014-09-04
304
<html lang="ru">
<head>
<title>Анимационные эффекты | Часы со стрелками</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<style type="text/css">
<!--
BODY
{
background: white;
}
TABLE.main,
TABLE.clock
{
width: 100%;
height: 100%;
font: bold 12px "Times New Roman";
}
#ID_ANIMATE
{
position: relative;
width: 128px;
height: 128px;
overflow: hidden;
background: #EEEEEE;
border: 1px solid black;
}
#ID_ANIMATE DIV
{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 1;
background: black;
}
-->
</style>
</head>
<body>
<TABLE class="main">
<TR>
<TD align="center" valign="middle">
<DIV ID="ID_ANIMATE"><TABLE class="clock" cellpadding="4" cellspacing="0">
<TR>
<TD colspan="3" align="center">12</TD>
</TR>
<TR>
<TD valign="middle">9</TD>
<TD width="100%" height="100%"></TD>
<TD valign="middle">3</TD>
</TR>
<TR>
<TD colspan="3" align="center">6</TD>
</TR>
</TABLE></DIV>
</TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
var oAnimate = document.getElementById("ID_ANIMATE");
var nWidth = oAnimate.offsetWidth;
var nHeight = oAnimate.offsetHeight;
var nHourLen = Math.round(nWidth / 32 * 5);
|
|
|
var nMinLen = Math.round(nWidth / 32 * 7);
var nSecLen = Math.round(nWidth / 32 * 10);
var aDivHour = new Array(nHourLen);
var aDivMin = new Array(nMinLen);
var aDivSec = new Array(nSecLen);
function GetArrowDim(val, r, d)
{
var fAngle = Math.PI / 2 - val * 2 * Math.PI / d;
return {
dx: r * Math.cos(fAngle),
dy: -r * Math.sin(fAngle)
};
}
function sgn(x)
{
return (x > 0)? 1: ((x < 0)? -1: 0);
}
function DrawArrow(raDivs, oArrDim)
{
var dx, dy;
var nCount;
if(Math.abs(oArrDim.dx) > Math.abs(oArrDim.dy))
{
dy = oArrDim.dy / Math.abs(oArrDim.dx);
dx = sgn(oArrDim.dx);
nCount = Math.abs(oArrDim.dx);
}
else
{
dx = oArrDim.dx / Math.abs(oArrDim.dy);
dy = sgn(oArrDim.dy);
nCount = Math.abs(oArrDim.dy);
}
var x = Math.round(nWidth / 2);
var y = Math.round(nHeight / 2);
for(var i = 0; i < raDivs.length; i++)
{
var oDiv = raDivs[i];
if(i < nCount)
{
oDiv.style.top = Math.round(y).toString() + "px";
oDiv.style.left = Math.round(x).toString() + "px";
oDiv.style.display = "block";
}
else
oDiv.style.display = "none";
x += dx;
y += dy;
}
}
function OnTimer()
{
var oDate = new Date();
DrawArrow(aDivHour, GetArrowDim(oDate.getHours(), nHourLen, 12));
DrawArrow(aDivMin, GetArrowDim(oDate.getMinutes(), nMinLen, 60));
DrawArrow(aDivSec, GetArrowDim(oDate.getSeconds(), nSecLen, 60));
}
function CreateDivs(raDivs, nCount)
{
for(var i = 0; i < nCount; i++)
{
raDivs[i] = document.createElement("DIV");
oAnimate.appendChild(raDivs[i]);
}
}
CreateDivs(aDivHour, nHourLen);
CreateDivs(aDivMin, nMinLen);
CreateDivs(aDivSec, nSecLen);
OnTimer();
window.setInterval(OnTimer, 1000);
// -->
</script>
<noscript>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html> /17/.
