jsチュートリアル

JavaScriptを使った「キーウィザード」の実装方法を教えます！

藏色散人

Aug 07, 2022 am 10:28 AM

javascript

JavaScript の奇妙なスキル: ボタンウィザード

ボタンウィザードなどの自動ツールは、手を解放し、多くのタスクを自動的に完了するのに役立ちます。生産性。

この記事では、JavaScript を使用して「キーウィザード」を実装し、クリック、フォーカス、入力、その他の操作の自動完了を示します。

効果を実現する

上のアニメーションに示すように、ページ上で次の操作が自動的に実行されます:

1. クリックします。 1 秒間隔で順番に 2 つのボタン;

2. 入力ボックスにフォーカスを設定します;

3. 入力ボックスにテキストを入力します;

4. クリックして開きますリンク;

機能原理

#原理は複雑ではなく、要素を取得し、クリックやフォーカス設定などのイベントを実行します。

問題が 2 つあります:

1. ID と名前のない要素については、getElementById と getElementByName を使用できません。それらを見つける方法;

解決策は、querySelectorAll を使用することです。ページのすべての要素を取得し、ソースコードと照合して要素を正確に特定します。コードは次のとおりです:

#2. 遅延の設定方法: 場所をクリックした後、次の操作を実行するまで数秒待ちます。

解決策は、setTimeOut とコールバック関数を使用することです。コードは次のとおりです。

キーコードの詳細説明

上記の原則に従って、クリック、フォーカス、割り当て機能を次のように準備します。

呼び出し時に、ソースコード、遅延値、およびコールバック関数を渡します。

つまり、指定されたソースコードの要素を操作し、一定時間遅延してからコールバック関数を実行します。

ソースコード部分は、以下に示すように、ページビューアで取得できます。

完全なソースコード

上記の例の完全なコードはここに示されており、HTML として保存した後に実行できます。

<html>
<body>
<script>
document.body.addEventListener("click", function(e) {
console.log(&#39;点击：&#39;,e.originalTarget);
});
</script>
<h1 id="JS版按键精灵">JS版按键精灵</h1>
<div>
一、按钮：<br>
<button style="width: 100px; height:100px;" onclick="alert(&#39;1被点击&#39;);">1</button>
<button style="width: 100px; height:100px;" onclick="alert(&#39;2被点击&#39;);">2</button>
<br>
<br>
二、输入框：
<input type="text" value="">
<br>
<br>
三、链接：<a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<hr>
<button onclick="fun1();">开始自动执行</button>
<br>
依次执行以下操作：<br>
1、点击第一、第二按钮；2、给输入框设置焦点；3、给输入框设置值：abc；4、点击链接；
<br>
</body>
<script>
//点击事件
//参数：
//outer_html：要点击的元素源码
//delay：延时
//call_back：回调函数
function click(outer_html, delay, call_back){
//获取页面所有元素
var all_elements = document.querySelectorAll(&#39;*&#39;);
//遍历元素
for(i=0; i<all_elements.length; i++){
//匹配符合条件的元素
if(all_elements[i].outerHTML==outer_html){
//点击
all_elements[i].click();
}
}
if(delay && call_back){
//过多少毫秒后执行回调函数
setTimeout(call_back, delay)
}
};
//设置焦点，即选中
//参数：
//outer_html：元素源码
//delay：延时
//call_back：回调函数
function focus(outer_html, delay, call_back){
//获取页面所有元素
var all_elements = document.querySelectorAll(&#39;*&#39;);
//遍历元素
for(i=0; i<all_elements.length; i++){
//匹配符合条件的元素
if(all_elements[i].outerHTML==outer_html){
//设焦点
all_elements[i].focus();
}
}
if(delay && call_back){
//过多少毫秒后执行回调函数
setTimeout(call_back, delay)
}
};
//设置内容
function setvalue(outer_html, type, value, delay, call_back){
//获取页面所有元素
var all_elements = document.querySelectorAll(&#39;*&#39;);
//遍历元素
for(i=0; i<all_elements.length; i++){
//匹配符合条件的元素
if(all_elements[i].outerHTML==outer_html){
//点击
all_elements[i][type] = value;
}
}
if(delay && call_back){
//过多少毫秒后执行回调函数
setTimeout(call_back, delay)
}
};
//点击按钮
function fun1(){
//要点击的元素的源码
var outer_html = `<button style="width: 100px; height:100px;" onclick="alert(&#39;1被点击&#39;);">1</button>`;
click(outer_html, 1000, fun2);
}
//点击按钮
function fun2(){
//要点击的元素的源码
var outer_html = `<button style="width: 100px; height:100px;" onclick="alert(&#39;2被点击&#39;);">2</button>`;
click(outer_html, 1000, fun3);
}
//给input设置焦点和值
function fun3(){
//要点击的元素的源码
var outer_html = `<input type="text" value="">`;
focus(outer_html);
setvalue(outer_html,"value","abc",1000,call_back_function)
}
//点击链接
function call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
click(out_html);
console.log("已完成自动点击")
}
</script>
</html>

コードのセキュリティ

オープンで透過的な JavaScript は、関数ロジックを簡単に理解でき、自由に変更できます。コードのセキュリティを向上させたい場合は、コードを暗号化して保護する必要があります。たとえば、専門的な JavaScript コード難読化暗号化ツールである JShaman を使用できます。上記の完全なソースコード内の JavaScript コードは、JShaman によって暗号化された後、次の形式になります。その使用にはいかなる影響もありません:

注: 左左側が元のコード、右側が暗号化されたコードです。

関連する推奨事項: [JavaScript ビデオチュートリアル ]

以上がJavaScriptを使った「キーウィザード」の実装方法を教えます！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はcsdnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。