Juega con el código|Tres asombrosos códigos de tecnología negra, cada línea de código tiene un efecto sorprendente

Tabla de contenido

mostrar contraseña olvidada

Eliminar restricciones web

quitar logo de video

Recomendación de código de alta calidad de hoy

lograr efecto

Proceso de implementación

1. HTML y CSS sencillos

2. Crea un lienzo lienzo

3. Obtenga la posición de clic del mouse

4. Realice la forma principal de fuegos artificiales generados por un clic del mouse

5. Darse cuenta de la propagación de los fuegos artificiales

6. Realice el efecto final y el color aleatorio.

7. Realice la caída por gravedad de los fuegos artificiales

8. Realice el efecto automático de fuegos artificiales.

texto personalizado

---

mostrar contraseña olvidada

Es a veces que nuestro navegador recuerda la contraseña y siempre inicia sesión con la contraseña recordada. Olvidé la contraseña después de mucho tiempo. Si cambia a un nuevo navegador sin contraseña, no hay forma de hacerlo. Esto realmente hace que la gente se rasque la cabeza.

Conocí al editor hoy, este problema no es un problema, deje que el editor lo lleve a experimentar el encanto del código, para que pueda verificar fácilmente la contraseña olvidada. De esta forma, aunque lo olvidemos, siempre que el navegador lo recuerde por nosotros, no tenemos que preocuparnos en absoluto.

Organizar ahora:

1. Haga clic en F12 para abrir el modo desarrollador.

Si F12 no está disponible o hace clic en los tres puntos en la esquina superior derecha - más herramientas - herramientas de desarrollador.

 2. Busque la opción de la consola, que es [consola] en chino, ingrese los siguientes códigos a su vez y presione Entrar.

javascript:"use strict";!function(){var e,t;e=document.getElementsByTagName("input");for(var a=0;a<e.length;a++)if(t=e[a],"password"==t.type.toLowerCase())try{t.type="text"}catch(e){var r,n;r=document.createElement("input"),n=t.attributes;for(var o=0;o<n.length;o++){var i,c,d;i=n[o],c=i.nodeName,d=i.nodeValue,"type"!=c.toLowerCase()&&"height"!=c&&"width"!=c&!!d&&(r[c]=d)}t.parentNode.replaceChild(r,t)}}();

3. Ver el efecto como se muestra en la animación 

 4. Resumen

• fácil y conveniente
• efectivo, práctico
• No te preocupes por olvidar tu contraseña

Eliminar restricciones web

¿Alguna vez te has encontrado con una situación como esta:

• 1. La página web está configurada para no permitir la copia de contenido;
• 2. La copia requiere una cuenta de inicio de sesión obligatoria;
• 3. La copia tiene una duración limitada;

 Tal vez el código que le presentamos hoy pueda copiar el contenido de la página web a voluntad, y usted puede copiar lo que ve. Para los tres escenarios que escribí anteriormente, tal vez pueda usar el reconocimiento de texto OCR para hacerlo, pero en comparación con mis siguientes método, es mucho más problemático.

 1. Haga clic en F12 para abrir el modo desarrollador. Si F12 no está disponible o hace clic en los tres puntos en la esquina superior derecha - más herramientas - herramientas de desarrollador.

 2. Busque la opción de la consola, que es [consola] en chino, ingrese los siguientes códigos a su vez y presione Entrar.

javascript:"use strict";!function(){var t=function(t){t.stopPropagation(),t.stopImmediatePropagation&&t.stopImmediatePropagation()};["copy","cut","contextmenu","selectstart","mousedown","mouseup","keydown","keypress","keyup"].forEach(function(e){document.documentElement.addEventListener(e,t,{capture:!0})}),alert("解除限制成功啦！")}();

3. Ver el efecto como se muestra en la animación 

 4. Resumen

• levantar restricciones
• fácil de usar
• copiar libremente

quitar logo de video

Se ve bien y quiero guardar y descargar el video que me gusta y usarlo como un material pequeño, pero es muy inconveniente usar el material con un logotipo en el video. Pero, ¿hay alguna forma de eliminar el logotipo? Tal vez puedas averiguarlo hoy.

 

 1. Haga clic en F12 para abrir el modo desarrollador. Si F12 no está disponible o hace clic en los tres puntos en la esquina superior derecha - más herramientas - herramientas de desarrollador.

 2. Busque la opción de la consola, que es [consola] en chino, ingrese los siguientes códigos a su vez y presione Entrar.

javascript:var myCss= document.createElement('style'); myCss.innerHTML ='.txp_waterMark_pic,.logo-new,.iqp-logo-box{display:none!important;}';document.body.appendChild(myCss);void(0);

3. Comprueba el efecto

Recomendación de código de alta calidad de hoy

Cortaré una sección de la Vía Láctea como regalo para ti, para que no seas inferior a los fuegos artificiales dispersos en este mundo.

Los fuegos artificiales en todo el cielo brillan en este brillante cielo estrellado, haciendo que el cielo estrellado sea hermoso y emanando su propia luz infinita. ¡Usemos un lienzo para crear un efecto de fuegos artificiales hoy!

lograr efecto

El efecto logrado sigue siendo muy bueno, el cielo está lleno de fuegos artificiales que florecen sin sentido.

Proceso de implementación

1. HTML y CSS sencillos

Estilo básico de escritura simple, fondo negro, define una etiqueta de lienzo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: black;
        }
        canvas {
            position: absolute;
            z-index: 0;
        }
</style>
</head>
<body>
    <canvas>您的浏览器不支持</canvas>
    <script src="index.js"></script>
</body>
</html>

2. Crea un lienzo lienzo

Obtenga la etiqueta primero en js, configure el tamaño del lienzo y use resizeel ajuste de la página de monitoreo para cambiar el tamaño del lienzo a tiempo

// 元素获取
const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d");
// 设定画布大小
function resizeCanvas() {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
}
resizeCanvas();
// 页面缩放改变画布大小
window.addEventListener("resize", resizeCanvas)

3. Obtenga la posición de clic del mouse

Obtener la posición del clic del mouse a través e.clientXde y e.clientY, que se utiliza para determinar la posición del clic del mouse más tarde para generar fuegos artificiales

function clickSite(e) {
    // 获取当前鼠标的坐标
    let x = e.clientX;
    let y = e.clientY;
    // 绘制
    addFires(x, y);
}
document.addEventListener('click', clickSite);

4. Realice la forma principal de fuegos artificiales generados por un clic del mouse

Implementémoslo paso a paso, este es el primer paso para lograr el efecto de fuegos artificiales, agregando un prototipo de fuegos artificiales en la posición del clic.

, este es un estado estático simple, lo haremos mover lentamente más tarde

function drawFires() {
    // 初始半径，以及粒子数量
    let count = 10;
    let radius = 10;
    for (let i = 0; i < count; i++) {
        // 渲染出当前数据
        // 下面是点数学题
        // moveX，moveY是粒子开始的坐标，画个三角形，角度半径知道很容易就得出方程
        let angle = 360 / count * i;
        let radians = angle * Math.PI / 180;
        let moveX = x + Math.cos(radians) * radius
        let moveY = y + Math.sin(radians) * radius
        // 开始路径
        ctx.beginPath();
        ctx.arc(moveX, moveY, 2, Math.PI * 2, false);
        // 结束
        ctx.closePath();
        ctx.fillStyle = '#ff0000'
        ctx.fill();
    }
}

 

5. Darse cuenta de la propagación de los fuegos artificiales

Con el presagio anterior, cada pequeño punto es un fuego artificial que está a punto de dispersarse, entonces solo necesitamos actualizar el lienzo para que su radio aumente continuamente. Es muy simple lograr el efecto de dispersión, y esa parte del código es no publicado (para ahorrar espacio), para actualizar el lienzo, se adopta un nuevo método en html5 requestAnimationFramedocumento oficial

¿Qué ventajas tiene sobre el uso de temporizadores para implementar animaciones?

1. En elementos ocultos o invisibles, requestAnimationFrameno se producirán repintados ni reflujos, lo que reduce el uso de memoria
2. requestAnimationFrame Todas las operaciones DOM en cada marco se centralizarán y completarán en un redibujado o reflujo

código de implementación de animación

// 渲染,更新粒子的信息
function tick() {
    // 更新画布
    drawFires();
    requestAnimationFrame(tick);
}
tick()

6. Realice el efecto final y el color aleatorio.

Como se puede ver en las representaciones anteriores, básicamente podemos realizar el efecto de explosión, pero los fuegos artificiales no son bolas individuales. Necesitamos agregar un efecto de arrastre y darle a cada bola un color aleatorio, que será más deslumbrante.

Código de efecto de arrastre

Después de dibujar un cuadro y antes de dibujar el cuadro siguiente, agregar una máscara translúcida puede lograr un efecto de estela

function tick() {
    // 设置拖影
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0,0,0,' + 10 / 100 + ')';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'lighter';
    // 更新画布
    drawFires();
    requestAnimationFrame(tick);
}

código de color aleatorio

La función se usa hslapara establecer el color, porque los colores de los fuegos artificiales están cerca, por lo que podemos elegir el color de los fuegos artificiales ajustando el valor del tono. Aquí, la saturación fija es del 100 %, y el brillo y el color se encuentran aleatoriamente dentro de un cierto rango, por lo que el color no será demasiado escandaloso.

La función hsla() define un color mediante el tono, la saturación, la luminosidad y la transparencia.

let hue = Math.random() * 360;
let hueVariance = 60;
function setColors(firework) {
    firework.hue = Math.floor(Math.random() * ((hue + hueVariance) - (hue - hueVariance))) + (hue - hueVariance);
    firework.brightness = Math.floor(Math.random() * 21) + 50;
    firework.alpha = (Math.floor(Math.random() * 60) + 40) / 100;
}

7. Realice la caída por gravedad de los fuegos artificiales

De las representaciones anteriores, podemos darnos cuenta de que todavía estamos a dos partes de distancia, la caída de los fuegos artificiales y la desaparición de los fuegos artificiales.

Nos damos cuenta de la caída de los fuegos artificiales al reajustar el algoritmo de la trayectoria de los fuegos artificiales. En el código inicial, la trayectoria de explosión de los fuegos artificiales es un movimiento lineal ordinario. Necesitamos aumentar su dirección y sobre esta base, de modo que se produzca un efecto parabólico. ser logrado. Al mismo tiempo, debe haber un efecto exhaustivo para la explosión de fuegos artificiales. Logramos esto cambiando la transparencia. Para una transparencia inferior a 0, la eliminamos de la matriz.

let moveX = Math.cos(firework.radians) * firework.radius;
let moveY = Math.sin(firework.radians) * firework.radius + 1;
firework.x += moveX;
firework.y += moveY;
// 更新数据,让圆扩散开来
firework.radius *= 1 - firework.speed / 120
firework.alpha -= 0.01;
// 如果透明度小于0就删除这个粒子
if (firework.alpha <= 0) {
    fireworks.splice(i, 1);
    // 跳过这次循环，不进行绘制
    continue;
}

Algoritmo cambiado

Cada vez que se actualiza el lienzo, la transparencia se reduce y el radio de movimiento de cada partícula se reduce continuamente, lo que formará una tendencia a cerrarse en el medio. Dado que cada partícula se almacena en una matriz, cuando la transparencia de la partícula es menor que 0, de la matriz eliminar

8. Realice el efecto automático de fuegos artificiales.

Solo necesita agregar fuegos artificiales continuamente a través del temporizador

setInterval(() => {
    // 可以多调用几次用来增加烟花的数量
    addFires(Math.random() * canvas.width, Math.random() * canvas.height)
    addFires(Math.random() * canvas.width, Math.random() * canvas.height)
}, 500)

texto personalizado

Puede agregar algunas etiquetas a la página, como texto, y el efecto es bueno ~