2. 程式人生 > >JavaScript實現拖動滑塊驗證

JavaScript實現拖動滑塊驗證

阿新 • • 發佈：2019-02-05
//一、定義一個獲取DOM元素的方法 var $ = function(selector){ return document.querySelector(selector); }, box = $(".drag"),//容器 bg = $(".bg"),//背景 text = $(".text"),//文字 btn = $(".btn"),//滑塊 success = false,//是否通過驗證的標誌 distance = box.offsetWidth - btn.offsetWidth;//滑動成功的寬度（距離）
//二、給滑塊註冊滑鼠按下事件 btn.onmousedown = function(e){ //1.滑鼠按下之前必須清除掉後面設定的過渡屬性 btn.style.transition = ""; bg.style.transition =""; //說明：clientX 事件屬性會返回當事件被觸發時，滑鼠指標向對於瀏覽器頁面(或客戶區)的水平座標。 //2.當滑塊位於初始位置時，得到滑鼠按下時的水平位置 var e = e || window.event; var
downX = e.clientX; //三、給文件註冊滑鼠移動事件 document.onmousemove = function(e){ var e = e || window.event; //1.獲取滑鼠移動後的水平位置 var moveX = e.clientX; //2.得到滑鼠水平位置的偏移量（滑鼠移動時的位置 - 滑鼠按下時的位置） var offsetX = moveX - downX; //3.在這裡判斷一下：滑鼠水平移動的距離 與 滑動成功的距離 之間的關係
if( offsetX > distance){ offsetX = distance;//如果滑過了終點，就將它停留在終點位置 }else if( offsetX < 0){ offsetX = 0;//如果滑到了起點的左側，就將它重置為起點位置 } //4.根據滑鼠移動的距離來動態設定滑塊的偏移量和背景顏色的寬度 btn.style.left = offsetX + "px"; bg.style.width = offsetX + "px"; //如果滑鼠的水平移動距離 = 滑動成功的寬度 if( offsetX == distance){ //1.設定滑動成功後的樣式 text.innerHTML = "驗證通過"; text.style.color = "#fff"; btn.innerHTML = "&radic;"; btn.style.color = "green"; bg.style.backgroundColor = "lightgreen"; //2.設定滑動成功後的狀態 success = true; //成功後，清除掉滑鼠按下事件和移動事件（因為移動時並不會涉及到滑鼠鬆開事件） btn.onmousedown = null; document.onmousemove = null; //3.成功解鎖後的回撥函式 setTimeout(function(){ alert('解鎖成功！'); },100); } } //四、給文件註冊滑鼠鬆開事件 document.onmouseup = function(e){ //如果滑鼠鬆開時，滑到了終點，則驗證通過 if(success){ return; }else{ //反之，則將滑塊復位（設定了1s的屬性過渡效果） btn.style.left = 0; bg.style.width = 0; btn.style.transition = "left 1s ease"; bg.style.transition = "width 1s ease"; } //只要滑鼠鬆開了，說明此時不需要拖動滑塊了，那麼就清除滑鼠移動和鬆開事件。 document.onmousemove = null; document.onmouseup = null; } }

相關推薦

JavaScript實現拖動滑塊驗證

//一、定義一個獲取DOM元素的方法 var $ = function(selector){ return document.querySelector(selector); }, box =

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。 下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

個人筆記005--原生JS實現簡單的拖動滑塊驗證

早上起來後瀏覽網站時看到別人的拖動滑塊驗證，就想著做一個demo，等到有時間把這個優化到到現在的專案（用的是圖片驗證碼）。以下程式碼就是百度之後再修改一下的： <!DOCTYPE html> <html> <head> <meta charset

自定義的可拖動滑塊驗證碼的實現方式（SlideView）

概述： 最近專案中需要在密碼輸入一定次數後盡心拖動滑塊進行驗證，防止惡意程式程式碼一直測試登入，用了GitHub的一個開源庫SlideView，但是直接依賴原始碼是改不了樣式的，下邊給出自定

拼圖式拖動滑塊的驗證——使用selenium+python實現

寫京東登入的自動化測試用例的時候遇到了這樣一個問題 當你不能成功登入多次、就連正確賬戶密碼登入（偶發）的時候，都會出現驗證環節（PS.當然也有死活不出現的時候，比如寫文的今天9月30），妥妥阻擋了自動化測試的腳步。 於是我們可以怎麼使用selenium+python來完成

hammer.js---拖動滑塊實現驗證的小demo

1.先看一下效果圖  移動端實現，簡單方便，只要稍作修改比如用Math.random()函式生成一個隨機的位置，然後判斷位置差即可。 快去試一試這個很fashion的庫吧。 2.看一下HTML結構

破碼之拖動滑塊

元素 打開網頁 text con fin odin time click class #破碼之拖動滑塊 # encoding:utf-8 import selenium import time from selenium import webdriver from sel

html5拖動滑塊

滑塊 拖動 -1 lib ges div src spa left html5中input有增加type=range。這為拖動滑塊提供了很大的便利。下面是他的屬性： <!DOCTYPE html> <html lang="en"> <hea

自己動手搞一個拖動滑塊，點選水波紋效果

window.onload = function() { var lineDiv = document.getElementById('lineDiv'); //長線條 var minDiv = document.getElementById('minDiv'); //小方塊

關於selenium實現滑塊驗證

關於selenium實現滑塊驗證 python2.7+selenium2實現淘寶滑塊自動認證參考連結：https://blog.csdn.net/ldg513783697/article/details/51583641 selenium、python模擬登陸淘寶 參考連結：https://blog.cs

PHP結合阿里雲實現網站滑塊驗證碼的具體例項

目錄 滑塊驗證碼樣例 關於滑塊驗證碼 開發準備 系統編碼 附錄 滑塊驗證碼樣例 關於滑塊驗證碼 滑塊驗證碼主要的作用是方便使用者進行快捷驗證操作，但是同時要合理的辨別到底是機器操作還是

PHP結合阿里雲實現網站滑塊驗證碼的具體例項（精華

滑塊驗證碼樣例 關於滑塊驗證碼 滑塊驗證碼主要的作用是方便使用者進行快捷驗證操作，但是同時要合理的辨別到底是機器操作還是人工操作，這一點顯得難度比較大，是屬於人機識別的智慧開發範疇，所以相對於之前的傳統4位或者6點陣圖片驗證碼來說，開發起來顯得更加困難，所以

RecyclerView借助ItemTouchHelper實現拖動和滑動刪除功能

enable all istview aslist mar -- main erl pub RecyclerView是官方推薦代替ListView的空間，怎樣實現RecyclerView列表元素的拖動呢？ 官方提供了ItemTouchHelper類使用過程例如以下

JavaScript實現拖拽預覽，AJAX小文件上傳

strong 名稱 獲取文件 是否 set 可能 lis idt scrip 本地上傳，提前預覽（圖片。視頻） 1.html中div標簽預覽顯示。button標簽觸發上傳事件。 <div id="drop_area" style=

vue實現拖動div元素

() left pan down htm 元素 null col color html： <div id="app1"> <div v-drag class="drag"></div> <div v-drag

用javascript實現拖拽帶來的種種問題(1)

round head 出發 mark mov 點擊事件 pan func 屬性 第一篇，先水一下，用javascript實現簡單的拖拽。主要還是想通過demo的形式總結一下各種event對象屬性。 首先先看一下，這個demo最終實現的效果： 主要涉及的屬性有： Mouse

jquery 實現拖動文件上傳加進度條

進行 con pos rip file round 默認 dex toupper 通過對文件的拖動實現文件的上傳，主要用到的是HTML5的ondrop事件，上傳內容通道FormData傳輸： //進度條 <div class="parent-dlg" >

極驗滑塊驗證的使用

session tex print val int 截圖 gist 相對 search # 爬取河南企業信用信息公示系統為案例 # 案例網址 http://gsxt.haaic.gov.cn/index.jspx 下面這個選項一定要勾選 極驗打碼要的參數

vue+mousemove實現拖動，鼠標移動過快拖動就失效

拖動 win text cli prev point element lis 問題 今天用vue+原生js的mousemove事件，寫了個拖動，發現只能慢慢拖動才行，鼠標只要移動快了，就失效，不能拖動了； 搞了半天在，總算解決了，但是問題的深層原理還沒搞清楚，知道的大俠可以

WPF 實現拖動工具箱效果

get adding n) rgs 拖拽 value src 點擊 stroke 原文:WPF 實現拖動工具箱效果 1.效果 點擊左邊的矩形拖動到右邊canvas面板，右邊面板添加矩形 2.布局 左邊是個StockPanel，上面有個矩形，右