欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證

 更新時(shí)間:2022年03月07日 09:30:59   作者:Cloud%  
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

使用這種驗(yàn)證方法的目的:證明當(dāng)前的用戶不是機(jī)器人~防止惡意操作。

實(shí)現(xiàn)思路:

1、獲取silde滑塊(獲取元素)

2、為元素注冊(cè)事件———鼠標(biāo)點(diǎn)擊事件(onmousedown)鼠標(biāo)點(diǎn)擊之后獲得當(dāng)前鼠標(biāo)的X坐標(biāo)。

3、如何獲取到鼠標(biāo)的x坐標(biāo)——使用clientX事件(當(dāng)事件被觸發(fā)時(shí),鼠標(biāo)指針的水平坐標(biāo))。

4、鼠標(biāo)移動(dòng)事件發(fā)生后根據(jù)從最開(kāi)始點(diǎn)擊的X值到移動(dòng)后的X值之差,作為滑塊移動(dòng)的差值———— 鼠標(biāo)移動(dòng)事件 (onmousemove);

5、獲取鼠標(biāo)移動(dòng)之后的X坐標(biāo)

6、獲得初始X坐標(biāo)和移動(dòng)后X值

7、該變 left的值

8、綠色背景跟著小滑塊走

9、鼠標(biāo)抬起清除鼠標(biāo)移動(dòng)事件。

注意:哪怕鼠標(biāo)移動(dòng)的時(shí)候超出了最外面的方塊區(qū)域,滑塊也要可以移動(dòng)。所以不能只在滑塊上設(shè)置移動(dòng)事件,需要在文檔document上設(shè)置移動(dòng)事件。

主要用到的事件:

1、鼠標(biāo)點(diǎn)擊事件onmousedown;

2、鼠標(biāo)移動(dòng)事件onmousemove;

3、獲取鼠標(biāo)指針X坐標(biāo) clientX;

4、鼠標(biāo)按鍵被松開(kāi) onmouseup;(有點(diǎn)類似與 click點(diǎn)擊)

注意:

1、作用域——— 一個(gè)函數(shù)擁有一個(gè)作用域 (局部作用域)

2、怎樣才能實(shí)現(xiàn)鼠標(biāo)移動(dòng)的時(shí)候使滑塊也移動(dòng):改變滑塊的left值。

3、想要實(shí)現(xiàn)滑塊跟隨鼠標(biāo)移動(dòng),就要獲得鼠標(biāo)移動(dòng)的x坐標(biāo)。

實(shí)現(xiàn)代碼:

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <style>
? ? *{
? ? ? ? padding:0;
? ? ? ? margin:0;
? ? }
? ? body{
? ? ? ? user-select:none;
? ? ? ? /*禁止用戶選中*/
? ? }
? ? .wrap{
? ? ? ? width:300px;
? ? ? ? height: 40px;
? ? ? ? background-color:#e8e8e8;
? ? ? ? margin:100px auto;
? ? ? ? text-align: center;
? ? ? ? line-height: 40px;
? ? ? ? /*border-radius: 7px;*/
? ? ? ? position:relative;
? ? }
? ? .rect{
? ? ? ? position:relative;
? ? ? ? width:300px;
? ? ? ? height:100%;
? ? }
? ? .rec{
? ? ? ? position:absolute;
? ? ? ? top:0;
? ? ? ? left:0;
? ? ? ? width:0;
? ? ? ? height:100%;
? ? ? ? background: #00b894;
? ? }
? ? .silde{
? ? ? ? position:absolute;
? ? ? ? top:0;
? ? ? ? left:0;
? ? ? ? z-index: 11;
? ? ? ? /*在這里面,當(dāng)設(shè)置長(zhǎng)寬為40px時(shí)在加上邊框1px就會(huì)超出 40px。
? ? ? ? 可以使用怪異盒模型,怪異盒模型會(huì)使盒子的寬高包括邊框,操持40px;*/
? ? ? ? box-sizing:border-box;
? ? ? ? width:40px;
? ? ? ? height:40px;
? ? ? ? background: #fff;
? ? ? ? border:1px solid #ccc;
? ? }

? ? </style>
</head>
<body>
? ? <div class='wrap'>
? ? ? ? <div class='rec'>
? ? ? ? ? ? <div class='rect'>滑塊拖拽驗(yàn)證
? ? ? ? ? ? ? ? <div class='silde'><img src="hkkkk.png" alt=""></div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? //獲取事件
? ? ? ? var silde = document.querySelector('.silde');
? ? ? ? var rec = document.querySelector('.rec');
? ? ? ? var rect= document.querySelector('.rect');
? ? ? ? var img= document.querySelector('img');
? ? ? ? var minusX; ?//保存變化的 X坐標(biāo)(全局變量)

? ? ? ? //注冊(cè)事件
? ? ? ? silde.onmousedown = function(e) { ? ?//鼠標(biāo)點(diǎn)擊事件,點(diǎn)擊之后執(zhí)行函數(shù),獲得點(diǎn)擊位置的X坐標(biāo)
? ? ? ? ? ? var initX = e.clientX; ? ?//保存初始按下位置的 X坐標(biāo);
? ? ? ? ? ? console.log(11,e); ? ?//用以測(cè)試
? ? ? ? ? ? document.onmousemove = function(e) { ? ? ? ?//鼠標(biāo)移動(dòng)事件
? ? ? ? ? ? ? ? var moveX = e.clientX;
? ? ? ? ? ? ? ? // var minusX = moveX - initX; ? ?//變化的坐標(biāo)(要注意作用域的問(wèn)題,在這里面定義變量,在這個(gè)函數(shù)之外的函數(shù)就沒(méi)法使用,所以要將minusX變成全局變量)
? ? ? ? ? ? ? ? minusX = moveX - initX;
? ? ? ? ? ? ? ? ?//這里注意一下,獲得的minusX只是一個(gè)差值,沒(méi)有單位想讓 滑塊的位置改變還需要加上 單位px
? ? ? ? ? ? ? ? ?//這個(gè)時(shí)候滑塊會(huì)跟隨鼠標(biāo)整個(gè)頁(yè)面一行的跑,價(jià)格條件判段,限制 滑塊移動(dòng)的區(qū)域不可以超過(guò)邊框,保持left<=0。
? ? ? ? ? ? ? ? ?if(minusX < 0) {
? ? ? ? ? ? ? ? ? ? ?// silde.style.left = '0';
? ? ? ? ? ? ? ? ? ? ?minusX = 0;
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?if(minusX > 260) { //判斷最大值
? ? ? ? ? ? ? ? ? ? ?// silde.style.left = '251';
? ? ? ? ? ? ? ? ? ? ?// 這里面的距離用邊框長(zhǎng)度減去 滑塊的長(zhǎng)度 300-49
? ? ? ? ? ? ? ? ? ? ?minusX = 260;
? ? ? ? ? ? ? ? ? ? ?console.log('我到頭了');
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?silde.style.left = minusX + 'px';
? ? ? ? ? ? ? ? ?rec.style.width = minusX + 'px';
? ? ? ? ? ? ? ? ?if(minusX >= 260) {
? ? ? ? ? ? ? ? ? ? ?rect.style.color = 'white';
? ? ? ? ? ? ? ? ? ? ?img.src = 'sure.png';
? ? ? ? ? ? ? ? ? ? ?document.onmousemove = null;
? ? ? ? ? ? ? ? ? ? ?silde.onmousedown = null;
? ? ? ? ? ? ? ? ? ? ?// rect.innerHTML = '驗(yàn)證成功';
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? // console.log(222,e,minusX); ? ?//用以測(cè)試
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? document.onmouseup = function () { ? ?//鼠標(biāo)抬起事件
? ? ? ? ? ? document.onmousemove = null; ? ?//不允許鼠標(biāo)移動(dòng)事件發(fā)生
? ? ? ? ? ? console.log(111);
? ? ? ? ? ? if(minusX < 260) { //如果沒(méi)有到頭
? ? ? ? ? ? ? ? img.src = 'hkkkk.png';
? ? ? ? ? ? ? ? silde.style.left = 0; ? ?//設(shè)置一個(gè) left值
? ? ? ? ? ? ? ? rec.style.width = 0; ? ?//綠色背景層設(shè)置寬度
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>

實(shí)現(xiàn)效果:

案例中所用到的小圖標(biāo)可以自行獲取:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript中instanceof與typeof運(yùn)算符的用法及區(qū)別詳細(xì)解析

    JavaScript中instanceof與typeof運(yùn)算符的用法及區(qū)別詳細(xì)解析

    這篇文章主要是對(duì)JavaScript中instanceof與typeof運(yùn)算符的用法及區(qū)別進(jìn)行了詳細(xì)的分析介紹。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2013-11-11
  • 淺談Webpack是如何打包CommonJS的

    淺談Webpack是如何打包CommonJS的

    CommonJS是Node中的一種模塊化規(guī)范,本文主要介紹了Webpack是如何打包CJS的,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • JS監(jiān)聽(tīng)元素dom變化方案詳解

    JS監(jiān)聽(tīng)元素dom變化方案詳解

    這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽(tīng)元素dom變化的相關(guān)資料,監(jiān)聽(tīng)DOM大小的變化,在前端開(kāi)發(fā)中,算是一個(gè)比較常見(jiàn)的需求,比如我們要制作可伸縮的圖表的時(shí)候,可能需要根據(jù)DOM大小的變化,進(jìn)行動(dòng)態(tài)的更新圖表,需要的朋友可以參考下
    2023-09-09
  • JavaScript 正則表達(dá)式詳解

    JavaScript 正則表達(dá)式詳解

    正則表達(dá)式(Regular Expression)是一門(mén)簡(jiǎn)單語(yǔ)言的語(yǔ)法規(guī)范,是強(qiáng)大、便捷、高效的文本處理工具,它應(yīng)用在一些方法中,對(duì)字符串中的信息實(shí)現(xiàn)查找、替換和提取操作
    2021-11-11
  • JS實(shí)現(xiàn)簡(jiǎn)單拖拽效果

    JS實(shí)現(xiàn)簡(jiǎn)單拖拽效果

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖拽效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • JavaScript MutationObserver實(shí)例講解

    JavaScript MutationObserver實(shí)例講解

    MutationObserver用來(lái)監(jiān)視DOM變動(dòng)。DOM的任何變動(dòng),比如節(jié)點(diǎn)增減、屬性的變動(dòng)、文本內(nèi)容的變動(dòng)都會(huì)觸發(fā)MutationObserver事件,它與事件有一個(gè)本質(zhì)不同:事件是同步觸發(fā),MutationObserver則是異步觸發(fā),DOM的變動(dòng)并不會(huì)馬上觸發(fā),而是要等到當(dāng)前所有DOM操作都結(jié)束才觸發(fā)
    2022-12-12
  • Lottie動(dòng)畫(huà)前端開(kāi)發(fā)使用技巧

    Lottie動(dòng)畫(huà)前端開(kāi)發(fā)使用技巧

    這篇文章主要為大家介紹了Lottie動(dòng)畫(huà)前端開(kāi)發(fā)使用技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • JavaScript中對(duì)象property的讀取和寫(xiě)入方法介紹

    JavaScript中對(duì)象property的讀取和寫(xiě)入方法介紹

    這篇文章主要介紹了JavaScript中對(duì)象property的讀取和寫(xiě)入方法介紹,本文講解了原型繼承鏈中property的讀取、原型繼承鏈中property的寫(xiě)入等內(nèi)容,需要的朋友可以參考下
    2014-12-12
  • JS實(shí)現(xiàn)動(dòng)態(tài)移動(dòng)層及拖動(dòng)浮層關(guān)閉的方法

    JS實(shí)現(xiàn)動(dòng)態(tài)移動(dòng)層及拖動(dòng)浮層關(guān)閉的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)移動(dòng)層及拖動(dòng)浮層關(guān)閉的方法,可實(shí)現(xiàn)動(dòng)態(tài)拖動(dòng)浮動(dòng)窗口及關(guān)閉窗口的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-04-04
  • BootStrap Validator 版本差異問(wèn)題導(dǎo)致的submitHandler失效問(wèn)題的解決方法

    BootStrap Validator 版本差異問(wèn)題導(dǎo)致的submitHandler失效問(wèn)題的解決方法

    這篇文章主要介紹了BootStrap Validator 版本差異問(wèn)題導(dǎo)致的submitHandler失效問(wèn)題的解決方法,下面通過(guò)本文給大家詳細(xì)說(shuō)明一下,需要的朋友可以參考下
    2016-12-12

最新評(píng)論