利用canvas實現滑動驗證功能

2021-09-29 07:16:55 字數 1756 閱讀 5700

html

滑動驗證

css

* 

body

#canva

#block

.versliderblock

.bar

#bar-mask

js

//繪製滑塊

//新增移動事件

var block_slider = document.queryselector("#block");

var slider = document.queryselector(".versliderblock");

var slider_mark = document.queryselector("#bar-mask");

//用於判斷當前是否是在按住滑塊的情況下

var yd = false

var movex = 0

var downx = 0

//滑鼠按下

slider.onmousedown = function(e)

//滑鼠移動事件

function hadlemousemove(e)

if (movex > -2) }}

//滑鼠抬起事件

function hadlemouseup(e) , 1000)

} else , 1000)

}yd = false}}

//滑鼠在按住滑塊下移動

slider.onmousemove = function(e)

//滑鼠在滑塊下抬起

slider.onmouseup = function(e)

//設定全域性的移動事件,當滑鼠按下滑塊後,移動過程中滑鼠可能會移出滑塊,這是滑塊也會監聽滑鼠的移動進行相應的移動

document.addeventlistener('mousemove', function(e) )

document.addeventlistener('mouseup', function(e) )

function rest()

效果如圖:

滑動驗證實現

滑鼠按下 移動 鬆開的之後,通過滑鼠鬆開之後與初始位置的偏移量加上滑動塊的寬度來計算滑動進度的div的寬度,在內層的滑動塊始終向右浮動就行了。滑鼠移動過程中,越界問題處理 移動滑鼠 document.onmousemove function e 滑動過程中,向右越界處理 if objx slideb...

利用canvas破解簡單驗證碼

敝校的教務管理系統 貌似不止我們學校用呢 一到選課時間伺服器各種崩不解釋,有時為了選個課就要反覆輸入驗證碼,一想到千千萬萬的大學生把時間浪費在輸入驗證碼上面,我就覺得,我有義務拯救一下人類。搜了一下,看到這篇文章,3年前的文章了。我參考了前半部分,借助tampermonkey這個外掛程式,大概實現了...

利用 canvas 實現簽名效果

利用 canvas 實現簽名效果 使用外掛程式 jsignature github 如果再h5 中使用需要載入 flashcanvas.js 方法名稱 使用方法 說明clear jsignature clear 清空並重置畫布 getdata jsignature getdata base30 將畫...