Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
  • * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Hur Rotera text med JavaScript

    Det är svårt att veta hur potentiella kunder skulle reagera på en reklamslogan , och många webbplatser kommer att skapa flera slagord , rotera texten och mäta antalet klick för att bestämma den mest effektiva slogan . Du kan använda JavaScript för att rotera text på skärmen genom att skapa en samling av text till displayen , skapa en funktion för att visa nästa text element i arrayen och anropa " setInterval " metod för att genomföra rotation vid ett regelbundet tidsintervall . Instruktioner
    1

    Skapa ett nytt HTML- dokument med hjälp av Anteckningar eller en HTML-editor . Infoga HTML rubriker i dokumentet : < ! DOCTYPE HTML >



    < meta charset = " utf - 8 " >

    rotera text < /title > <br> 2 <p> Lägg JavaScript -kod för att skapa en rad textmeddelanden att rotera . Beräkna positionen för den sista textmeddelandet i arrayen genom att ta längden och subtrahera ett . Initiera en variabel ( pekare ) för att spåra index för det aktuella textmeddelandet i arrayen <br> <p> <script> <br> <p> var text = [ . " Specialerbjudande - Klicka här " , " Free Stuff - Klicka här " , " Missa inte detta erbjudande - Klicka här " ], ! <br> <p> var- maxSlogans = text.length - 1 ; <br> <p> var ström = 0 ; <br> ! <br> 3 <p> Skapa en JavaScript -funktion för att rotera texten . Välj nästa textmeddelande i arrayen eller flytta pekaren till den första textmeddelande om du har nått slutet av arrayen . Visa texten genom att ersätta " innerHTML " egendom <div> tagg med textmeddelande : <br> <p> funktion rotateText ( ) { <br> <p> om ( + + kortfristiga > maxSlogans ) nuvarande = 0; . <br> <p> document.getElementById ( " textDiv " ) innerHTML = ' <a href="http://example.com/special' + ström + '.php"> ' + text [ aktuell ] + " < /a > ' ; <br> <p> } <br> 4 <p> Ring JavaScript " setTimeout " metoden med den funktion du vill utföra och utförandet intervall i millisekunder . Till exempel kör " rotateText " -funktionen var 10 sekunder : <br> <p> Window.setInterval ( " rotateText ( ) " , 10000 ) ; <br> <p> < /script > <br> <p> < ;/head > <br> 5 <p> Skapa en <div> i kroppen av dokumentet och tilldelar det id som du använde i JavaScript rotation funktionen . Visa den första text slogan inuti <div> tag: <br> <p> <body> <br> <p> <div id="textDiv"> < a href = " http://exempel .com/special0.php " > Specialerbjudande - Klicka här < /a > < /div > <br> <p> < /body> <br> <p> < /html > <br> <br> 6 <p> Spara filen . Öppna den i en webbläsare och titta på texten rotera på skärmen . <br> <br> <div class=dad2><script language='javascript' src='http://www.dator.xyz/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='http://www.dator.xyz/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90936.html' >Ta reda på koordinaterna för ett element i JavaScript </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90938.html' >Risker med javascript </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91059.html" title="Ställa fokus Med jQuery " target="_self">Ställa fokus Med jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90758.html" title="Hur man gör ett diagram med jQuery " target="_self">Hur man gör ett diagram med jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90784.html" title="Tutorial på jQuery och Google Maps " target="_self">Tutorial på jQuery och Google Maps </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90809.html" title="Hur man sätter flikarna på vänster sida med Extjs " target="_self">Hur man sätter flikarna på vänster sida med Extjs </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90750.html" title="Alternativ till alternativknappar i JQuery " target="_self">Alternativ till alternativknappar i JQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91022.html" title="Hur du jämför Datum objekt i JavaScript " target="_self">Hur du jämför Datum objekt i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90835.html" title="Hur man använder statisk analys för att hitta buggar " target="_self">Hur man använder statisk analys för att hitta buggar </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91046.html" title="Hur man använder reguljära uttryck med JavaScript " target="_self">Hur man använder reguljära uttryck med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91158.html" title="Hur man skapar PDF med Javascript " target="_self">Hur man skapar PDF med Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91203.html" title="Styra en webbsida i Javascript " target="_self">Styra en webbsida i Javascript </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"> <table class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/94695.html" title="Vad är uppräkningen i VB.NET " target="_self">Vad är uppräkningen i VB.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87480.html" title="Hur vill skapa flytande Divar " target="_self">Hur vill skapa flytande Divar </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87610.html" title="Hur till Öka DIV Höjd Enligt Övrigt DIV Innehåll " target="_self">Hur till Öka DIV Höjd Enligt Övrigt DIV Innehåll </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/89134.html" title="Hur man beräknar antalet jämförelser i Java " target="_self">Hur man beräknar antalet jämförelser i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90614.html" title="Hur kopierar du en fil i JSP " target="_self">Hur kopierar du en fil i JSP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85542.html" title="Definition av C + + String Funktion " target="_self">Definition av C + + String Funktion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/python-programming/93520.html" title="Hur konvertera CSV till HTML i Python " target="_self">Hur konvertera CSV till HTML i Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92594.html" title="Hur Till Ändra WordPress Admin lösenord i MySQL " target="_self">Hur Till Ändra WordPress Admin lösenord i MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/89968.html" title="Hur man gör musen Listener Använda Swing i Java " target="_self">Hur man gör musen Listener Använda Swing i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/86762.html" title="Hur du installerar och konfigurerar SSIS " target="_self">Hur du installerar och konfigurerar SSIS </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>