JS - Cambiar fondo del cuerpo

Cambiar fondo del cuerpo de la página web al hacer clic

<button id="btnHalloween">🎃 Activar Halloween</button> <script> const btn = document.getElementById('btnHalloween'); btn.addEventListener('click', () => { document.body.style.backgroundColor = '#12071f'; document.body.style.color = '#ff6600'; alert('¡La maldición de Halloween ha comenzado!'); }); </script>

JS - Cambia la hoja de estilos CSS

Cambiar la hoja de estilo con Javascript al hacer clic

El código esta demasiado bueno como para no tenerlo en el sitio.
Recuerda solo modificar lo que vayas a necesitar.

HTML (index.html)

html

<head>

  <link id="estilo" rel="stylesheet" href="estilo1.css">

</head>

<body>

  <button id="miBoton">Cambiar Estilo</button>

</body>

Javascript

const boton = document.getElementById('miBoton');

const hojaEstilo = document.getElementById('estilo');

boton.addEventListener('click', () => {

  if (hojaEstilo.getAttribute('href') === 'estilo1.css') {

    hojaEstilo.setAttribute('href', 'estilo2.css');

  } else {

    hojaEstilo.setAttribute('href', 'estilo1.css');

  }

});

Como obtener tu IP publica

 

Como obtener nuestra ip publica..

Abres cmd y escribes: curl ifconfig.me  (puerto por default 21)

Si llegaran a tener alguna situación, hay que habilitar la busqueda desde explorador de archivos.

Solo hay que habilitar varias opciones de ftp... Aquí solo muestro una de varias...

Con esto debe de funcionar.

js completo

 /************* HAMBURGUER ****************/

window.onload = function () {

    window.addEventListener('scroll', function (e) {

        if (window.pageYOffset > 100) {

            document.querySelector("header").classList.add('is-scrolling');

        } else {

            document.querySelector("header").classList.remove('is-scrolling');

        }

    });

    const menu_btn = document.querySelector('.hamburger');

    const mobile_menu = document.querySelector('.mobile-nav');

    menu_btn.addEventListener('click', function () {

        menu_btn.classList.toggle('is-active');

        mobile_menu.classList.toggle('is-active');

    });

};

// WHATSAPP NUMBER

function myWhats(){

    let numWhatsapp = prompt("Numero de whatsapp sin espacios.");

    let resultNum = 'https://api.whatsapp.com/send?phone=+52'+numWhatsapp+'&text=Hola';

    console.log(resultNum);

    document.getElementById("show_up").innerHTML = resultNum;

};

// SLIDER AUTOMÁTICO BANNER GRANDE //

document.addEventListener('DOMContentLoaded', function() {

            const track = document.querySelector('.slider-track');

            const slides = document.querySelectorAll('.slider-slide');

            const dots = document.querySelectorAll('.slider-dot');

            const prevBtn = document.querySelector('.prev');

            const nextBtn = document.querySelector('.next');

           

            let currentIndex = 0;

            let slideWidth = slides[0].clientWidth;

            let autoSlideInterval;

            const slideCount = slides.length;

           

            // Set up slider

            function initSlider() {

                slideWidth = slides[0].clientWidth;

                track.style.width = `${slideWidth * slideCount}`;

               

                // Set initial active dot

                updateDots();

               

                // Start auto slide

                startAutoSlide();

               

                // Handle window resize

                window.addEventListener('resize', function() {

                    slideWidth = slides[0].clientWidth;

                    track.style.width = `${slideWidth * slideCount}`;

                    goToSlide(currentIndex);

                });

            }

           

            // Go to specific slide

            function goToSlide(index) {

                if (index < 0) {

                    index = slideCount - 1;

                } else if (index >= slideCount) {

                    index = 0;

                }

               

                currentIndex = index;

                track.style.transform = `translateX(-${slideWidth * currentIndex}px)`;

                updateDots();

               

                // Reset auto slide timer

                resetAutoSlide();

            }

           

            // Update navigation dots

            function updateDots() {

                dots.forEach((dot, index) => {

                    dot.classList.toggle('active', index === currentIndex);

                });

            }

           

            // Auto sliding

            function startAutoSlide() {

                autoSlideInterval = setInterval(() => {

                    goToSlide(currentIndex + 1);

                }, 5000);

            }

           

            function resetAutoSlide() {

                clearInterval(autoSlideInterval);

                startAutoSlide();

            }

           

            // Event listeners

            prevBtn.addEventListener('click', () => {

                goToSlide(currentIndex - 1);

            });

           

            nextBtn.addEventListener('click', () => {

                goToSlide(currentIndex + 1);

            });

           

            // Dot navigation

            dots.forEach((dot, index) => {

                dot.addEventListener('click', () => {

                    goToSlide(index);

                });

            });

           

            // Pause on hover

            track.addEventListener('mouseenter', () => {

                clearInterval(autoSlideInterval);

            });

           

            track.addEventListener('mouseleave', () => {

                resetAutoSlide();

            });

           

            // Initialize slider

            initSlider();

        });

// MOSTRAR OCULTAR CONTENIDO DE MOVIES SERIES Y TV

function hidMvs() {

    var x = document.getElementById("miDiv");

    if (x.style.display === "block") {

        x.style.display = "none";

    } else {

        x.style.display = "block";

    }

}

function hidMvs2() {

    var x = document.getElementById("miDivTV");

    if (x.style.display === "block") {

        x.style.display = "none";

    } else {

        x.style.display = "block";

    }

}

function hidSeries() {

    var x = document.getElementById("miDivSeries");

    if (x.style.display === "block") {

        x.style.display = "none";

    } else {

        x.style.display = "block";

    }

}

// JUEGO DE TEMPORIZADOR 10 SEGUNDOS

   let tiempoRef = Date.now()

      let cronometrar = false

      let acumulado = 0

      function iniciar() {

          cronometrar = true

      }

      function pausar() {

          cronometrar = false

      }

      function reiniciar() {

          acumulado = 0

      }

      setInterval(() => {

          let tiempo = document.getElementById("tiempo")

          if (cronometrar) {

              acumulado += Date.now() - tiempoRef

          }

          tiempoRef = Date.now()

          tiempo.innerHTML = formatearMS(acumulado)

      }, 1000 / 60);

      function formatearMS(tiempo_ms) {

          let MS = tiempo_ms % 1000

         

          //Agregué la variable St para solucionar el problema de contar los minutos y horas.

         

          let St = Math.floor(((tiempo_ms - MS) / 1000))

         

          let S = St%60

          let M = Math.floor((St / 60) % 60)

          let H = Math.floor((St/60 / 60))

          Number.prototype.ceros = function (n) {

              return (this + "").padStart(n, 0)

          }

          return H.ceros(2) + ":" + M.ceros(2) + ":" + S.ceros(2)

              + "." + MS.ceros(3)

      }

// INDICE DE MASA CORPORTAL IMC

// peso / altura² 3.0276 = 29.3962

// peso / 2.89 = 22.49

// bajo peso 18.5

// peso normal 18.5 -24.9

// sobrepeso 25 - 29.9

// obesidad 30 o +

function imc_form(){

    let s1 = document.getElementById('num1').value;

    let s2 = document.getElementById('num2').value;

    resultado = parseFloat(s1) / (parseFloat(s2)*s2);

    texto_resultado = document.getElementById('result_imc');

    texto_resultado.innerText = (resultado.toFixed(3));

}

function peso_form(){

    let s3 = document.getElementById('num3').value;

   

    resultado = s3 - 106;

    texto_resultado = document.getElementById('resultado_peso');

    texto_resultado.innerText = (resultado);

}

PHP - Conexión a mysql

Códigos para enlazar Xampp y Mysql...

Abrir el archivo desde xampp en config <Browse> desde Mysql e ir hacía atras un paso para buscar la carpeta phpMyAdmin y abrir el archivo "config.inc.php"
O directo desde enlace:

C:\xampp\phpMyAdmin\config.inc.php

Dentro de este archivo es de donde hacemos la configuración para la conexión

Ruta para guardar los archivos php en nuestro PC (similar a ftp cuando subimos a internet nuestro sitio web)

C:\xampp\htdocs\ejemplo\index.php

Código para index.php acceso a mysql   [va antes de Doctype html]

<?php
$servidor = "localhost:3307";  - // puerto ya configurado
$usuario = "root";  - // usuario 
$clave = "gue55me";  - // contraseña
$baseDeDatos = "ejemplo";  - // nombre de la base de datos que ya creaste previamente (ve creando de una vez la tabla dentro de la base de datos)

$enlace = mysqli_connect ($servidor, $usuario, $clave, $baseDeDatos);  - // variable para la conexión, sin ella no puedes acceder.
?>

Este código viene dentro del cuerpo de index.php

<form method="post">
        <input type="text" name="nombre" placeholder="nombre">
        <input type="email" name="correo" placeholder="correo">
        <input type="text" name="telefono" placeholder="telefono">

        <input type= "submit" name="enviar">
        <input type= "reset">
</form>


<?php
    if(isset($_POST['enviar'])){
        $nombre = $_POST['nombre'];
        $correo = $_POST['correo'];
        $telefono = $_POST['telefono'];

        $insertar = "INSERT INTO datos Values ('$nombre','$correo','$telefono','#variable vacia que es aquí donde esta el id y es automático autoincrementable')";  - // esta línea es como se agregan datos en una tabla en mysql...  

        $coneccion = mysqli_query($enlace,$insertar);  - // las últimas líneas de php son las que se agregan dentro de esta última variable. 1ero la de arriba, después la de abajo.
}

?> 

Bluetooth

Encontrando el ejecutable de Bluetooth para poderlo utilizar en "enviar a"

 C:\Windows\System32\ fsquirt.exe

Retroarch - Bios para Playstation 1

Intro original de Playstation 1 en Retroarch

Solo hay que descargar la bios de la play para este intro tan nostálgico, da clic acá download

Después hay que ir a la carpeta raíz de las bios en retroarch: C:\RetroArch-Win64\system Y aquí pegar el folder y extraer.
Quedando de la siguiente forma:

Pero para que funcione, tiene que deshabilitar Fast Boot en retroarch..

Al ingresar al juego presionamos f1 en el teclado, opciones del núcleo, console setting, fast boot y dejar en NO.

JS - Creando el espacio en tu sitio web

 Espacio estelar en tu sitio web con Javascript

Código para no perder la línea--

Espero poder poner contenido dentro del espacio, que hasta ahorita no he podido.

-------------------------HTML5

<canvas id="canvas"></canvas>

-------------------------CSS3

#canvas{

    width: 100%;

    height: 150px;

    background: black;

}

-------------------------CSS3

// Canva espacial black and estrellas

  const canvas = document.getElementById('canvas');

  const ctx = canvas.getContext('2d');

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

  // Crear lista de estrellas

  const numEstrellas = 200;

  const estrellas = [];

  for (let i = 0; i < numEstrellas; i++) {

    estrellas.push({

      x: Math.random() * canvas.width,

      y: Math.random() * canvas.height,

      tam: Math.random() * 5,

      vel: Math.random() * 1.5 + 3.5 // Velocidad de movimiento

    });

  }

  function animar() {

    // Limpiar pantalla

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'white';

    // Actualizar y dibujar cada estrella

    estrellas.forEach(e => {

      e.x += e.vel; // Mover a la derecha

      // Si pasa el borde derecho, regresar a la izquierda (infinito)

      if (e.x > canvas.width) {

        e.x = 10;

        e.y = Math.random() * canvas.height; // Nueva posición vertical opcional

      }

      // Dibujar estrella

      ctx.fillRect(e.x, e.y, e.tam, e.tam);

    });

    requestAnimationFrame(animar);

  }

  animar(); Si logras poner contenido dentro del espacio, hay que compartir el como...

JS - Protegiendo la página web

Proteger tu sitio web con un código simple pero poderoso con Javascript.

He acá hemos dejado el código para que puedan utilizarlo, copiar y pegar como siempre.

<script>validarPassword();</script>

function validarPassword(){

    texto = prompt("Para ver la página introduzca su contraseña");

    while(texto!="titojefe.123"){

        alert("Password incorrecta");

        texto = prompt("Para ver la página introduzca su contraseña");

    }

    alert("Password Correcta");

}

Y hay que dejar la fuente de donde lo encontramos. Origen Siempre hay que agradecer a quienes construyen herramientas para los demás.

Iframe - Código para streaming deportivos

Un iframe para ver streaming deportivos en vivo

<div class="ifcontenedor">

    style="top: -20px; height: 410px;"

    <div class="tema-dcanal">

        <h1>DirecTV Sports</h1>

        <div class="sportsif">

           <iframe width="560" height="315" src=""

            title="YouTube video player" frameborder="0"

            allow="accelerometer; autoplay; clipboard-write;

            encrypted-media; gyroscope; picture-in-picture;

            web-share" referrerpolicy="strict-origin-when-cross-origin"

                allowfullscreen ></iframe>

        </div>  

    </div>

--- CSS ---

.ifcontenedor{

    width: 100%;

    height: auto;

    background: rgb(24, 24, 24);

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    justify-content: center;

    padding: 50px 0px;

}

.tema-dcanal{

    margin: 10px;

}

.sportsif{

    width: 280px;

    height: 150px;

    background: black;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 3px solid tomato;

    overflow: hidden;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}

.sportsif iframe{

    position: relative;

    width: 350px;

    height: 300px;

    top: -70px;

    background: rgb(58, 58, 58);

}

Creado para fútbol libre...

Configuración en modem para el servicio de Internet

Configuración de internet para un mejor rendimiento.

Recuerda ingresar a la puerta predeterminada que te muestra CMD... ipconfig 192.168.1.1, aunque puede ser diferente. Y si tienes router, lo recomendable es conectarlo con cable la 1era vez y configurarlo.

En 5G sigue siendo igual WPA2-PSK-AES.

Recuerda siempre investigar para que funciona cada configuración del equipo.

CSS - Borde interior

 Borde interior con css

Código:

    outline: 3px solid rgb(255, 26, 26);

    outline-offset: -3px;