Простенькие часы, набросанные на скорую руку с использованием -ms-Transform:rotate работали только в ИЕ9 (hta, поэтому без кроссбраузерных изысков). Знакомые попросили сделать и для ИЕ8, в связи с чем разыскал этот пример. Оказалось, что matrix вращает весьма забавно: верхняя и левая граница не смещаются, поэтому вращение получается, как если кубик крутить в углу коробки. Вот "часы", в которых, кроме матричного фильтра используется смещение абсолютно позиционируемых элементов. Забавно, но в ИЕ9 рендерится гораздо хуже, чем в ИЕ8 (видимо, чтобы все переходили на -ms-Transform), на более старых не проверял. clock.hta:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sergeant</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script language="JScript">
moveTo(screen.availWidth-250,0);
self.resizeTo(250,250);
</script>
<hta:application
applicationName="matrix-clock-IXc"
border="none"
caption="no"
icon="%SystemRoot%/system32/twext.dll"
innerBorder="no"
scroll="no"
selection="no"
singleInstance="yes"
version="0.5"
/>
</head>
<body bgcolor="inactivecaption"></body>
<script>
var
g=Math.PI/180,
h={ //hands
h:{c:'windowtext',i:'dh',l:50,w:5},
m:{c:'windowtext',i:'dm',l:80,w:3},
s:{c:'crimson',i:'ds',l:100,w:1}
},
m=new Date(),
r=100, //radius
t,
x=~~document.documentElement.clientWidth/2, //center position x
y=~~document.documentElement.clientHeight/2; //center position y
t=document.createElement('DIV');
t.id='dd';
t.style.pixelLeft=100;
t.style.pixelTop=0.65*r;
t.style.position='absolute';
t.style.textAlign='center'
t.style.width='50px';
document.documentElement.appendChild(t);
fh(h.h);
fh(h.m);
fh(h.s);
fd(12,24,0,'windowtext');
fd(60,6,16,'graytext');
function fc(){ //clock
t=new Date();
if(t.getSeconds()==m.getSeconds())window.setTimeout('fc()',10);
else{
fr(ds,6*(m.getSeconds()+1));
if(t.getMinutes()!=m.getMinutes()){
fr(dm,6*(m.getMinutes()+1));
fr(dh,30*m.getHours()+m.getMinutes()/2);
if(t.getDate()!=m.getDate())ff();
}
m=t;
window.setTimeout('fc()',990);
}
}
function fd(a,b,e,f){ //digits a-number b-size e-intro f-color
for(var i=0;i<a;i++){
t=document.createElement('DIV');
t.innerText=i==59?0:i+1;
t.style.color=(i+1)%5?f:'windowtext';
t.style.fontSize=t.style.height=t.style.lineHeight=t.style.width=b+'px';
t.style.pixelLeft=x-b/2 +Math.sin(360/a*g*(i+1))*(r-e);
t.style.pixelTop=y-b/2 -Math.cos(360/a*g*(i+1))*(r-e);
t.style.position='absolute';
t.style.textAlign='center'
document.documentElement.appendChild(t);
}
}
function ff(){ //date
dd.innerText=
m.getDate()+'.'+(m.getMonth()>8?m.getMonth()+1:'0'+(m.getMonth()+1))+
'\n'+m.getFullYear();
}
function fh(e){ //hands
t=document.createElement('DIV');
t.id=e.i;
t.style.backgroundColor=e.c;
t.style.height=e.l+'px';
t.style.position='absolute';
t.style.width=e.w+'px';
t.style.filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand")';
document.documentElement.appendChild(t);
}
function fr(e,f){ //rotate
var
d=e.filters.item(0),
c=Math.cos(f*g),
s=Math.sin(f*g),
l=~~e.style.height.substring(0,e.style.height.length-2),
w=~~e.style.width.substring(0,e.style.width.length-2);
d.M11=c,d.M12=-s,d.M21=s,d.M22=c;
e.style.pixelTop=(y-l)+l*(c>0?1-c:1)+(c>0?1:0)-(w-1)/2;
e.style.pixelLeft=(x-l)+l*(s<0?1+s:1)+(s<0?1:0)-(w-1)/2;
}
window.onload=function(){
fr(ds,6*m.getSeconds());
fr(dm,6*m.getMinutes());
fr(dh,30*m.getHours()+m.getMinutes()/2);
fc();ff();
}
document.oncontextmenu=function(){
window.close();
}
</script>
</html>
Кроме того, поигравшись с преобразованиями, нашел решение давнишней проблемы: в головную контору периодически надо отправлять отсканированные в pdf документы с "синими" подписями в каждой строке. Отсканировать подпись - не проблема, но уж больно они одинаковые, когда подряд. Пример работает с дивами, но, кому надо, имг подставят... random.hta:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<hta:application
id="HTApp"
/>
<style type="text/css">
*{color:navy;font:normal 14px/16px Arial;margin:0;padding:0;}
body{overflow:hidden;}
</style>
</head>
<body onkeydown="if(event.keyCode==27)window.close();">
</body>
<script type="text/jscript" language="JScript">
var t;
for(var i=0;i<10;i++){
t=document.createElement('DIV');
t.innerText='Подпись';
t.style.filter='progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand")';
t.style.margin='5px 0 5px 200px';
// t.style.position='absolute';
document.documentElement.appendChild(t);
}
var d=document.getElementsByTagName('DIV');
for(var i=0;i<d.length;i++){
var f=d[i].filters.item(0);
f.M11=0.6+Math.random()/3,
f.M12=-0.5-Math.random()/10,
f.M21=0.1-Math.random()/5,
f.M22=0.9+Math.random()/25;
}
</script>
</html>