原生js實現拖動滑塊驗證

阿新 • • 發佈：2017-05-07

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip

拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。

下面實現的是某寶的拖動滑塊驗證：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .drag{position: relative;width: 300px;height: 34px;background-color: #e8e8e8;line-height 
: 34px;}
        .bg{position: absolute;width: 40px;height: 100%;background-color: #7ac23c;}
        .text{position: absolute;width: 100%;margin: 0;text-align: center;}
        .btn{position: absolute;width: 40px;height: 32px;background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==) center no-repeat;border 
: 1px solid #ccc;cursor: pointer;}
    </style>
</head>
<body>
    <div class="drag">
        <div class="bg"></div>
        <p class="text">拖動滑塊驗證</p>
        <div class="btn"></div>
    </div>

    <script>
        var $ = function(selector){
             
return document.querySelector(selector);
        },
        box = $(‘.drag‘),//容器
        bg = $(‘.bg‘),//綠色背景
        text = $(‘.text‘),//文字
        btn = $(‘.btn‘),//拖動按鈕
        done = false;//是否通過驗證

        btn.onmousedown = function(e){
            var e = e || window.event;
            var posX = e.clientX - this.offsetLeft;

            btn.onmousemove = function(e){
                var e = e || event;

                var x = e.clientX - posX;

                this.style.left = x + ‘px‘;
                bg.style.width = this.offsetLeft + ‘px‘;

                // 通過驗證
                if(x >= box.offsetWidth - btn.offsetWidth){
                    done = true;
                    btn.onmousedown = null;
                    btn.onmousemove = null;
                    text.innerHTML = ‘通過驗證‘;
                }
            };

            document.onmouseup = function(){
                btn.onmousemove = null;
                btn.onmouseup = null;

                if(done)return;
                btn.style.left = 0;
                bg.style.width = 0;
            }
        };

        text.onmousedown = function(){
            return false;
        }
    </script>
</body>
</html>

由於是原生js實現的，因此沒有加上動畫效果，不然代碼量太大。

代碼簡單，直接看下結構就明了了。

原生js實現拖動滑塊驗證

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

JavaScript實現拖動滑塊驗證

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

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

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

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

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

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

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

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

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

破碼之拖動滑塊

元素打開網頁 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

原生js實現拖拽事件

ons window mov .get end ret htm 坐標 document <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Android 自定義View(繼承原生元件)實現拖動移位效果

自定義View實現拖拽移位效果通過繼承GridLayout實現的拖拽移位效果首先建立Class類繼承GridLayout並重寫前三個構造方法 public class MyGridlayout extends GridLayout implement

Android 自定義View(繼承原生元件)實現拖動移位效果

自定義View實現拖拽移位效果通過繼承GridLayout實現的拖拽移位效果首先建立Class類繼承GridLayout並重寫前三個構造方法 public class MyGridlayout extends GridLayout implements

JS實現拖動div改變大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

JS實現拖動圖片

很實用的技術，可以多看看 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &

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

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

原生js實現一個側滑刪除取消元件（item slide）

元件，本質上是解決某個問題封裝的類，在此記錄原生js實現側滑刪除先上效果圖實現思路 1. 確定渲染的資料結構 2. 思考劃分佈局，總的有兩個主要的模組：內容區域和按鈕區域　　2.1 內容區域保持寬度永遠佔滿裝置的寬度　　2.2 內容區域和按鈕區域

利用原生js實現自定義滾動條（可點選到達，拖動到達）

1.HTML檔案 div1是滾動條，div2是滾動小球，div3是文字區域容器，div4是文字區域。 <div id="div"> <div id="div1"> <div id="div2"> </div> </div&

原生js實現table列寬的滑鼠拖動事件

var tTD; //用來儲存當前更改寬度的Table Cell,避免快速移動滑鼠的問題 var table = document.getElementById("tableId"); //table的id名稱 for (j = 0; j < table.rows[0].cells.le

原生 JS 實現手機驗證碼倒計時

可以使用 pointer-events 來阻止元素成為滑鼠事件的 target。html5 新增操作元素 class 類名的方式 classList。 classList 方法 add(value)：在元素中新增一個或多個類名。如果值已經存在，就不添加了。 contains(value): 返回

關於selenium實現滑塊驗證

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

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

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

原生js實現拖動滑塊驗證

相關推薦