Søg
Avatar billede nfssister Forsker
19. maj 2004 - 23:34 Der er 17 kommentarer og
1 løsning

Skifte farve baggrund

hej

Jeg prøver at finde et script der gør at min baggrund skifter farve..... på et X antal sekunder..... den må meget gerne fade mellem farverne.....den skal automatisk skifte mellem farverne...... og hvis jeg SELV kan predefinere farvene vil det være cool.....
Avatar billede roenving Novice
19. maj 2004 - 23:39 #1
Sådan, måske ?-)

<script language="javascript" type="text/javascript">
var strt = "7AA067",slut = "FA7AB0",interval = 10;
var st,sl,act = total = timer = 0;
function setBG(){
  document.body.style.backgroundColor = "#" + strt;
}
function skiftBG(tim){
  st = retRGB(strt);
  sl = retRGB(slut);
  if(!st||!sl)return;
  if(!tim.match(/^\d*(\.\d+)?$/))return;
  total = Math.floor(+tim*1000);
  timer = setInterval('chgBG()',interval);
  document.body.style.backgroundColor = "#" + strt;
  //alert(total);
}
function chgBG(){
  act += interval;
  if(act>=total){
    document.body.style.backgroundColor = "#" + slut;
    clearInterval(timer);
    act = total = timer = 0;
    return;
  }
  var rgb = new Array();
  for(i=0;3>i;i++){
    rgb[i] = st[i] + Math.round((sl[i]-st[i])*act/total);
  }
  document.body.style.backgroundColor = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
}
function retRGB(txt){
  txt = txt.split("");
  if(txt.length==3){
    txt[5] = txt[4] = txt[2];
    txt[3] = txt[2] = txt[1];
    txt[1] = txt[0];
  }else if(txt.length!=6)return null;
  var rgb = new Array();
  for(i=0;3>i;i++){
    rgb[i] = 16 * parseInt(txt[2*i],16) + parseInt(txt[2*i+1],16)
  }
  return rgb;
}
</script>

Her kaldes med den tid baggrunden skal bruge til at skifte ...
Avatar billede thedeathart Nybegynder
19. maj 2004 - 23:39 #2
prøv at lege lidt med det her:

<!-- START OF SCRIPT -->
<!-- For more scripts visit http://www.netpedia.com --> 
<!-- Paste this code into HEAD of your document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function blinkit(){
intrvl=0;
for(nTimes=0;nTimes<3;nTimes++){
intrvl += 200;
setTimeout("document.bgColor='#0000FF';",intrvl);
intrvl += 200;
setTimeout("document.bgColor='#FFFFFF';",intrvl);
intrvl += 200;
setTimeout("document.bgColor='#00FF00';",intrvl);

  }
}
// End -->
</SCRIPT>

<!-- Add this form to the body of the HTML document  -->

<BODY>
<CENTER>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Blink" onClick="blinkit()">
</FORM>
<!-- END OF SCRIPT -->
Avatar billede nfssister Forsker
20. maj 2004 - 00:23 #3
hmm.... roenving jeg kan ikke få dit eksempel til at virke :S.... er der noget jeg glemmer ?

<html>
<head>
    <title>[Ingen titel]</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="Author" content="Steen Hjelmstrand" />
<script language="javascript" type="text/javascript">
var strt = "7AA067",slut = "FA7AB0",interval = 10;
var st,sl,act = total = timer = 0;
function setBG(){
  document.body.style.backgroundColor = "#" + strt;
}
function skiftBG(tim){
  st = retRGB(strt);
  sl = retRGB(slut);
  if(!st||!sl)return;
  if(!tim.match(/^\d*(\.\d+)?$/))return;
  total = Math.floor(+tim*1000);
  timer = setInterval('chgBG()',interval);
  document.body.style.backgroundColor = "#" + strt;
  //alert(total);
}
function chgBG(){
  act += interval;
  if(act>=total){
    document.body.style.backgroundColor = "#" + slut;
    clearInterval(timer);
    act = total = timer = 0;
    return;
  }
  var rgb = new Array();
  for(i=0;3>i;i++){
    rgb[i] = st[i] + Math.round((sl[i]-st[i])*act/total);
  }
  document.body.style.backgroundColor = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
}
function retRGB(txt){
  txt = txt.split("");
  if(txt.length==3){
    txt[5] = txt[4] = txt[2];
    txt[3] = txt[2] = txt[1];
    txt[1] = txt[0];
  }else if(txt.length!=6)return null;
  var rgb = new Array();
  for(i=0;3>i;i++){
    rgb[i] = 16 * parseInt(txt[2*i],16) + parseInt(txt[2*i+1],16)
  }
  return rgb;
}
</script>
</head>
<body>


</body>
</html>

#thedeathart: var måske lige vildt nok :D......
Avatar billede roenving Novice
20. maj 2004 - 00:32 #4
<body onload="setBG()">
<!-- Skifte baggunden på 2 sekunder -->
<button onclick="skiftBG(2);">Skift baggrund</button>

</body>
</html>
Avatar billede nfssister Forsker
20. maj 2004 - 00:55 #5
Jeg får en fejl nu :S

Line: 17
Char: 3
Error: Object doesn't support this property or method
Code: 0
URL: Sti til mit htm dokument
Avatar billede roenving Novice
20. maj 2004 - 01:02 #6
Sæfølsomt !-)

Jeg havde ikke lige tænkt på, at jeg har en input, hvor antallet af sekunder jo angives som en streng ...

Udskift linjen til (en minimal ændring !-)

  if(!(""+tim).match(/^\d*(\.\d+)?$/))return;

-- eller kald det med skiftBG('2')
Avatar billede roenving Novice
20. maj 2004 - 01:03 #7
-- og dine egne farver angiver du jo i starten med hhv. strt og slut !-)
Avatar billede nfssister Forsker
20. maj 2004 - 01:07 #8
oki så langt så godt..... hvis jeg nu vil have en: hvid, grøn, sort, blå og en rød baggrund...... og den skal skifte automatisk..... og scriptet skal loade så snart siden bliver loadet....... hvordan gør jeg så....... jeg er ret n00b til det her :S
Avatar billede roenving Novice
20. maj 2004 - 01:09 #9
Jaeh, ser du, øeh ...

Den må jeg lige kigge lidt nærmere på, men er det sådan, at du har lyst til at skræmme folk ?-)
Avatar billede roenving Novice
20. maj 2004 - 01:10 #10
Brug 'blødere' farver, så det ikke er så voldsomt ...
Avatar billede nfssister Forsker
20. maj 2004 - 01:18 #11
hehe..... jeg skal ikke skræmme nogen..... er lidt svært at forklare hvad det er jeg laver...... :/..... men hvis det kan lade sig gøre..... så er det fedt
Avatar billede roenving Novice
20. maj 2004 - 01:27 #12
Jeg tilføjede lige to ting, som er absolut must !-)

Nemlig doctype og karakter-sæt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <title>Fade baggrund onload</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
var strt = ["fff","0f0","000","00f","f00"],stnr = 0,interval = 10;
var st,sl,act = total = timer = 0;
function setBG(){
  document.body.style.backgroundColor = "#" + strt[stnr];
}
function skiftBG(tim){
  if(stnr+2>strt.length)return;
  st = retRGB(strt[stnr]);
  sl = retRGB(strt[stnr+1]);
  if(!st||!sl)return;
  if(!(""+tim).match(/^\d*(\.\d+)?$/))return;
  total = Math.floor(+tim*1000);
  timer = setInterval('chgBG()',interval);
  document.body.style.backgroundColor = "#" + strt[stnr];
}
function chgBG(){
  act += interval;
  if(act>=total){
    document.body.style.backgroundColor = "#" + strt[stnr+1];
    clearInterval(timer);
    act = timer = 0;
    stnr++;
    skiftBG(total/1000);
    return;
  }
  var rgb = new Array();
  for(i=0;3>i;i++){
    rgb[i] = st[i] + Math.round((sl[i]-st[i])*act/total);
  }
  document.body.style.backgroundColor = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
}
function retRGB(txt){
  txt = txt.split("");
  if(txt.length==3){
    txt[5] = txt[4] = txt[2];
    txt[3] = txt[2] = txt[1];
    txt[1] = txt[0];
  }else if(txt.length!=6)return null;
  var rgb = new Array();
  for(i=0;3>i;i++){
    rgb[i] = 16 * parseInt(txt[2*i],16) + parseInt(txt[2*i+1],16)
  }
  return rgb;
}
</script>
</head>
<body onload="skiftBG(2)">
</body>
</html>
Avatar billede roenving Novice
20. maj 2004 - 01:37 #13
Forøvrigt er antallet af farver, du fylder ind i strt-variablen ligegyldigt, der skal bare være mindst 2 !-)

-- og så skal de være angivet i hexadecimalt format, hvor css-måden med 3 tal dog tillades ...

Du kan jo f.eks. prøve:

var strt = ["fff","40BFC6","A953B3","B3E124","62A480","E4B421","8817EE","66769F","C810F5"],stnr = 0,interval = 10;

<body onload="skiftBG(0.5)">
Avatar billede nfssister Forsker
20. maj 2004 - 02:16 #14
de point er så godt som dine ;)...... du skal bare lige svare på hvordan du finder de der hex decimaler.....
Avatar billede roenving Novice
20. maj 2004 - 02:20 #15
I Stones:

Indsæt --> Farve, Webfarvedialog ...

eller

Indsæt --> Farve, Windowsdialog ... og evt. --> Definer farver >>
Avatar billede roenving Novice
20. maj 2004 - 02:25 #16
-- du skal dog huske at fjerne #-tegnet, som indsættes med de metoder !-)

-- og velbekomme '-)
Avatar billede roenving Novice
20. maj 2004 - 02:34 #17
-- og også tak for point ;~}

-- iøvrigt kan næsten alle billed-behandlingsprogrammer levere hex-værdierne !-)
Avatar billede roenving Novice
20. maj 2004 - 02:58 #18
Og lidt lege:

Kopier hele linjen ind (den fortsætter langt ud over feltet !-)

/*Kopi start*/
var strt = ['eaf06b','d94e90','feb223','085141','0266cc','7d36c3','370a43','5114d2','440585','75e5e5','dc5e2d','4d03ab','814161','cb284b','997d05','a04b6e','b549ee','2db791','472172','5690e7','d6bfe6','a3210e','67bc64','19ad35','faed07','872652','43d186','3a6e7e','5ea43f','4a40ba','2c427d','d076bb','4a64b7','2181db','70cb23','755354','97487d','4f5768','74c6c9','f15d13','701b14','b964de','a0b441','ae12d7','d8377c','3e8e4c','949840','8ab675','80eb77','762d07','723e78','4b4ca1','f8717b','3d5ed7','190e4e','18bb0c','4cd81e','f4cd32','5b68a7','8ea6de','97e15c','a9c271','6f7500','1dc22b','f4b112','781020','ff89d3','2997ac','675cf2','176052','72bc3e','37bd08','12cfc2','931af7','069ab9','8c793f','95ed44','6eb150','d8e7ce','1d4460','b0e2da','665233','4bfe43','416835','14a574','152474','668fd3','9a1731','72ccb2','03022f','fb5f73','d70fb0','068062','ba3fc3','d27f49','a9a0ec','02abfa','b4de14','f39ebf',"fff","40BFC6","A953B3","B3E124","62A480","E4B421","8817EE","66769F","C810F5"],stnr = 0,interval = 10;
/*Kopi slut*/

Der er tilføjet 100 tilfældigt genererede farver !-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 13:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
24/0811:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
24/0811:16 problem med mailbesked Af Pestilensen i Excel
24/0810:45 Powerbank Af postpeter@outlook.dk i Fri debat
White papers
Flere white papers »