検証コード生成メソッドのネイティブjs実装（完全なコード）
この記事の内容はネイティブjs実装検証コード（完全なコード）の生成方法についてです。必要な方は参考にしていただければ幸いです。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.block{
width: 150px;
height: 50px;
line-height: 50px;
border: 1px solid silver;
background:url("./img/bg1.png")no-repeat;
background-size:120% ;
text-align: center;
}
.btn{
color: green;
background-color: #d6ffe1;
cursor: pointer;
}
.yztxt{
width: 150px;
height: 20px;
border: 1px solid silver;
}
</style>
</head>
<body>
<p class="block"></p>
<span class="btn">看不清....</span><br>
<input class="yztxt" type="text"><br>
<button class="yz">验证</button>
<script>
var b=document.getElementsByClassName("block")[0];
var btn=document.getElementsByClassName("btn")[0];
var s=document.getElementsByClassName("txt");
var yztxt=document.getElementsByClassName("yztxt")[0];
var yz=document.getElementsByClassName("yz")[0];
var numrous=""; //定义一个空数组 用来存放生成的验证码
yz.onclick=function(){ //给验证按钮一个方法 判断验证码是否输入正确
if(yztxt.value.length<=0){
alert("请输入验证码：")
}
else if(yztxt.value== numrous.toLowerCase()){
alert("验证成功！");
}
else{
alert("验证失败！");
nrandom();//验证失败重新调随机产生验证码的函数
}
};
btn.onclick=function(){//当鼠标点击看不清时，切换验证码
nrandom();
};
nrandom();
function nrandom(){
numrous="";//在产生下一组验证码，清空上次验证码
b.innerHTML="";//清空文本框中验证码
for(var i=0;i<6;i++){
var num=Math.random()*100; //产生数字，大小写字母的总概率100
if(num<=50){
//数字产生的概率50%
var n=Math.floor(Math.random()*10);
numrous+=n;//将随机产生的数字放在字符串numrous
b.innerHTML+="<span class='txt'>"+n+"</span>";//将随机产生的数字在文本框中显示
}
else if(num>=50&&num<=80){
//产生小写字母的概率为30%
var n =String.fromCharCode(Math.floor(Math.random()*25+97));
numrous+=n;
b.innerHTML+="<span class='txt'>"+n+"</span>";
}
else{
//产生大写字母的概率20%
var n =String.fromCharCode(Math.floor(Math.random()*25+65));
numrous+=n;
b.innerHTML+="<span class='txt'>"+n+"</span>";
}
}
stylezi();//调用验证码字体样式
}
//下面分别设置了验证码的颜色，大小，粗细，距左的距离以及倾斜角度
function stylezi(){
for(var i=0;i< s.length;i++){
s[i].style.color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
s[i].style.fontSize=(Math.random()*20+15)+"px";
s[i].style.fontWeight=Math.random()*300+200;
s[i].style.left=(Math.random()*20-10)+"px";
s[i].style.transform="rotatez("+Math.random()*90-45+"deg)";
}
}
</script>
</body>
</html>関連する推奨事項:
js はどのようにして QR コードを生成しますか? jsでQRコードを生成する方法(コード)
以上が検証コード生成メソッドのネイティブjs実装（完全なコード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7681
15
1639
14
1393
52
1286
25
1229
29
Google Chrome で認証コードの画像が表示されない場合はどうすればよいですか? Chrome ブラウザで認証コードが表示されません。
Mar 13, 2024 pm 08:55 PM
Google Chrome で認証コードの画像が表示されない場合はどうすればよいですか? Google Chrome を使用して Web ページにログインするために確認コードが必要になる場合があります。一部のユーザーは、画像検証コードを使用すると、Google Chrome で画像のコンテンツが適切に表示されないことに気づきます。何をすべきでしょうか? Google Chromeの認証コードが表示されない場合の対処法を以下のエディターでご紹介しますので、皆様のお役に立てれば幸いです！方法の紹介： 1. ソフトウェアに入り、右上隅の「詳細」ボタンをクリックし、下のオプションリストで「設定」を選択してに入ります。 2. 新しいインターフェースに入ったら、左側の「プライバシー設定とセキュリティ」オプションをクリックします。 3. 次に、右側の「Web サイト設定」をクリックします。
仮想番号は確認コードを受け取ることができますか?
Jan 02, 2024 am 10:22 AM
仮想番号は認証コードを受け取ることができ、登録時に入力した携帯電話番号が規定を満たしており、携帯電話番号が正常に接続できる限り、SMS認証コードを受け取ることができます。ただし、仮想携帯電話番号の利用には注意が必要で、Webサイトによっては仮想携帯電話番号の登録に対応していない場合があるため、正規の仮想携帯電話番号サービスプロバイダーを選択する必要があります。
携帯電話で確認コードを受信できないのはなぜですか?
Aug 17, 2023 pm 02:49 PM
携帯電話で認証コードを受信できない場合は、ネットワークの問題、携帯電話の設定の問題、携帯電話会社の問題、個人設定の問題が原因です。詳細な紹介: 1. ネットワークの問題: 携帯電話が設置されているネットワーク環境が不安定または信号が弱いため、確認コードが時間内に配信されない可能性があります; 2. 携帯電話の設定の問題: テキスト メッセージ携帯電話の音声機能が誤ってオフになったり、認証コード送信番号がブラックリストに追加され、認証コードが正常に受信されなくなったりする場合 3. 携帯電話会社側の問題、携帯電話会社側の故障や故障の可能性があります。メンテナンスにより認証コードの配信が間に合わない場合など
PHP画像処理事例：画像の認証コード機能の実装方法
Aug 17, 2023 pm 12:09 PM
PHP画像処理事例：画像の認証コード機能の実装方法 インターネットの急速な発展に伴い、認証コードはWebサイトのセキュリティを守る重要な手段の1つとなっています。認証コードとは、画像認識技術を利用して本人かどうかを判断する認証方法です。この記事では、PHPを使用して画像の認証コード機能を実装する方法とコード例を紹介します。はじめに 認証コードはランダムな文字を含む画像であり、ユーザーは認証に合格するには画像内の文字を入力する必要があります。検証コードを実装する主なプロセスには、ランダムな文字の生成と、文字を画像に描画することが含まれます。
PHP 開発ガイド: 検証コードログインの実装
Jul 01, 2023 am 09:27 AM
インターネットの発展やスマートフォンの普及に伴い、認証コードによるログイン機能を採用するWebサイトやアプリが増えています。認証コードログインは、セキュリティを向上させ、悪意のある攻撃を防ぐために、正しい認証コードを入力することでユーザーの本人確認を行うログイン方法です。 PHP開発において、簡易認証コードログイン機能の実装は複雑ではなく、以下の手順で完了します。データベース テーブルの作成 まず、検証コード情報を保存するテーブルをデータベースに作成する必要があります。テーブル構造には次のフィールドを含めることができます: id: 自動インクリメント主キー phon
認証コードではロボットを止めることはできません! Google AI はぼやけたテキストを正確に識別できますが、GPT-4 は盲目のふりをして助けを求めます
Apr 12, 2023 am 09:46 AM
「最も迷惑なのは、Web サイトにログインするときにさまざまな種類の奇妙な (または変態的な) 確認コードが表示されることです。」 さて、良いニュースと悪いニュースがあります。良いニュースは、AI がこれを行ってくれるということです。私の言うことが信じられないかもしれませんが、認識の困難さが増大する 3 つの実際のケースを以下に示します。 そして、これらは「Pix2Struct」と呼ばれるモデルによって得られる答えです。 これらはすべて正確で、一字一句正確ですか?一部のネチズンは「確かに、精度は私よりも優れています。」と嘆いています。では、それをブラウザのプラグインにすることはできるのでしょうか? ?はい、一部の人は次のように言いました。これらのケースは比較的単純ですが、微調整するだけで、その効果がどれほど強力になるかは想像できません。悪い知らせは、検証コードでは間もなくロボットを停止できなくなるということです。 （危ない危ない…）どうやってやるの？ Pix2St
PHPを使用して確認コードイメージを作成するにはどうすればよいですか?
Sep 13, 2023 am 11:40 AM
PHPを使用して確認コードイメージを作成するにはどうすればよいですか? CAPTCHA は、ユーザーが機械ではなく人間であるかどうかを確認するために一般的に使用される方法です。 Web サイトでは、ログイン、登録、コメントなどの操作を完了するために、画像上に表示されるランダムな文字や数字を入力する必要がある認証コードの画像をよく見かけます。この記事では、PHP を使用して検証コード イメージを作成する方法と、具体的なコード例を紹介します。 1. PHPGD ライブラリ 検証コードイメージを作成するには、PHP の GD ライブラリを使用する必要があります。 GD ライブラリは、画像を処理するための拡張機能です。
OCR テクノロジーを使用してさまざまな検証コードを自動的に識別し、ツールはオープンソース化されています
May 25, 2023 am 10:07 AM
今日は OCR アプリケーションを紹介します。ddddocr は検証コードを自動的に認識します。最初の4つのdは「daidai弟」の最初のピンインです。 [/笑い]。プロジェクトのアドレス: https://github.com/sml2h3/ddddocr。使用する場合は、pip コマンドを使用して直接インストールします (pipinstalldddddocr のみ)。 OCRの中核技術には、画像内の文字を検出する対象検出モデルと、画像内の文字をテキストに変換する文字認識モデルの2つの側面があります。最初のタイプの検証コードは最も単純で、複雑な背景画像がないため、ターゲット検出モデルを省略して、画像をテキスト認識モデルに直接送信できます。識別コードは次のとおりです。
