Avatar billede maiken-jorgen Nybegynder
15. marts 2004 - 11:59 Der er 7 kommentarer og
1 løsning

Farveændring på tekst i script

Hej Jeg vil gerne vide hvordan jeg ændre farve på ordene "DIN TEKST" i linien:
message= "SKRIV DIN TEKST HER"

scriptet ser foreløbig sådan ud:


<center><h1><div id="jump"></div></h1></center>
<script>
message= "SKRIV DIN TEKST HER"
mes=new Array();mes[0]=-1;mes[1]=-4;mes[2]=-7;mes[3]=-10;mes[4]=-7;mes[5]=-4;mes[6]=-1;num=0;num2=0;txt="";function jump0(){if(message.length > 6){for(i=0;i != message.length;i++){txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};jump.innerHTML=txt;txt="";jump1a()};else{alert("Your message is to short")}};function jump1a(){n0.style.left=-num2;if(num2 != 9){num2=num2+3;setTimeout("jump1a()",50)};else{jump1b()}};function jump1b(){n0.style.left=-num2;if(num2 != 0){num2=num2-3;setTimeout("jump1b()",50)};else{jump2()}}
function jump2(){txt="";for(i=0;i != message.length;i++){if(i+num > -1 && i+num < 7){txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"};else{txt=txt+"<span>"+message.charAt(i)+"</span>"}};jump.innerHTML=txt;txt="";if(num != (-message.length)){num--;setTimeout("jump2()",50)};else{num=0;setTimeout("jump0()",50)}};jump0()
</script>
Avatar billede roenving Novice
15. marts 2004 - 15:36 #1
Her får du den i en udgave, hvor den er udskrevet i normal javascript-notation med een kommando på hver linje ...

-- og så tilføjede jeg lige de to linjer, som gør den multi-browser (egentlig skørt at udelade to linjer for at sikre, at det kun er IE og Opera, som kan bruge den !-)

-- og der skulle også fjernes 4 linjeafslutninger !o]

-- og jeg arbejder lige på en løsning, som ikke får hele lortet til at blinke i andre browsere end IE ...

<body onload="jump0();"><center><h1><div id="jump" style="border:1px solid green;height:40px;"></div></h1></center></body>
<script type="text/javascript">
message= "SKRIV DIN TEKST HER";
/*her angiver du hvilken farve og hvilke tegn der skal være anderledes, bemærk, at der skal tælles på javascriptsk, dvs. du skal trække en fra !-)*/
altColor=['red',6,15];
var jump,n0=null;
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;
mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
  jump=document.getElementById('jump');
  //if(!n0)alert(jump.tagName);
  if(message.length > 6){
    for(i=0;i != message.length;i++){
      txt+="<span style='position:relative;"+((i<altColor[2]&&i>=altColor[1])?"color:"+altColor[0]+";":"")+"' id='n"+i+"'>"+message.charAt(i)+"</span>"
    };
    jump.innerHTML=txt;
    n0 = document.getElementById('n0');
    txt="";
    jump1a()
  }else{
    alert("Your message is to short")
  }
}
function jump1a(){
  n0.style.left=-num2;
  if(num2 != 9){
    num2+=3;
    setTimeout("jump1a()",50)
  }else{
    jump1b()
  }
}
function jump1b(){
  n0.style.left=-num2;
  if(num2 != 0){
    num2-=3;
    setTimeout("jump1b()",50)
  }else{
    jump2()
  }
}
function jump2(){
  txt="";
  for(i=0;i != message.length;i++){
    if(i+num > -1 && i+num < 7){
      txt+="<span style='position:relative;"+((i<altColor[2]&&i>=altColor[1])?"color:"+altColor[0]+";":"")+"top:"+mes[i+num]+"px;'>"+message.charAt(i)+"</span>"
    }else{
      txt+="<span style='"+((i<altColor[2]&&i>=altColor[1])?"color:"+altColor[0]+";":"")+"'>"+message.charAt(i)+"</span>"
    }
  }
  jump.innerHTML=txt;
  txt="";
  if(num != (-message.length)){
    num--;
    setTimeout("jump2()",50)
  }else{
    num=0;
    setTimeout("jump0()",50)
  }
}
</script>
Avatar billede roenving Novice
15. marts 2004 - 16:17 #2
-- og her er så en udgave, som virker i en hel del forskellige browsere, ikke testet i andet end IE6 og Mozilla 1.5, men umiddelbart ser det ud til at alle nyere browsere er understøttet, med forbehold specielt overfor Mac og *nix !-)

To udgaver, en med alle linjer for sig, og en, som er forkortet, som din oprindelige udgave:

<body><center><h1><div id="jump" style="border:1px solid green;height:40px;"></div></h1></center></body>
<script type="text/javascript">
message= "SKRIV DIN TEKST HER";
/*her angiver du hvilken farve og hvilke tegn der skal være anderledes, bemærk, at der skal tælles på javascriptsk, dvs. du skal trække en fra !-)*/
altColor=['red',6,15];
var jump,n=new Array(),mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;
mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
function jumpinit(){
  jump=document.getElementById('jump');
  if(message.length > 6){
    for(i=0;message.length>i;i++){
      n[i] = document.createElement('SPAN');
      jump.appendChild(n[i]);
      n[i].innerHTML=(message.charAt(i)!=" ")?message.charAt(i):"&nbsp;";
      n[i].style.position = 'relative';
      if(i<altColor[2]&&i>=altColor[1]){
        n[i].style.color = altColor[0];
      }
    }
    jump0();
  }else{
    alert("Your message is to short")
  }
}
function jump0(){
    for(i=0;message.length>i;i++){
      n[i].style.top = '0px';
    };
    n[0].style.left = '0px';
    jump1a()
}
function jump1a(){
  n[0].style.left=-num2;
  if(num2 != 9){
    num2+=3;
    setTimeout("jump1a()",50)
  }else{
    jump1b()
  }
}
function jump1b(){
  n[0].style.left=-num2;
  if(num2 != 0){
    num2-=3;
    setTimeout("jump1b()",50)
  }else{
    jump2()
  }
}
function jump2(){
  for(i=0;message.length>i;i++){
    if(i+num<7&&i+num>-1){
      n[i].style.top = mes[i+num]+"px";
    }else{
      n[i].style.top = '0px';
    }
  }
  if(num != (-message.length)){
    num--;
    setTimeout("jump2()",50)
  }else{
    num=0;
    setTimeout("jump0()",50)
  }
}
jumpinit()
</script>

-----------------------------------------------------------------------------------------
<body><center><h1><div id="jump"></div></h1></center></body>
<script type="text/javascript">
message= "SKRIV DIN TEKST HER";
/*her angiver du hvilken farve og hvilke tegn der skal være anderledes, bemærk, at der skal tælles på javascriptsk, dvs. du skal trække en fra !-)*/
altColor=['red',6,15];
var jump,n=new Array(),mes=new Array();mes[0]=-1;mes[1]=-4;mes[2]=-7;mes[3]=-10;mes[4]=-7;mes[5]=-4;mes[6]=-1;num=0;num2=0;function jumpinit(){jump=document.getElementById('jump');if(message.length > 6){for(i=0;message.length>i;i++){n[i]=document.createElement('SPAN');jump.appendChild(n[i]);n[i].innerHTML=(message.charAt(i)!=" ")?message.charAt(i):"&nbsp;";n[i].style.position='relative';if(i<altColor[2]&&i>=altColor[1]){n[i].style.color=altColor[0];}}jump0();}else{alert("Your message is to short")}}function jump0(){for(i=0;message.length>i;i++){n[i].style.top='0px';}n[0].style.left='0px';jump1a()}function jump1a(){n[0].style.left=-num2;if(num2!=9){num2+=3;setTimeout("jump1a()",50)}else{jump1b()}}function jump1b(){n[0].style.left=-num2;if(num2!=0){num2-=3;setTimeout("jump1b()",50)}else{jump2()}}function jump2(){for(i=0;message.length>i;i++){if(i+num<7&&i+num>-1){n[i].style.top=mes[i+num]+"px";}else{n[i].style.top='0px';}}if(num!=(-message.length)){num--;setTimeout("jump2()",50)}else{num=0;setTimeout("jump0()",50)}}jumpinit()
</script>
Avatar billede maiken-jorgen Nybegynder
15. marts 2004 - 20:36 #3
Jeg siger tak for hjælpen roenving
Avatar billede maiken-jorgen Nybegynder
15. marts 2004 - 20:40 #4
Men lige en ting til hvordan får jeg givet dig de point som du skal have
Avatar billede roenving Novice
16. marts 2004 - 01:01 #5
Jeg skulle jo lige vide, at du kunne bruge det !-)

-- og velbekomme '-)

-- og så er jeg lidt stolt af, at have lavet et (skod/) dårligt script om til et flyvende ...
Avatar billede roenving Novice
16. marts 2004 - 01:03 #6
-- i øvrigt kan du bruge almindelig css-notation til farven, så alle farver er understøttet i propertyen !-)
Avatar billede roenving Novice
16. marts 2004 - 19:28 #7
-- og tak for points ;~}
Avatar billede maiken-jorgen Nybegynder
16. marts 2004 - 19:42 #8
Velbekom og tak for hjælpen
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

IT-JOB

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Bliv en del af vores nye mobiludviklingsteam i Cyberdivisionen i Hvidovre

Capgemini Danmark A/S

Open Application (Denmark)

Akademikernes A-kasse

AI Product Owner

KMD A/S

E2E Tester

Capgemini Danmark A/S

SAP S/4HANA Business Controlling