Embedded Files
Biblioteca de códigos útiles en JavaScript
Campo con contador regresivo con limitación de caracteres y texto
a) Inserta este código dentro del script
<script> var limitChar = (element) => { var maxChar = 150; var ele = document.getElementById(element.id); var charLen = ele.value.length; var p = document.getElementById('charCounter'); p.innerHTML = maxChar - charLen + ' caracteres que quedan.'; if (charLen > maxChar) { ele.value = ele.value.substring(0, maxChar); p.innerHTML = 0 + ' caracteres que quedan.'; } }</script>
b) Ejemplo de uso con código HTML de tu página web
<form method="POST" action="guardar.php" name="formulario1"> <p>Escribe tu mensaje. Recuerda que solo tienes 150 caracteres</p> <p><textarea id="pregunta1" cols="150" rows="8" oninput="limitChar(this)" maxlength="150"></textarea> <p id="charCounter">150 caracteres que quedan.</p></div> <div align="center"><center><p> <font face="Verdana"> <input type="submit" name="btnEnviara1" value="Enviar"><font size="2"> </font> <input type="reset" value="Borrar" name="B2"></font></p></center></div>Máquina de escribir
a) Inserta este código dentro del html
<div style="font-family: sans-serif; font-size: 26px; color:#ffffff;" id="demo"></div>b) Inserta este código dentro del script
<script>var i = 0;var txt = 'Mi texto.'; //Texto que aparecer al cabo de un tiempovar enlaces = '<p><a href="#">Continuar</a></p><p><a href="#">Regresar</a></p>'; //Lo enlaces los pinta de golpe para que se activen.var speed = 3;if(window.innerWidth <= 800) { document.getElementById("demo").style.fontSize = "14px"; // Tamaño de fuente para móviles } else { document.getElementById("demo").fontSize = "30px"; // Tamaño de fuente para escritorios }
function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed);if (i > txt.length - 1) document.getElementById("demo").innerHTML += enlaces; }}typeWriter();</script>
Iré ampliando poco a poco esta página con nuevo contenido, según lo vaya necesitando.
Google Sites
Report abuse