Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript

Mostrar los tags: JavaScript

Volver
Agregar Código Fuente
Mostrando del 1 al 10 de 182 coincidencias
<<>>
Se ha buscado por el tag: JavaScript
Imágen de perfil

Component Linear gradient


JavaScript

Publicado el 30 de Diciembre del 2022 por Oscar (8 códigos)
374 visualizaciones desde el 30 de Diciembre del 2022
Con este script podrás probar la manera de enviar mensajes entre components en Vue 2.6.x(famoso two data binding), y javascript ver video para mas detalles en
https://www.youtube.com/watch?v=73QHJ2upcK
sin imagen de perfil

Registro - Login - Mail - OTP


PHP

Publicado el 25 de Diciembre del 2022 por Jefferson (11 códigos)
2.037 visualizaciones desde el 25 de Diciembre del 2022

SISTEMA DE REGISTRO-LOGIN mediante EMAIL-OTP



otp_register

1) Al descomprimir hay un archivo txt que debes leer y seguir las instrucciones

-> Bien, si seguiste todos los pasos no debería petar el sistema <-

2) No posee usuario administrador (debes crearlo tu)
simplemente agregas a la tabla usuarios un campo al que puedas llamar admin tipo INT donde 1 indica que es el administrador
luego por medio de php creas controles de seguridad

3) Una vez que te logueas, recibirás un correo donde debes pulsar el botón de activar la verificación del email
(Incluye una plantilla correo para registro/verificacion email)

4) Al verificar el email el campo email_verify de la tabla usuarios cambia a TRUE o 1 permitiendo el acceso

5) Existe un campo en la tabla usuarios llamado activo tipo INT que si lo colocas a FALSE o 0 impide el acceso
(esto, por si decides crear un usuario administrador y mediante programacion php puedes darle o quitarle acceso a cualquier usuario)

6) Una vez logueado, verificado y aceptado. Puedes ingresar al sistema, no sin antes validar un codigo OTP que se te enviara
a tu correo cada vez que entres. "Incluye una plantilla correo para OTP"
(Si utilizas algun servicio SMS o WhatsApp puedes enviar ese codigo OTP por alguna de esas vias)

7) Ofrece la posibilidad de recuperar la contraseña en caso de olvido, he diseñado una password de un solo uso y que al entrar al sistema
deberias cambiarla inmediatamente. Si no lo haces esta password aleatoria quedara invalidada.

8) Al cambiar la password o contraseña por motivo de olvido, se te enviara un email notificando del cambio y te otorgaremos una nueva
password aleatoria. Si al abrir el correo no fuistes tu quien solicito el cambio de contraseña, hay un link para revertir y dejar todo
original.
(Incluye una plantilla correo para recuperacion de contraseña)
Imágen de perfil

Calculadore inline


JavaScript

Publicado el 18 de Septiembre del 2022 por Oscar (8 códigos)
863 visualizaciones desde el 18 de Septiembre del 2022
Este codigo en javascript permite sacar una cuenta con los operadores basicos, poniendo todos ellos en la misma cadena, siempre dejando un espacio como restricción. Este código esta basado en una kata de codewars que resolvi y que paso una test enorme de bastantisimos operadores
Imágen de perfil

Corredor_ Dance


HTML

Actualizado el 5 de Marzo del 2022 por Javier (Publicado el 28 de Febrero del 2022)
1.864 visualizaciones desde el 28 de Febrero del 2022
Se basa en la aplicación de la API de animaciones de javascript API ANIMATE.
En este caso se trata de un muñeco, Corredor lo llamo, que hace eso, correr.
Pero ademas puedes interactuar con el con una serie de inputs range, para darle mas o menos velocidad a cada parte de su cuerpo, y hasta lo puedes hacer como bailar.
Imágen de perfil

Scale Font Size - JS


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 28 de Febrero del 2022 por Scriptshow (141 códigos) (Publicado el 25 de Enero del 2022)
1.470 visualizaciones desde el 25 de Enero del 2022
Saludos,

un Script para ajustar el texto al ancho de la pantalla. Por defecto es una práctica responsive, compatible. No obstante, es también un efecto utilizado con frecuencia en Webs.
El código, está simplificado en lo posible sin perder la compatibilidad.

Espero sea útil.
Imágen de perfil

Focus / Blur Efectos en Web Site


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 22 de Febrero del 2022 por Scriptshow (141 códigos) (Publicado el 20 de Noviembre del 2017)
3.369 visualizaciones desde el 20 de Noviembre del 2017
Script que cambia el aspecto de una web, intro, etc. al clicar dentro o fuera del navegador. Los eventos: OnFocus / OnBlur asociados a funciones JavaScript, cambian la/s Clase/s y contenidos de un Sitio Web. Abre el browser en primer plano; haz click sin cerrarlo ni minizarlo para ver el efecto.

Piensa en posibles aplicaciones...

Espero sea útil.

Un saludo
Imágen de perfil

Web 2.0 Light / Dark Style


HTML

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 22 de Febrero del 2022 por Scriptshow (141 códigos) (Publicado el 4 de Mayo del 2020)
5.251 visualizaciones desde el 4 de Mayo del 2020
Saludos,

Web 2.0 es un proyecto creado desde cero con unos 6Kb. Se caracteriza por ser muy flexible, adaptable con mínimos cambios en el código. No depende de librerías de nigún tipo, es 100% Código Nativo Compatible.
Tiene múltiples y variadas aplicaciones: Web Personal, Portafolio para Fotógrafos, Arquitectos, Diseñadores, Freelancers, etc...

Espero sea útil.
Imágen de perfil

Fullscreen JS Simple


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 16 de Enero del 2022 por Scriptshow (141 códigos)
1.387 visualizaciones desde el 16 de Enero del 2022
Saludos,

Script adaptable que permite poner a pantalla completa un elemento u objeto de una página web. Es compatible con navegadores web y/o dispositivos actuales.
Imágen de perfil

Vídeo Fullscreen Responsive


HTML

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 5 de Enero del 2022 por Scriptshow (141 códigos)
3.471 visualizaciones desde el 5 de Enero del 2022
Saludos,

HTML5 y CSS3 para hacer un Vídeo Fullscreen Responsive. Un pequeño Script asegura el arranque en diversos dispositivos y navegadores web.

Veamos el código completo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Video Background</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
 
html,body {
height:100%;
}
 
body {
font-size:16px;
font-family:"Helvetica", sans-serif;
line-height:1.5;
color:#FFFFFF;
}
 
.content {
position:relative;
top:28%;
z-index:2;
margin:0 auto;
max-width:640px;
text-align:center;
}
 
.video {
position:fixed;
top:50%;
left:50%;
z-index:1;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="content">
<h1>Video Full Screen Test</h1>
<p>Este Vídeo Background Responsive se adapta al tamaño de dispositivos y navegadores.</p>
<a href="#">Test</a>
</div>
 
<video id="video" class="video" muted loop>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
</video>
 
<script type="text/javascript">
(function() {
var video=document.getElementById("video");
video.addEventListener("canplay", function() {video.play()});
})();
</script>
</body>
</html>

Espero sea útil.
1...Anterior1234567891011Siguiente...19