目次
忘れたパスワードを表示
ブラウザがパスワードを記憶しており、常に記憶したパスワードを使用してログインすることがありますか。久しぶりにパスワードを忘れてしまいました。パスワードなしで新しいブラウザに変更した場合、それを行う方法はありません。これには本当に頭を悩ませます。
今日編集者に会ったのですが、この問題は問題ではありません。編集者にコードの魅力を体験してもらい、忘れたパスワードを簡単に確認できます。このように、たとえ忘れてしまっても、ブラウザが記憶してくれていれば、まったく心配する必要はありません。
今すぐ手配してください:
1. F12 をクリックして開発者モードを開きます。
F12 が使用できない場合、または右上隅にある 3 つの点 - その他のツール - 開発者ツールをクリックします。
2. コンソール オプション (中国語では [console]) を見つけ、次のコードを順番に入力して Enter を押します。
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. アニメーションで示されているように効果を確認します。
4. まとめ
- 簡単で便利
- 効果的な、実用的な
- パスワードを忘れる心配はありません
ウェブ制限を解除する
次のような状況に遭遇したことはありませんか。
- 1. Web ページはコンテンツのコピーを許可しないように設定されています。
- 2. コピーには必須のログインアカウントが必要です。
- 3. コピーの長さには制限があります。
おそらく、今日紹介したコードは、Web ページのコンテンツを自由にコピーでき、表示されているものをコピーできます。上で書いた 3 つのシナリオでは、OCR テキスト認識を使用して実行できるかもしれませんが、次のコードと比較すると、方法としては、はるかに面倒です。
1. F12 をクリックして開発者モードを開きます。F12 が使用できない場合、または右上隅にある 3 つの点 - その他のツール - 開発者ツールをクリックします。
2. コンソール オプション (中国語では [console]) を見つけ、次のコードを順番に入力して Enter を押します。
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. アニメーションで示されているように効果を確認します。
4. まとめ
- リフト制限
- 使いやすい
- 自由にコピー
ビデオロゴを削除する
見た目も良く、気に入った動画をダウンロードして保存してちょっとした素材として使いたいのですが、動画上にロゴが入った素材を使うのは非常に不便です。しかし、ロゴを削除する方法はあるのでしょうか? もしかしたら今日分かるかも知れません。
1. F12 をクリックして開発者モードを開きます。F12 が使用できない場合、または右上隅にある 3 つの点 - その他のツール - 開発者ツールをクリックします。
2. コンソール オプション (中国語では [console]) を見つけ、次のコードを順番に入力して Enter を押します。
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.効果を確認する
今日の高品質コードの推奨事項
この世に散らばる花火に負けないように 天の川の一部を切り取って君にプレゼントするよ
空いっぱいの花火がこの明るい星空に輝き、星空をゴージャスにし、無限の光を放ちます。今日はキャンバスを使って花火のエフェクトを作成してみましょう。
効果を達成する
達成された効果はまだ非常に優れており、空は花火でいっぱいです、むやみに咲きます
実装プロセス
1. シンプルなHTMLとCSS
シンプルな書き方の基本スタイル、黒の背景、canvas タグを定義
<!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.キャンバスキャンバスを作成する
まずjsでラベルを取得し、キャンバスのサイズを設定し、resize監視ページの調整を使用して時間内にキャンバスのサイズを変更します
// 元素获取
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. マウスのクリック位置を取得する
e.clientXとを通じてマウス クリックの位置を取得しますe.clientY。これは、後で花火を生成するためにマウス クリックの位置を実現するために使用されます。
function clickSite(e) {
// 获取当前鼠标的坐标
let x = e.clientX;
let y = e.clientY;
// 绘制
addFires(x, y);
}
document.addEventListener('click', clickSite);
4. マウスクリックで発生する花火の原形を実現
段階的に実装してみましょう。これは、クリック位置に花火のプロトタイプを追加することで、花火の効果を実現するための最初のステップです。
、これは単純な静的な状態です。後でゆっくりと動かします。
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.花火の普及を実現
上記の伏線により、すべての小さなドットは分散しようとしている花火であるため、キャンバスを更新してその半径を継続的に増加させるだけで済みます。分散の効果を実現するのは非常に簡単で、コードのその部分は次のようになります。投稿されていません（スペース節約のため）、キャンバスの更新にはhtml5の新しい方法が採用されていますrequestAnimationFrame公式ドキュメント
タイマーを使用してアニメーションを実装することに比べて、どのような利点がありますか?
- 非表示または非表示の要素では、
requestAnimationFrame再描画やリフローが発生しないため、メモリ使用量が削減されます。 requestAnimationFrame各フレーム内のすべての DOM 操作は集中化され、1 回の再描画またはリフローで完了します。
アニメーション実装コード
// 渲染,更新粒子的信息
function tick() {
// 更新画布
drawFires();
requestAnimationFrame(tick);
}
tick()
6. 尾引き効果とランダムカラーを実現
上記のレンダリングからわかるように、基本的には爆発エフェクトを実現できますが、花火は個々のボールではないため、後続エフェクトを追加し、各ボールにランダムな色を与える必要があります。
末尾のエフェクトコード
フレームを描画した後、次のフレームを描画する前に半透明マスクを追加すると、尾引き効果を実現できます。
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);
}
ランダムなカラーコード
この関数は色の設定に使用されますhsla。花火の色は近いため、色相の値を調整することで花火の色を選択できます。ここでは彩度を100%に固定し、派手になりすぎないように明るさと色を一定範囲内でランダムに設定しています。
hsla() 関数は、色相、彩度、明度、透明度を使用して色を定義します。
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.花火の重力落下を実現
上のレンダリングから、花火が落ちるまでと花火が消えるまで、まだ 2 つの部分があることがわかります。
花火の落下経路のアルゴリズムを再調整することで、花火の落下を実現します。初期コードでは、花火の爆発経路は通常の直線運動でした。これに基づいて、放物線効果が得られるように、y 方向を大きくする必要があります。達成されます。同時に、花火の爆発の徹底的な効果が必要です。透明度を変更することでこれを実現します。透明度が 0 未満の場合、配列からそれを削除します。
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;
}
アルゴリズムが変更されました
キャンバスを更新するたびに透明度が下がり、各パーティクルの移動半径がどんどん小さくなり、途中で閉じる傾向になります 各パーティクルは配列に格納されているため、パーティクルの透明度がそれ以下の場合0、配列から削除
8.自動花火効果を実現
タイマーを使って連続的に花火を追加するだけです
setInterval(() => {
// 可以多调用几次用来增加烟花的数量
addFires(Math.random() * canvas.width, Math.random() * canvas.height)
addFires(Math.random() * canvas.width, Math.random() * canvas.height)
}, 500)
カスタムテキスト
ページにテキストなどのタグを追加すると、効果が高まります~
