JavaScript a gyakorlatban
9-10. Gyakorlat DHTML Rétegek szabályozása HTML-elemek dinamikus változtatása
HTML-elemek dinamikus változtatása JS0901.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 9.1 feladat 9.1 feladat Kattints valamelyik linkre, és rendezd a címsort ennek megfelelően balra, jobbra, vagy középre ! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 9.1 feladat 9.1 feladat Kattints valamelyik linkre, és rendezd a címsort ennek megfelelően balra, jobbra, vagy középre !
HTML-elemek dinamikus változtatása JS0901.js //JavaScript function AlignMe(a) { if (!document.getElementById) return; h=document.getElementById("head1"); h.setAttribute("align",a); } //JavaScript function AlignMe(a) { if (!document.getElementById) return; h=document.getElementById("head1"); h.setAttribute("align",a); }
Rétegek használata JS0902.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 9.2 feladat 9.2 feladat Első réteg Ez az első réteg. Kezdésként a bal felső sarokban található. Második réteg Ez a második réteg. Kezdésként a jobb felső sarokban található … <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 9.2 feladat 9.2 feladat Első réteg Ez az első réteg. Kezdésként a bal felső sarokban található. Második réteg Ez a második réteg. Kezdésként a jobb felső sarokban található …
Rétegek használata JS0902.html … Vezérlőpult Használd a vezérlőpult elemeit a rétegek mozgatásához. Első réteg Második réteg Fejléc Ez a panel … Vezérlőpult Használd a vezérlőpult elemeit a rétegek mozgatásához. Első réteg Második réteg Fejléc Ez a panel …
JS0902.html … …
Rétegek használata JS0902.js //JavaScript function move(x,y,z) { if (!document.getElementById) return; for(i=0;i<4;i++) { if (document.form1.what[i].checked) tomove=document.form1.what[i].value; } obj=document.getElementById(tomove); obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; obj.style.zIndex=parseInt(obj.style.zIndex) + z; } //JavaScript function move(x,y,z) { if (!document.getElementById) return; for(i=0;i<4;i++) { if (document.form1.what[i].checked) tomove=document.form1.what[i].value; } obj=document.getElementById(tomove); obj.style.left = parseInt(obj.style.left) + x; obj.style.top = parseInt(obj.style.top) + y; obj.style.zIndex=parseInt(obj.style.zIndex) + z; }
Dinamikus HTML-elemek alkalmazása JS1001.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " feladat 10.1 feladat Légy üdvözölve! 00:00:00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " feladat 10.1 feladat Légy üdvözölve! 00:00:00
Dinamikus HTML-elemek alkalmazása JS1001.js //JavaScript function Clock() { if (!document.getElementById) return; theclock=document.getElementById("clock"); now = new Date(); hours=now.getHours(); mins=now.getMinutes(); secs=now.getSeconds(); if (secs < 10) secs= "0" + secs; if (mins < 10) mins= "0" + mins; theclock.innerHTML = hours + ":" + mins + ":" + secs; window.setTimeout("Clock();",250); } //JavaScript function Clock() { if (!document.getElementById) return; theclock=document.getElementById("clock"); now = new Date(); hours=now.getHours(); mins=now.getMinutes(); secs=now.getSeconds(); if (secs < 10) secs= "0" + secs; if (mins < 10) mins= "0" + mins; theclock.innerHTML = hours + ":" + mins + ":" + secs; window.setTimeout("Clock();",250); } JS1001.css #clock { background-color: yellow; position: absolute; left: 5px; top: 5px; font-family: monospace; font-size: 20pt; font-weight: bold; } h1 { text-align: center; } #clock { background-color: yellow; position: absolute; left: 5px; top: 5px; font-family: monospace; font-size: 20pt; font-weight: bold; } h1 { text-align: center; }