Notifikationer

Markér alle som læst Log ud

boxer Praktikant

30. maj 2008 - 09:40 Der er 13 kommentarer og
1 løsning

Random color tekst - hvordan?

Hejsa

Jeg leder efter et script der kan formatere tekst i forskellige farver.
Det skal virke på den måde at hver enkelt bogstav i et stykke tekst får sin egen farve.

Nogen der kan hjælpe?

Mvh
Boxer

Synes godt om

o-zone Nybegynder

30. maj 2008 - 10:24 #1

Hmmm ... jeg er HELT sikkert på at der ikke vil komme noget æstetisk smukt ud af sådan en funktion - men det kommer selvfølgelig ikke mig ved, hvad du vil bruge den til :-/

Her er i hvert fald én måde at gøre det på:
---8<----------
<html>
<head>
<script language="javascript" type="text/javascript">
hexNumbers = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');

function colorize(str){
var tmpStr = "";
var strArray = str.split("");

for (var i=0;i<strArray.length;i++){
if (strArray[i]!=" "){
tmpStr += "<span style='color:#" + getRandomHex(6) + "'>"+strArray[i]+"</span>";
} else {
tmpStr += " ";
}
}

return tmpStr;
}

function getRandomHex(digits){
var tmpStr = "";

for (var j=0;j<digits;j++){
tmpStr += hexNumbers[Math.floor(Math.random()*15)];
}

return tmpStr;
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write(colorize("Her er en grim streng!"));
</script>
</body>
</html>
---8<----------

/o-zone

Synes godt om

o-zone Nybegynder

30. maj 2008 - 10:26 #2

Hov ... det var selvfølgelig et svar :)

(ævs - jeg skulle selvfølgelig have navngivet funktionen "colorize" til "uglyfy" istedet ;-P~)

Synes godt om

boxer Praktikant

30. maj 2008 - 12:40 #3

Tak for det o-zone
Det virker som det skal.

Kan den laves uden der skal sættes noget i <head>?
Den skal bruges som en forum bbcode.

Synes godt om

o-zone Nybegynder

30. maj 2008 - 14:02 #4

Det kan den sagtens ... så skal du bare smække <script> blokken fra headeren ned et sted i body (og krydse fingre for at metoderne ikke bliver kaldt inden de er loadet færdigt)

Hvis du smider den et sted i toppen af body, vil der være en nærmest latterligt lille risiko for det!

Synes godt om

boxer Praktikant

30. maj 2008 - 14:07 #5

Ok - takker :o)

Synes godt om

mclemens Nybegynder

30. maj 2008 - 14:36 #6

(forkortelses forslag)

<html>
<head>
<script type="text/javascript">
function colorize(str){

var strArray=str.split("");

for (var i=0;i<strArray.length;i++)
strArray[i]="<span style='color:rgb("+
Math.floor(Math.random()*255)+","+
Math.floor(Math.random()*255)+","+
Math.floor(Math.random()*255)+")'>"+strArray[i]+"</span>";

return strArray.join("");
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write(colorize("Her er en farvet streng!"));
</script>
</body>
</html>

Synes godt om

boxer Praktikant

30. maj 2008 - 16:18 #7

Jeps, mclemens forkortede forslag virker også fint.

Jeg kunne faktisk også godt bruge et stykke kode der kan fade et stykke tekst i forskellige farver.
60 point hvis du kan lave den :o)

Synes godt om

mclemens Nybegynder

30. maj 2008 - 18:18 #8

Ingen point ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

/*ms =ms opdatering
os= opacity step
o=opacity start
o2 = opacity op(1) eller ned(-1) start
t= 0 for ingen fade
1 for fade
2 for fade og farveskift
*/

function colorfade(elmid,t,ms,os,o,o2){
elm=document.getElementById(elmid);
elmstr=elm.firstChild;
while(elmstr.length>0){
var c1=document.createElement("span");
c1.style.color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
var c2=document.createTextNode(elmstr.nodeValue.substr(0,1));
c1.appendChild(c2);
elm.appendChild(c1);
elmstr.nodeValue=elmstr.nodeValue.substr(1);
}

if(t!=0){setTimeout("runfade('"+elmid+"',"+t+","+o+","+o2+","+os+","+ms+");",ms);}

}

function runfade(elmid,t,o,o2,os,ms){

i=document.getElementById(elmid);
o2=o==0?1:o==100?-1:o2;o+=os*o2;
o=o<0?0:o>100?100:o;
if(i.filters){i.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+o+")";
i.getElementsByTagName("span")[0].style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+o+")";}
i.style.MozOpacity = o/100;
i.style.KhtmlOpacity = o/100;
i.style.opacity = o/100;

if(o==0&&t==2){

spans=i.getElementsByTagName("span");
for(j=0;j<spans.length;j++)spans[j].style.color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";

}

setTimeout("runfade('"+elmid+"',"+t+","+o+","+o2+","+os+","+ms+");",ms);
}
</script>

</head><body>

<div id="uniqcfade1" style="position:absolute;">Her er en farvet streng!0</div>

<script type="text/javascript">colorfade("uniqcfade1",0,0,0,0,0);</script>

<br>

<div id="blabla" style="position:absolute;">Her er en farvet streng!1</div>

<script type="text/javascript">colorfade("blabla",1,500,10,50,1);</script>

<br>

<div id="blabla2" style="position:absolute;">Her er en farvet streng!1</div>

<script type="text/javascript">colorfade("blabla2",1,100,5,75,-1);</script>

<br>

<div id="hmm" style="position:absolute;">Her er en farvet streng!2</div>

<script type="text/javascript">colorfade("hmm",2,250,25,100,1);</script>

<div id="hmm2" style="position:absolute;">Her er en farvet streng!2</div>

<script type="text/javascript">colorfade("hmm2",2,250,10,100,-1);</script>

</body></html>

Synes godt om

mclemens Nybegynder

30. maj 2008 - 18:19 #9

Hov, ret lige disse to linjer:
if(i.filters){i.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+o+")";
i.getElementsByTagName("span")[0].style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+o+")";}

til:
if(i.filters)i.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+o+")";

Synes godt om

mclemens Nybegynder

30. maj 2008 - 18:27 #10

Og der manglede en <br> mellem de to sidste
elementer - så de ikke står oveni hinanden :-/

Synes godt om

boxer Praktikant

30. maj 2008 - 19:14 #11

Tak for det mclemens.
Men den virker jo på samme måde som den første.
Måske var jeg ikke god nok til at forklare mig.
Med fade mente jeg faktisk en form for blink.
Altså et stykke tekst der konstant skifter farve fra f.eks gul til rød til grøn osv.

Synes godt om

mclemens Nybegynder

30. maj 2008 - 19:20 #12

Hvis du bruger ovenstående script og øger os skulle den
blinke og skifte farve (forudsat at du sætter typen til 2)
... blink er jo bare en form for hurtig/grov fade ...

Prøv at indsætte denne i ovenstående eksempel (ms kan selvfølgelig sænkes fra 250):

<br>
<div id="hmm3" style="position:absolute;">Her er en farvet streng!2</div>
<script type="text/javascript">colorfade("hmm3",2,250,100,100,-1);</script>
<br>

...

...

Hvis det nu bare skulle have været en farvet linje
med skift af hele linjens farve til en anden farve
kan du i ovenstående script rette:

var c2=document.createTextNode(elmstr.nodeValue.substr(0,1));
c1.appendChild(c2);
elm.appendChild(c1);
elmstr.nodeValue=elmstr.nodeValue.substr(1);

til:

var c2=document.createTextNode(elmstr.nodeValue);
c1.appendChild(c2);
elm.appendChild(c1);
elmstr.nodeValue="";

Synes godt om

mclemens Nybegynder

30. maj 2008 - 19:28 #13

Hvis vi skal blinke en tekst fra farve til farve kan vi nøjes med:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

function colorblink(elmid,ms){
elm=document.getElementById(elmid);
elm.style.color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
setTimeout("colorblink('"+elmid+"',"+ms+");",ms);
}
</script>

</head><body>

<div id="hmm1">Her er en farvet streng!</div>

<script type="text/javascript">colorblink("hmm1",500);</script>

<br>

<div id="hmm2">Her er en farvet streng!</div>

<script type="text/javascript">colorblink("hmm2",100);</script>

</body></html>

Synes godt om

boxer Praktikant

30. maj 2008 - 19:42 #14

Genialt mclemens.
Tusind tak for hjælpen :o)

Du skal nu alligevel have lidt point for hjælpen:
http://www.eksperten.dk/spm/833351

Alternativt kan du smide et link til et website.
Så skal du få credit for scriptet.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	3	27/04/202620:09	28/04/202621:05
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS