整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
場景
現(xiàn)在很多網(wǎng)站，比如淘寶，京東等都改用使用極驗拖動驗證碼實現(xiàn)登錄，這種方式比傳統(tǒng)的驗證碼方式有更好的體驗，減少用戶輸入的錯誤，也同樣能起到防盜刷的功能。現(xiàn)在很多極驗都是第三方的，也很多都是收費的。今天在這里給大家分享自己用原生php實現(xiàn)的一個極驗的代碼。用原生php的好處就是以后你要嵌套到什么框架，可以直接用核心代碼，改一改就好了。
極驗拖動驗證實現(xiàn)演示：http://blog.startphp.cn/jiyan/
極驗拖動動畫圖
代碼文件截圖
代碼實現(xiàn)
html文件
php文件：check.php
主要核心文件：TnCode.class.php
文章來自于【源碼下載地址】
鏈接：http://blog.startphp.cn/thread-165-1-1.html
簡介】
拖放是一種常見的特性, 屬于html5標準的一部分, 即抓取對象以后拖動到另一個位置, 在html5中, 任何元素都可被設置拖放。首先, 我們要給需要拖動的HTML元素啟用拖動功能, 設置屬性draggable="true",
<div draggable="true"></div>
提示：a標簽和img標簽默認是啟用該屬性的, 可不需要設置draggable屬性。
draggable有三個值, 如下所示：
draggable=true(元素可以被拖動)
draggable=false(元素不能被拖動)
draggable=auto(瀏覽器可以自主決定某個元素是否可以被拖動)
【用法】
當我們用鼠標拖拽目標元素過程中會觸發(fā)的事件：
ondragstart：用戶按下鼠標開始拖動時觸發(fā)
ondrag：用戶正在拖動時反復觸發(fā)
ondragend：用戶結束拖動后觸發(fā)
<img id="imgs" ondragstart="startFun()" ondrag="ondragFun()" ondragend="ondragendFun()" src="../img/a.png"/>
當拖動元素進入目標容器內(nèi)觸發(fā)的事件：
ondragenter：鼠標拖動對象進入釋放區(qū)時觸發(fā)
ondragover：被拖動物體進入目標容器內(nèi)移動時反復觸發(fā)
ondragleave：拖動對象在釋放區(qū)沒有釋放就離開容器時觸發(fā)
ondrop：被拖動物體在目標容器內(nèi)釋放時觸發(fā)
<div id="container" ondragenter="ondragenterFun(event)" ondragover="ondragoverFun(event)" ondragleave="ondragleaveFun()" ondrop="drop()"></div>
ondragenter和ondragover事件的默認行為是拒絕接受任何被拖放的項目, 所以我們必須要做的最重要的事情就是防止這種默認行為的發(fā)生。
因此, 我們只需要在這兩個事件調(diào)用的函數(shù)中傳入event對象, 使用event.preventDefault()就可取消這種默認行為；舉個例子, 在drop事件時, Firefox瀏覽器會關閉網(wǎng)頁, 轉而顯示被拖動圖片img元素src所引用的地址。
取消元素默認行為：
function ondragenterFun(e){
e.preventDefault();
}
function ondragoverFun(e){
e.preventDefault();
}
在event對象中, 我們會使用dataTransfer屬性來獲取DataTransfer對象, 在DataTransfer對象中有我們操作數(shù)據(jù)的屬性和方法, 具體如下：
datatransfer：轉移釋放元素的數(shù)據(jù)到釋放區(qū), 返回Datatransfer對象
event.dataTransfer //返回DataTransfer對象
DataTransfer對象的屬性：
files：處理從操作系統(tǒng)拖動并釋放到釋放區(qū)的文件；
types：返回一個字符串數(shù)組, 該對象包含了dataTransfer對象中數(shù)據(jù)的所有類型；
items：返回DataTransferItems對象, 該對象代表了拖動數(shù)據(jù)；
dropEffect：設置拖放目標允許發(fā)生的拖放行為, 如果此處設置的拖放行為不在effectAllowed屬性設置的可拖放行為內(nèi), 拖放操作將會失敗。該屬性值只允許為"null"、"copy"、"link"或"move"；
effectAllowed：設置拖動元素允許發(fā)生的拖動行為, 該屬性值可為"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"或"uninitialized"；
DataTransfer對象的方法：
setData( format , data )：將指定格式的數(shù)據(jù)賦值給dataTransfer對象，參數(shù)format定義數(shù)據(jù)的格式也就是數(shù)據(jù)的類型，data為待賦值的數(shù)據(jù)。
getData( format )：從dataTransfer對象中獲取指定格式的數(shù)據(jù)，format代表數(shù)據(jù)格式，data為數(shù)據(jù)。
clearData( [format] )：從dataTransfer對象中刪除指定格式的數(shù)據(jù)，參數(shù)可選，若不給參數(shù)，將刪除對象中所有的數(shù)據(jù)。
setDragImage(el, x, y)：設置拖放操作的圖標，其中el代表自定義圖標，x代表圖標與鼠標在水平方向上的距離，y代表圖標與鼠標在垂直方向上的距離。
了解了H5拖動使用的api以后我們接下來看一個綜合的案例, 功能如下：
1)、實現(xiàn)圖片拖動功能；
2)、實現(xiàn)圖片復制功能；
3)、過濾不能拖動的元素；
4)、實現(xiàn)拖動本地圖片到瀏覽器指定位置；
公共css部分：
<style>
#dropIn{
border:1px solid #AAAAAA;
height:100px;
margin-bottom: 10px;
padding: 10px;
}
#dropIn>img{
margin-right: 10px;
border:2px solid deepskyblue;
}
img{
width:100px;
border-radius: 10px;
border:2px solid red;
}
</style>
html部分：
<body>
<div id="dropIn"></div> <!--釋放區(qū)-->
<img id="drop1" src="img/a.png" alt="" />
<!--拖動的圖片元素-->
</body>
js部分：
<script type="text/javascript">
var darggID;
function getId(el){
return document.getElementById(el)
}
var dropId1=getId("drop1");
var dropInId=getId("dropIn");
//取消事件默認行為
dropInId.ondragenter=cancelDefault;
dropInId.ondragover=cancelDefault; //綁定拖動元素釋放時觸發(fā)的事件
dropInId.ondrop=drop; //綁定
dropId1.ondragstart=startFun;
function cancelDefault(ev){ //取消默認行為
ev.preventDefault();
}
function startFun(ev){
darggID=ev.target.id;
//獲取被拖動元素的id
//從源對象上的事件處理中保存數(shù)據(jù)，數(shù)據(jù)類型為"Text"
ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
ev.preventDefault();
// 從目標對象上的事件處理中讀取"Text"類型數(shù)據(jù)
var data=ev.dataTransfer.getData("Text");
// 插入到目標對象中
ev.target.appendChild(document.getElementById(data));
}
</script>接下來我們添加兩張圖, "drop2"是實現(xiàn)復制的圖片, "drop3"是既不能復制也不能拖動的圖片；
<img id="drop2" src="img/b.png" alt="" /><img id="drop3" src="img/c.png" alt="" />
添加js代碼：
//獲取頁面元素
var dropId2=getId("drop2");
var dropId3=getId("drop3");
//綁定事件
dropId2.ondragstart=startFun;dropId3.ondragstart=startFun;
//修改drop函數(shù)為
function drop(ev){
ev.preventDefault();
// 從目標對象上的事件處理中讀取"Text"類型數(shù)據(jù)
var data=ev.dataTransfer.getData("Text");
if(data=='drop1'){
//移動
ev.target.appendChild(document.getElementById(data));
}
if(data=='drop2'){//復制
var nreEl=document.getElementById(darggID).cloneNode(false);
getId("dropIn").appendChild(nreEl);
}
if(data=='drop3'){//過濾drop3，drop3不做任何操作
alert('過濾drop3')
}
}
接下來我們實現(xiàn)拖動本地圖片到瀏覽器, 我們就將圖片拖動到id為"dropIn"的這個div中；添加js:
/*document 監(jiān)聽drop 并阻止瀏覽器打開客戶端的圖片*/
document.ondragover=function (e) {
//只有在ondragover中阻止默認行為
e.preventDefault();
};
document.ondrop=function (e) {
//阻止 document.ondrop的默認行為
e.preventDefault();
};
//dropIn是div的id
dropIn.ondrop=function (e) {
var list=e.dataTransfer.files;
for (var i=0; i < list.length; i++) {
var f=list[i];
reader(f);
}
};
function reader(f) {
var reader=new FileReader();
//讀取數(shù)據(jù)
reader.readAsDataURL(f);
reader.onload=function () {
var img=new Image();
img.src=reader.result;
dropIn.appendChild(img);
}
}
【瀏覽器支持】
目前只有Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari5支持拖放，在 Safari5.1.2 中不支持拖放。
最后再和大家分享一個技巧, 這種拖動行為還能跨瀏覽器工作, 這里說的跨瀏覽器不是瀏覽器之間的跨窗口, 而是可以從Chrome瀏覽器拖動到Firefox瀏覽器, 因為拖放功能的支持是集成在操作系統(tǒng)里面的, 有著相同的特性。
家好，我是 Echa。
今天來分享 50 個超實用的 Chrome 瀏覽器擴展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個JSON數(shù)據(jù)查看器，主要用來格式化JSON數(shù)據(jù)：
Library Sniffer 是一款給開發(fā)者使用的工具，能夠探測當前網(wǎng)頁所使用的類庫、框架和服務器環(huán)境，為開發(fā)者提供了方便。
Wappalyzer 擴展可以用來識別網(wǎng)站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫等。
WhatRuns 擴展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術。
使用PerfectPixel插件可以將設計圖加載至網(wǎng)頁中，與已成型的網(wǎng)頁進行重疊對比，以幫助開發(fā)和設計人員規(guī)范網(wǎng)頁像素精度。這是一款可以優(yōu)化前端頁面顯示的Chrome插件。
可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數(shù)據(jù)和數(shù)量，包括：應用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫、本地存儲、插件數(shù)據(jù)、密碼和 WebSQL。
VisBug 是一個使用 JavaScript 構建的開源網(wǎng)頁設計調(diào)試工具，它可以讓用戶使用點擊式和拖放式界面來查看網(wǎng)站的元素。
Debug CSS 是一個幫助調(diào)試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發(fā)人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網(wǎng)頁上的元素的 CSS 屬性。
EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發(fā)者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應用程序的插件，可以使得開發(fā)人員大大提高調(diào)試效率。支持用戶對DOM結構數(shù)據(jù)結構進行解析和調(diào)試功能。
Augury 可以幫助開發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應用程序。
Firebug Lite是火狐瀏覽器中著名的開發(fā)者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調(diào)試網(wǎng)頁內(nèi)容，其包含了基本的HTML、CSS以及Javascript的調(diào)試功能，用于幫助網(wǎng)頁前端開發(fā)工程師快速地調(diào)試網(wǎng)頁，以便及時地找到網(wǎng)頁中的BUG并及時修復。
HTML Validator 在 Chrome 的開發(fā)者工具中添加了 HTML Validator。HTML 頁面的錯誤數(shù)通過瀏覽器狀態(tài)欄中的圖標顯示，詳細信息可以在瀏覽器的開發(fā)者工具中查看。
Web Developer 擴展為帶有各種 Web 開發(fā)工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發(fā)、修改HTTP請求和結果、插入腳本等功能。
Window Resizer 主要用來調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發(fā)人員在開發(fā)響應式網(wǎng)站/應用程序時測試多個屏幕。
此插件允許直接從瀏覽器發(fā)送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.
ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網(wǎng)頁等中選擇顏色值。
CSS Peeper 用于檢查和復制元素樣式的優(yōu)秀工具，使用 CSSPeeper 可以將鼠標懸停在網(wǎng)頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對網(wǎng)頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。
Site Palette 用于生成調(diào)色板。設計師和前端開發(fā)人員必備的工具。可以通過這款插件輕松獲取網(wǎng)站的配色方案。
ColorZilla 是一款功能強大地提取網(wǎng)頁色彩的工具；也是個快速的對顏色進行調(diào)節(jié)的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產(chǎn)css顏色的代碼等。
當我們想查看網(wǎng)頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網(wǎng)頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：
Fonts Ninja 可以從任何網(wǎng)站識別字體、添加書簽、試用并購買它們。
使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現(xiàn)快速訪問并最大限度地減少切換瀏覽器所花費的時間。
Toby 是一款 Chrome 新標簽頁工具，能夠將未讀的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。
該擴展提供了每日熱門開發(fā)者新聞，不需要再浪費時間搜索高質(zhì)量的文章了。
Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。
The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內(nèi)存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內(nèi)存和 CPU。
Session Buddy是一個可以幫助用戶查看、新增、編輯當前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當前的狀態(tài)以便在關閉Chrome或關閉計算機后恢復，從而達到節(jié)省內(nèi)存的作用。
Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。
ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發(fā)的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網(wǎng)站開發(fā)過程中查找并修復更多可訪問性問題。
OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。
此擴展可幫助 Web 開發(fā)人員分析網(wǎng)頁是否違反最佳實踐。
Check My Links 是一個鏈接檢查器，它可以抓取網(wǎng)頁并查找損壞的鏈接。
Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創(chuàng)建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優(yōu)化所有設備上的網(wǎng)頁、提高網(wǎng)頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網(wǎng)頁的meta信息并得到SEO評估的谷歌瀏覽器插件。
Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網(wǎng)站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統(tǒng)計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效
Loom 可以用來快速錄制視頻，并且能夠將錄制的視頻上傳到指定的網(wǎng)頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。
GoFullPage 是一款全屏截圖插件（整個網(wǎng)頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸?shù)狡聊豢煺盏男聵撕烅撝校梢栽谄渲袑⑵湎螺d為圖像或PDF，甚至只需拖動即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。
svg-grabber 是一個快速預覽并從網(wǎng)站獲取所有 svg 的工具。可以用來預覽、下載和復制網(wǎng)站中所有 SVG 圖標和插圖的代碼。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
