“Conocimientos Programación>JavaScript Programación

Cómo girar el texto con javascript

2013/11/14
Es difícil saber cómo los clientes potenciales podrían reaccionar a un eslogan publicitario , y muchos sitios web crearán varias consignas , girar el texto y medir el número de clics para determinar la consigna más eficaz. Usted puede utilizar JavaScript para girar el texto en la pantalla , creando una serie de texto a la pantalla , creando una función para mostrar el siguiente elemento de texto de la matriz y llamar al método " setInterval " para implementar la rotación en un intervalo de tiempo regular. Instrucciones
1

Crear un nuevo documento HTML con el Bloc de notas o un editor HTML. Inserte los encabezados de HTML en el documento :




< meta charset = "UTF - 8 ">

girar texto < /title> <br> 2 <p> Añadir código JavaScript para crear una serie de mensajes de texto a girar. Calcular la posición del último mensaje de texto en la matriz mediante la adopción de la longitud y restando uno . Inicializar una variable (puntero ) para rastrear el índice del mensaje de texto actual en la matriz <br> <p> <script> <br> <p> var text = [ ". Oferta Especial - Haga click aquí" , "Free - hacer clic aquí "," no te pierdas esta oferta - Haga clic Aquí " ] ; ! <br> <p> maxSlogans var = text.length - 1 ; <br> <p> actual var = 0 ; Pierdas! <br> 3 <p> Crear una función JavaScript para girar el texto . Seleccione el siguiente mensaje de texto de la matriz o mover el puntero de nuevo al primer mensaje de texto si usted ha llegado al final de la matriz . Muestra el texto sustituyendo la propiedad " innerHTML " de la etiqueta <div> con el mensaje de texto : <br> <p> rotateText function () { if ( <br> <p> + + actuales > maxSlogans ) actual = 0 , . <br> <p> document.getElementById ( " textDiv ") innerHTML = '<a href="http://example.com/special' + actual + '.php"> ' + texto [ actual ] + '< /a >'; <br> <p> } <br> 4 <p> Llame al método JavaScript " setTimeout " con la función que desea ejecutar y el intervalo de ejecución en milisegundos. Por ejemplo, ejecute la función " rotateText " cada 10 segundos: <br> <p> window.setInterval ( " rotateText ()" , 10000 ) ; <br> <p> < /script > <br> <p> < ;/head> <br> 5 <p> Crear un <div> en el cuerpo del documento y asignarle el ID que utilizó en la función de rotación JavaScript . Ver el primer lema del texto dentro de la etiqueta <div> : <br> <p> <body> <br> <p> <div id="textDiv"> <a href = " http://example .com/special0.php "> Oferta Especial - Haga clic aquí < /a> < /div > <br> <p> < /body> <br> <p> < /html > <br> Página 6 <p> Guarde el archivo . Abrir en un navegador y ver el texto gira en la pantalla . <br> <br> <div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div> </div> <div class=contentpage> <div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-determinar-las-coordenadas-de-un-elemento-con-JavaScript-.html' >Cómo determinar las coordenadas de un elemento con JavaScript </a> </div> <div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Los-riesgos-con-JavaScript-.html' >Los riesgos con JavaScript </a> </div> </div> <dl class=xgc> <dt><span>JavaScript Programación</span></dt> <dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-ajustar-el-enfoque-con-jQuery-.html">Cómo ajustar el enfoque con jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-detectar-el-sistema-operativo-con-JavaScript-.html">Cómo detectar el sistema operativo con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Imprimir-Tutorial-de-JavaScript-.html">Imprimir Tutorial de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Javascript-Vs-relevantes---Absolute-Ruta-.html">Javascript Vs relevantes . Absolute Ruta </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-Pop---Ups-.html">Cómo hacer Pop - Ups </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-Iniciar-una-matriz-de-JavaScript-.html">Cómo Iniciar una matriz de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-incrustar-un-enlace-en-AS2-.html">Cómo incrustar un enlace en AS2 </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Conjuntos-de-marcos-correctos-JavaScript-.html">Conjuntos de marcos correctos JavaScript </a></dd> </dl> </div> <!--right--> <div class=rightmain> <div class=esrightlist> <div class=e1>Los últimos artículos de equipo</div> <ul> <li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-poner-código-JavaScript-en-un-archivo-PHP-.html" >Cómo poner código JavaScript en un archivo PHP </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/JavaScript-Vs---VBScript-.html" >JavaScript Vs . VBScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Conjuntos-de-marcos-correctos-JavaScript-.html" >Conjuntos de marcos correctos JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-instalar-scripts-para-Greasemonkey-.html" >Cómo instalar scripts para Greasemonkey </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-habilitar-y-deshabilitar-barras-de-desplazamiento-con-javascript-.html" >Cómo habilitar y deshabilitar barras de desplazamiento con javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-tinta-reciclado-.html" >Cómo hacer tinta reciclado </a> </li> </ul> </div> <div class=esrightlist> <div class=e1>Artículos de la popular computadora</div> <ul> <li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-quitar-JavaScript-.html" >Cómo quitar JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Causas-de-una-secuencia-de-comandos-Void-Error-Java-.html" >Causas de una secuencia de comandos Void Error Java </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Definición-de-JavaScript-.html" >Definición de JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-XLS-con-JavaScript-.html" >Cómo crear XLS con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-devolver-Funciones-adicionales-para-múltiples-números-de-JavaScript-.html" >Cómo devolver Funciones adicionales para múltiples números de JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-determinar-las-coordenadas-de-un-elemento-con-JavaScript-.html" >Cómo determinar las coordenadas de un elemento con JavaScript </a></li> </ul> </div> <div class="esrightad"> <script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script> </div> <div class=esrightlist> <div class=e1>Más categorías</div> <ul> <li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li> <li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li> <li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li> </ul> </div> </div> <!--right end--> <div class="cl"></div> </div> <div class=esfoot> <div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div> </div> </body> </html>