JavaSrcipt Azonos típusú vonal megjelenítése 3405
Vízszintes és függőleges vonalak.
Mozillában is működik.
Megjegyzés
A szöveg helyett, vonalformátúmot alkalmazunk:
- Pontozott vonal: pontokat írunk,
- Szaggatott vonal: kötőjelet írunk.
- Folytonos vonal: alsó kötőjelet írunk.
Azonos típusú vonal megjelenítése 10-szer
<script language="JavaScript" type="text/javascript">
for(i=0;i <10; i++) {
document.write('<div style="left:'+i+';top:'+i+';width:1;height:1;"> <font fontSize="2pt">_______________________________________</font> </div>')
}
</script>
Megírhatjuk div szakasz nélkül is, sorlezáró utasítással. Azonos típusú vonal megjelenítése 10-szer
<script language="JavaScript" type="text/javascript">
for(i=0;i <10; i++) {
document.write('<span class="jsvonal">_______________________________________</span> <br />')
}
</script>
CSS, azaz stílus fájl. Méret és szín, meghatározása.
.jsvonal {font-size: 8px; color: blue;}
A vonal hossza, az eredeti tízszerese lesz..
<script language="JavaScript" type="text/javascript">
for(i=0;i <10; i++) {
document.write('<span class="jsvonal2">____</span>')
}
</script>
CSS, azaz stílus fájl. Méret és szín, meghatározása.
.jsvonal2 {font-size: 15px; color: yellow;}
Megjelenése:
Tetszőleges méretű div szakasz.
Keretet és háttérszínt is meghatározunk, százszor jelenítünk meg, vízszintesen.
Ezzel a megoldással, háttérkép nélkül is készíthetünk, különböző mintázatú vonalakat
<script language="JavaScript" type="text/javascript">
for(i=0;i <100; i++) {
document.write('<div class="keretes"> </div>')
}
</script>
CSS, azaz stílus fájl. Méret és keret, meghatározása.
.keretes{float:left; width:2px; height:2px; border:1px solid aqua; background-color: black;}
Megjelenése:
Tetszőleges méretű div szakaszt, háttérszín meghatározásával, százszor jelenítünk meg, vízszintesen.
<script language="JavaScript" type="text/javascript">
for(i=0;i <100; i++) {
document.write('<div class="hatter"> </div>')
}
</script>
CSS, azaz stílus fájl. Méret és háttérszín, meghatározása.
.hatter {float:left; width:1px; height:1px; background-color: blue;}
Megjelenése:
Tetszőleges méretű div szakaszt, háttérszín meghatározásával, százszor jelenítünk meg, függőlegesen.
<script language="JavaScript" type="text/javascript">
for(i=0;i <100; i++) {
document.write('<div class="fuggoleges"> </div>')
}
</script>
CSS, azaz stílus fájl. Méret és háttérszín, meghatározása.
.fuggoleges {width:1px; height:1px; background-color: blue;}
Megjelenése:
Tetszőleges méretű, kettő div szakasz, háttérszín meghatározásával, egymás mellett,
<script language="JavaScript" type="text/javascript">
for(i=0;i <100; i++) {
document.write('<div class="div1"> </div>')
document.write('<div class="div2"> </div>')
}
</script>
CSS, azaz stílus fájl. A div szakaszokra jellemző meghatározások.
.div1{float: left; width:1px; height:1px; background-color: blue;}
.div2{width:1px; height:1px; margin-left: 50px; background-color: black;}
Megjelenése:
Eltérő megjelenésű vonalak: pontozott, szaggatott, folytonos
<script language="JavaScript" type="text/javascript" >
var vonal1 = "........................";
var vonal2 = "-----------------------";
var vonal3 = "_______________________";
document.write (vonal1);
document.write ('<span class="kek">'+vonal2+'</span>');
document.write (vonal3);
</script>
Megjelenése:
Így is megírhatjuk. Eltérő megjelenésű vonalak: pontozott, szaggatott, folytonos
<script language="JavaScript" type="text/javascript" >
var vonal1 = "........................";
var vonal2 = "<span class='kek'>-----------------------</span>";
var vonal3 = "_______________________";
osszefuzes = vonal1 + vonal2 + vonal3 ;
document.write (osszefuzes);
</script>
Megjelenése:
Külön sorban. Eltérő megjelenésű vonalak: pontozott, szaggatott, folytonos
<script language="JavaScript" type="text/javascript" >
vonal1 = "........................................................................................................................";
vonal2 = "-------------------------------------------------------------------------------------------------------------------";
vonal3 = "_____________________________________________________________________";
document.write (vonal1 + "<br />");
document.write (vonal2 + "<br />");
document.write (vonal3);
</script>
Megjelenése: