Jump to content
  • 0

стрелки картинками

antisept

Asked by antisept,

 Share

Question

antisept Explorer

antisept

Posted
Posted

Здравствуйте. Есть скрипт часов:

<script LANGUAGE="JavaScript">
<!-- Begin
fCol = '000000';  //face colour.
sCol = 'ff0000';  //seconds colour.
mCol = '000000';  //minutes colour.
hCol = '000000';  //hours colour.
H = '....';
H = H.split('');
M = '.....';
M = M.split('');
S = '......';
S = S.split('');
Ypos = 0;
Xpos = 0;
Ybase = 8;
Xbase = 8;
dots = 12;
ns = (document.layers)?1:0;
if (ns) {
dgts = '1 2 3 4 5 6 7 8 9 10 11 12';
dgts = dgts.split(' ');
for (i = 0; i < dots; i++) {
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial,Verdana size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i = 0; i < M.length; i++) {
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i = 0; i < H.length; i++) {
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i = 0; i < S.length; i++) {
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
   }
}
else {
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 1; i < dots+1; i++) {
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < M.length; i++) {
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < H.length; i++) {
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < S.length; i++) {
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
document.write('</div></div>')
}
function clock() {
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;
if (ns) {
Ypos = window.pageYOffset+window.innerHeight-60;
Xpos = window.pageXOffset+window.innerWidth-80;
}
else {
Ypos = document.body.scrollTop + window.document.body.clientHeight - 60;
Xpos = document.body.scrollLeft + window.document.body.clientWidth - 60;
}
if (ns) {
for (i = 0; i < dots; ++i){
document.layers["nsDigits"+i].top = Ypos - 5 + 40 * Math.sin(-0.49+dots+i/1.9);
document.layers["nsDigits"+i].left = Xpos - 15 + 40 * Math.cos(-0.49+dots+i/1.9);
}
for (i = 0; i < S.length; i++){
document.layers["nx"+i].top = Ypos + i * Ybase * Math.sin(sec);
document.layers["nx"+i].left = Xpos + i * Xbase * Math.cos(sec);
}
for (i = 0; i < M.length; i++){
document.layers["ny"+i].top = Ypos + i * Ybase * Math.sin(min);
document.layers["ny"+i].left = Xpos + i * Xbase * Math.cos(min);
}
for (i = 0; i < H.length; i++){
document.layers["nz"+i].top = Ypos + i * Ybase * Math.sin(hrs);
document.layers["nz"+i].left = Xpos + i * Xbase * Math.cos(hrs);
   }
}
else{
for (i=0; i < dots; ++i){
ieDigits[i].style.pixelTop = Ypos - 15 + 40 * Math.sin(-0.49+dots+i/1.9);
ieDigits[i].style.pixelLeft = Xpos - 14 + 40 * Math.cos(-0.49+dots+i/1.9);
}
for (i=0; i < S.length; i++){
x[i].style.pixelTop = Ypos + i * Ybase * Math.sin(sec);
x[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(sec);
}
for (i=0; i < M.length; i++){
y[i].style.pixelTop = Ypos + i * Ybase * Math.sin(min);
y[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(min);
}
for (i=0; i < H.length; i++){
z[i].style.pixelTop = Ypos + i * Ybase*Math.sin(hrs);
z[i].style.pixelLeft = Xpos + i * Xbase*Math.cos(hrs);
   }
}
setTimeout('clock()', 50);
}
if (document.layers || document.all) window.onload = clock;
//  End -->
</script>

Возможно ли заменить в нем стрелки и фон циферблата на картинки? Я в js новичек, так что если можно, то объясните подробно.

Заранее спасибо.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
hf3 Explorer

hf3

Posted
Posted

Этому скрипту уже пади лет 10? Половина его уже неактуальна.

У меня он не запустился ни в ИЕ 8 , ни опере 10, ни в ФФ 3.5

Найдите лучше другой скрипт.

Возможно ли заменить в нем стрелки и фон циферблата на картинки?

фон можно наверное, а стрелки нет, так в невозможно вертеть изображения вокруг какой либо оси… И честно вообще не въехал как тут реализуются стрелки…

style.pixelLeft

Это вообще ;)

Link to comment
Share on other sites
  • 0
antisept Explorer

antisept

Posted
  • Author
Posted
Этому скрипту уже пади лет 10? Половина его уже неактуальна.

наверное. Я его в каком-то сборнике нашел.

а стрелки нет, так в невозможно вертеть изображения вокруг какой либо оси…

жалко ;) , но все равно спс.

Link to comment
Share on other sites
  • 0
antisept Explorer

antisept

Posted
  • Author
Posted

Вот нашел еще один скрипт:

<script LANGUAGE="JavaScript">
<!-- Begin
pX = 100;
pY = 100;
obs = new Array(13);
function ob() {
for (i = 0; i < 13; i++) {
if (document.all) obs[i] = new Array (eval('ob'+i).style,-100,-100);
else obs[i] = new Array (eval('document.ob'+i),-100,-100);
   }
}
function cl(a, b, c) {
if (document.all) {
if (a != 0) b += -1;
eval('c'+a+'.style.pixelTop='+(pY+(c)));
eval('c'+a+'.style.pixelLeft='+(pX+(b)));
}
else {
if (a != 0) b += 10;
eval('document.c'+a+'.top='+(pY+(c)));
eval('document.c'+a+'.left='+(pX+(b)));
   }
}
function runClock() {
for (i = 0; i < 13; i++) {
obs[i][0].left=obs[i][1]+pX;
obs[i][0].top=obs[i][2]+pY;
   }
}
var lastsec;
function timer() {
time = new Date ();
sec = time.getSeconds();
if (sec != lastsec) {
lastsec = sec;
sec = Math.PI * sec / 30;
min = Math.PI * time.getMinutes() / 30;
hr = Math.PI * time.getHours() / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i = 1; i < 6; i++) {
obs[i][1] = Math.sin(sec) * (44 - (i-1) * 11) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(sec) * (44 - (i-1) * 11) - 27;
}
for (i = 6;i < 10; i++) {
obs[i][1] = Math.sin(min) * (40 - (i-6) * 10) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(min) * (40 - (i-6) * 10) - 27;
}
for (i = 10; i < 13; i++) {
obs[i][1] = Math.sin(hr) * (37 - (i-10) * 11) - 16;
if (document.layers)obs[i][1] += 10;
obs[i][2] = -Math.cos(hr) * (37 - (i-10) * 11) - 27;
	  }
   }
}
function setNum() {
cl (0, -67, -65);
cl (1, 10, -51);
cl (2, 28, -33);
cl (3, 35, -8);
cl (4, 28, 17);
cl (5, 10, 35);
cl (6, -15, 42);
cl (7, -40, 35);
cl (8, -58, 17);
cl (9, -65, -8);
cl (10, -58, -33);
cl (11, -40, -51);
cl (12, -16, -56);
}
function startClock() {
ob();
setNum();
setInterval('timer()', 100);
setInterval('runClock()', 100);
}
// End -->
</script>
<style>
..num {color:white;width:30px;text-align:center; }
</style>

<body onLoad="java script:startClock();" bgcolor=#cccccc>

<div id="c0" style="position:absolute;left:36;top:36; z-index:2;">
<table>
<tr>
<td style="background:url('http://ссылка на мой фон');" width=120 height=120> 
</td>
</tr>
</table>
</div>
<div id="c1" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>1</b></div>
<div id="c2" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>2</b></div>
<div id="c3" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>3</b></div>
<div id="c4" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>4</b></div>
<div id="c5" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>5</b></div>
<div id="c6" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>6</b></div>
<div id="c7" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>7</b></div>
<div id="c8" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>8</b></div>
<div id="c9" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>9</b></div>
<div id="c10" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>10</b></div>
<div id="c11" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>11</b></div>
<div id="c12" class="num" style="position:absolute;left:20;top:-20; z-index:5;font-size:11px;"><b>12</b></div>

<div id="ob0" class="num" style="position:absolute;left:-20;top:-20;z-index:1">
 </div>
<div id="ob1" class="num" style="position:absolute;left:-20;top:-20;z-index:8">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob2" class="num" style="position:absolute;left:-20;top:-20;z-index:8">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob3" class="num" style="position:absolute;left:-20;top:-20;z-index:8">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob4" class="num" style="position:absolute;left:-20;top:-20;z-index:8">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob5" class="num" style="position:absolute;left:-20;top:-20;z-index:8">
<font size="+3" color="#0000ff"><b>.</b></font></div>
<div id="ob6" class="num" style="position:absolute;left:-20;top:-20;z-index:7">
<font size="+3" color="#00ffff"><b>.</b></font></div>
<div id="ob7" class="num" style="position:absolute;left:-20;top:-20;z-index:7">
<font size="+3" color="#00ffff"><b>.</b></font></div>
<div id="ob8" class="num" style="position:absolute;left:-20;top:-20;z-index:7">
<font size="+3" color="#00ffff"><b>.</b></font></div>
<div id="ob9" class="num" style="position:absolute;left:-20;top:-20;z-index:7">
<font size="+3" color="#00ffff"><b>.</b></font></div>
<div id="ob10" class="num" style="position:absolute;left:-20;top:-20;z-index:6">
<font size="+3" color="#ffff00"><b>.</b></font></div>
<div id="ob11" class="num" style="position:absolute;left:-20;top:-20;z-index:6">
<font size="+3" color="#ffff00"><b>.</b></font></div>
<div id="ob12" class="num" style="position:absolute;left:-20;top:-20;z-index:6">
<font size="+3" color="#ffff00"><b>.</b></font></div>

Возникла другая проблема: Если вставить его на страницу, то он отображается всегда в верхнем левом углу. А как сделать так,

что бы можно было вставить этот скрипт в любую область страницы? Как я понимаю, нужно сделать что то с 

position:absolute;left:-20;top:-20;z-index:7

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept