js手写滑动验证（兼容pc和移动端）

最新推荐文章于 2023-07-12 17:50:29 发布
最新推荐文章于 2023-07-12 17:50:29 发布
阅读量2.9k 收藏 2
点赞数 1
分类专栏： 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34158432/article/details/80118100
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title></title>
    <script src="assets/js/vue.min.js"></script>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
        *::-webkit-input-placeholder {
            color: #999;
            `ter-spacing: 2px;
        }
        *:-moz-placeholder {
            color: #999;
            letter-spacing: 2px;
        }
        *:-ms-input-placeholder {
            color: #999;
            letter-spacing: 2px;
        }
        div, p, ul, li, html, body {
            padding: 0;
            margin: 0;
        }

        input {
            font-size: 15px;
            outline: none;
        }

        html {
            height: 100%;
            width: 100%;
        }
        #app{
            height: 100%;
        }
        .header {
            height: 64px;
            width: 100%;
            line-height: 64px;
            text-align: center;
            background-color: #1b1920;
            position: relative;
        }

        .header span {
            font-size: 17px;
            color: rgb(255, 255, 255);
        }

        .content {
            border: 1px solid #000;
        }

        .content li {
            list-style: none;
        }

        .getmsg {
            height: 124px;
            width: 100%;
            background: url("assets/images/bg1.png");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .getmsg {
            position: relative;
        }

        .rex {
            position: absolute;
            top:25px;
            left:4%
        }

        .rex .rex_icon {
            height: 20px;
            border-left: 1px solid rgb(7,112,45);
            margin:0 10px 0 10px;
            display: inline-block;
        }
        .rex .title{
            color:rgb(1,131,56);
            font-size: 19px;
            font-weight: 500;
            letter-spacing: 1px;
            position: relative;
            bottom:4px;
            display: inline-block;
        }
        .getmsg .logo {
            width: 74px;
            height: 26px;
        }

        .getmsg .getmsg_input {
            width: 100%;
            position: absolute;
            bottom: 10px
        }

        .input {
            padding-left: 12%;
            margin-left: 4%;
            background: rgb(255, 255, 255);
            width: 80%;
            border-radius: 10px 10px 0 0;
            background-image: url("assets/images/input.png");
            background-repeat: no-repeat;
            background-size: 15px 16px;
            background-position-x: 16px;
            background-position-y: 16px;
        }
        .input .enter{
            position: absolute;
            width: 60px;
            height: 28px;
            line-height: 28px;
            border-radius: 25px;
            border: none;
            outline: none;
            background: #43d280;
            color:#fff;
            font-size: 14px;
            letter-spacing: 1px;
            text-indent:1px;
            top:18%;
            right:7%
        }
        .getmsg_input input {
            height: 47px;
            border: none;
            width: 50%;
        }

        .getmsg_input .input span {
            color: rgb(51, 51, 51);
            margin-right: 25px
        }

        .msgtips {
            border-radius: 10px;
            position: relative;
            width: 80%;
            margin-left: 4%;
            background: rgb(255, 255, 255);
            padding:6%
        }
        .msgtips .code{
            color:#f95959
        }
        .msgtips img{
            position: absolute;
            top:-22px;
            width: 12px;
            height: 32px;
        }
        .msgtips .left{
            left:4%
        }
        .msgtips .right{
            right: 4%;
        }
        .msgtips .title{
            letter-spacing: 1px;
            font-size: 15px;
            color:rgb(100,102,100);
            font-weight: bold;
        }
        .msgtips p{
            margin-top: 12px;
            margin-bottom: 12px;
            height: 45px;
            line-height: 20px;
            font-size: 14px;
            color:rgb(123,123,123);
            letter-spacing: 1px;
        }
        .input_image {
            display: inline-block;
        }
        .msgcontent{
            background: -webkit-linear-gradient(#cdefda, #4ed487);
            background: -o-linear-gradient(#cdefda, #4ed487);
            background: -moz-linear-gradient(#cdefda, #4ed487);
            background: linear-gradient(#cdefda, #4ed487);
        }
        .msgform{
            width: 80%;
            margin-top:12px;
            margin-left: 4%;
            padding:6%;
            height: 360px;
            border-radius: 10px;
            background: rgb(255, 255, 255);
        }
        .msgform li{
            font-size: 14px;
            list-style: none;
        }
        .msgform li .title{
            width: 30%;
            color:rgb(123,123,123);
            letter-spacing: 1px;
        }
        .msgform li .formcontent{
            display: block;
            width: 70%;
            text-align: -webkit-right;
            color:rgb(93,93,93)
        }
        .msgcontent li{
            height: 45px;
            line-height: 45px;
            overflow: hidden;
            border-bottom:1px solid #f2f2f2;
        }
        .msgcontent .formcontent{
            display: inline-block;
            float: right;
        }
        .specialLH{
            line-height: initial;
        }
        #rex_card{
            width: 100%;
            height:100%;
            position: fixed;
            z-index: 9;
            background: rgba(0,0,0,0.3);
        }
        #rex_card .drawimg{
            height: 300px;
            margin: auto;
            padding-top: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #fff;
            width: 340px;
        }
        #rex_card .draw_img{
            height: 300px;
            margin: 10px;
        }
        #rex_card .draw_img .puzzle p,#rex_card .draw_img .puzzle .puzzle_only{
            float: left;
            width: 19%;
            height:50px;
            background-color: #4a9ec3;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            color:#fff;
            border: 1px solid #fff;
        }
        #rex_card .draw_img .puzzle .puzzle_only{
            background-color: #4ad184;
            float: inherit;
            position: absolute;
            top:52px;
            left:0
        }
        #rex_card .draw_img .puzzle{
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
            margin-left:4px;
        }
        #rex_card .puzzle_control{
            width:320px;
            text-align: center;
            position: relative;
            height: 40px;
            background-color: #dfe1e2;
            line-height: 40px;
            border:1px solid #e5e7e8;
            border-radius: 10px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        #rex_card .puzzle_control span{
            display: inline-block;
            color:#88949d;
        }
        #rex_card .puzzle_control .puzzle_btn{
            width:60px;
            height: 60px;
            border:1px solid #d7d7d7;
            outline: none;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            text-align: center;
            top:-10px;
            left: -8px;
        }
        #rex_card .puzzle_control .puzzle_btn:active{
            background-color: #eee;
        }
        #rex_card .puzzle_control .puzzle_btn span:first-child {
            margin-left: 4px;
        }
        #rex_card .puzzle_control .puzzle_btn span{
            margin-top: 18px;
            margin-right: 2px;
            height: 24px;
            display: inline-block;
            border-right: 4px solid #60c007;
        }
        #rex_card .puzzle .tips{
            position: absolute;
            bottom:-25px;
            padding: 2px;
            background-color: #de715b;
            color:#fff;
            width: 304px;
            left:1px;
            text-align: center;
            font-size: 15px;
        }
        #rex_card .puzzle .tips_right{
            position: absolute;
            bottom:-25px;
            padding: 2px;
            background-color: #4ad184;
            color:#fff;
            width: 304px;
            left:1px;
            text-align: center;
            font-size: 15px;

        }
        .flowlock{
            overflow-y:hidden;
        }
        .movebox{
            animation: move 0.3s;
        }
        .wrongbox{
            animation: wrong 2s;
        }
        @keyframes wrong {
            0% {
                bottom: -25px
            }
            50% {
                bottom: 0;
            }
            100% {
                bottom: -25px;
            }
        }
        @-webkit-keyframes wrong
        {
            0% {
                bottom: -25px
            }
            50% {
                bottom: 0;
            }
            100% {
                bottom: 0;
            }
        }
        @keyframes move {
            0% {
                left: -10px
            }
            25% {
                left: 10px;
            }
            50% {
                left: -10px;
            }
            100% {
                left: 10px;
            }
        }
        @-webkit-keyframes move
        {
            0% {
                left: -10px
            }
            25% {
                left: 10px;
            }
            50% {
                left: -10px;
            }
            100% {
                left: 10px;
            }
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div id="rex_card" v-show="btnRexShow">
        <div class="drawimg">
            <div class="draw_img">
                <div class="puzzle">
                    <p>南</p>
                    <p>京</p>
                    <p>天</p>
                    <p>脉</p>
                    <p>健</p>
                    <p>康</p>
                    <p>科</p>
                    <p>技</p>
                    <p style="background:rgba(0,0,0,0.5);">发</p>
                    <p>展</p>
                    <p>有</p>
                    <p>限</p>
                    <p>公</p>
                    <p>司</p>
                    <p>。</p>
                    <div class="puzzle_only" v-show="btnright">发</div>
                    <div class="tips">拖动滑块将图片正确拼合~</div>
                    <div class="tips_right">恭喜您验证成功~</div>
                </div>
                <div class="puzzle_control">
                    <span>拖动左边滑块完成拼图</span>
                    <p class="puzzle_btn" @mousedown="btnDragStart($event)" @touchstart="btnTochStart($event)">
                        <span></span>
                        <span></span>
                        <span></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="header">
        <span>南京天脉健康科技发展有限公司</span>
    </div>
    <div class="msgcontent">
        <div class="getmsg">
            <div class="rex">
                <img src="assets/images/logo.png" class="logo">
                <span class="rex_icon"></span>
                <span class="title">产品ID验证</span>
            </div>
            <div class="getmsg_input">
                <div class="input">
                    <span>ID编码</span>
                    <input type="text" placeholder="请输入查询编码" v-model="inputval" @focus="onfocus">
                    <button class="enter" @click="submit">提交</button>
                </div>
            </div>
        </div>
        <div class="msgtips">
            <img src="assets/images/link.png" alt="" class="left">
            <img src="assets/images/link.png" alt="" class="right">
            <span class="title">尊敬的客户您好:</span>
            <p v-if="productarr.产品编码 !== undefined">您当前查询的产品编码为<span class="code">{{productarr.产品编码}}</span>，更多详细信息请查看下方详情，谢谢！
            </p>
            <p v-else style="color:#f95959">{{warnmessage}}</p>
        </div>
        <div class="msgform">
            <ul>
                <li>
                    <span class="title">查询时间:</span>
                    <span class="formcontent">{{currentTime}}</span>
                </li>
                <li>
                    <span class="title">查询结果:</span>
                    <span class="formcontent">{{productResult}}</span>
                </li>
                <li>
                    <span class="title">唯一ID码:</span>
                    <span class="formcontent">{{productarr.唯一ID}}</span>
                </li>
                <li>
                    <span class="title">产品编码:</span>
                    <span class="formcontent">{{productarr.产品编码}}</span>
                </li>
                <li style="line-height: initial">
                    <span class="title" style="display: inline-block;height: 100%;line-height: 45px">产品信息:</span>
                    <span class="formcontent">{{productarr.产品信息}}</span>
                </li>
                <li>
                    <span class="title">出库日期:</span>
                    <span class="formcontent">{{productarr.出库时间}}</span>
                </li>
                <li>
                    <span class="title">批次号:</span>
                    <span class="formcontent">{{productarr.批号}}</span>
                </li>
                <li>
                    <span class="title">收货地点:</span>
                    <span class="formcontent">{{productarr.收货地点}}</span>
                </li>
            </ul>
        </div>
        <div style="height: 20px"></div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            btnX: '',
            warnmessage: '请输入ID编码进行查询!',
            inputval: '',
            productResult: '',
            currentTime: '',
            productClonearr: [],
            productarr: [],
            matcharr: [],
            btnRexShow: false,
            btnright: false,
            pcOrMObile: '',
            rightOrWrong: ''
        },
        mounted: function () {
            this.inputval = ''
            this.productClonearr = []
            this.currentTime = ''
            this.getMatchNums()
            this.browserRedirect()
        },
        methods: {
            onfocus: function () {
                this.inputval = ''
                this.productResult = ''
                this.productarr = []
                this.currentTime = ''
                this.warnmessage = '请输入ID编码进行查询!'
            },
            submit: function (val) {
                var that = this
                $.ajax({
                    url: '这是个秘密这是个秘密这是个秘密',
                    type: 'post',
                    dataType: 'jsonp',
                    data: {
                        param: JSON.stringify({
                            onlyoneid: that.inputval,
                            operate: 'OnlyOne',
                            localtime: that.getNowFormatDate()
                        })
                    },
                    success: function (res) {
                        that.productResult = ''
                        if (res.ok === true) {
                            if (res.data.length === 0) {
                                that.productResult = '查无此货'
                                that.productarr = []
                                that.currentTime = ''
                                that.warnmessage = '请输入正确的产品ID码!'
                            } else {
                                that.btnRexShow = true
                                var bodyflow = document.getElementsByTagName('body')[0]
                                bodyflow.className = 'flowlock'
                                var htmlflow = document.getElementsByTagName('html')[0]
                                htmlflow.className = 'flowlock'
                                that.productClonearr = res.data[0]
                                that.currentTime = that.getNowFormatDate()
                                that.productResult = '正品'
                            }
                        } else {
                            that.productResult = ''
                            that.productClonearr = []
                            that.currentTime = ''
                            that.warnmessage = res.message
                            return
                        }
                    }
                })
            },
            getNowFormatDate: function () {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + date.getSeconds();
                return currentdate;
            },
            getMatchNums: function () {
                var that = this;
                that.matcharr = []
                for (var i = 0; i < 4; i++) {
                    that.matcharr.push(Math.floor(Math.random() * 11))
                }
            },
            browserRedirect: function () {
                let that = this
                var sUserAgent = navigator.userAgent.toLowerCase();
                var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
                var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
                var bIsMidp = sUserAgent.match(/midp/i) == "midp";
                var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
                var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
                var bIsAndroid = sUserAgent.match(/android/i) == "android";
                var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                    that.pcOrMObile = 'phone'
                } else {
                    that.pcOrMObile = 'pc'
                }
            },
            btnDragStart: function (e) {
                var that = this
                if (that.pcOrMObile !== 'pc') {
                    return
                }
                that.btnright = true
                var drawimg = document.getElementsByClassName('drawimg')[0]
                var tips_right = document.getElementsByClassName('tips_right')[0]
                var tips = document.getElementsByClassName('tips')[0]
                var puzzle = document.getElementsByClassName('puzzle_btn')[0]
                var maxwidth = document.getElementsByClassName('puzzle_control')[0].offsetWidth
                var onlyPuzzle = document.getElementsByClassName('puzzle_only')[0]
                var oEvent = e || event
                that.btnX = oEvent.clientX - puzzle.offsetLeft
                document.onmousemove = function (ev) {
                    var et = ev || event
                    var line = et.clientX - that.btnX
                    if (line < -9) {
                        line = -9
                    } else if (line > maxwidth - 51) {
                        line = document.documentElement.clientWidth - maxwidth.offsetWidth;
                    }
                    puzzle.style.left = line + 'px'
                    onlyPuzzle.style.left = line + 'px'
                    document.onmouseup = function () {
                        if (line > 180 && line < 195) {
                            tips_right.className += ' wrongbox'
                            that.rightOrWrong = 'right'
                            that.productarr = that.productClonearr
                            setTimeout(function () {
                                tips_right.className = 'tips_right'
                            }, 2000)
                            setTimeout(function () {
                                that.btnRexShow = false
                                var bodyflow = document.getElementsByTagName('body')[0]
                                var htmlflow = document.getElementsByTagName('html')[0]
                                bodyflow.className = ''
                                htmlflow.className = ''
                                onlyPuzzle.style.left = 0
                                puzzle.style.left = -9 + 'px'
                            }, 2100)
                        } else {
                            drawimg.className += ' movebox'
                            tips.className += ' wrongbox'
                            setTimeout(function () {
                                onlyPuzzle.style.left = 0
                                puzzle.style.left = -9 + 'px'
                                that.btnright = false
                                drawimg.className = 'drawimg'
                            }, 1000)
                            setTimeout(function () {
                                tips.className = 'tips'
                            }, 2000)
                        }
                        document.onmousemove = null
                        document.onmouseup = null
                    }
                }
            },
            btnTochStart:function (e) {
                var that = this
                if (that.pcOrMObile !== 'phone') {
                    return
                }
                that.btnright = true
                var puzzle = document.getElementsByClassName('puzzle_btn')[0]
                var tips_right = document.getElementsByClassName('tips_right')[0]
                var drawimg = document.getElementsByClassName('drawimg')[0]
                var tips = document.getElementsByClassName('tips')[0]
                var maxwidth = document.getElementsByClassName('puzzle_control')[0].offsetWidth
                var onlyPuzzle = document.getElementsByClassName('puzzle_only')[0]
                var oEvent = e.touches[0]
                that.btnX = oEvent.clientX - puzzle.offsetLeft
                document.ontouchmove = function (ev) {
                    var et = ev.touches[0]
                    var line = et.clientX - that.btnX
                    if (line < -9) {
                        line = -9
                    } else if (line > maxwidth - 51) {
                        line = document.documentElement.clientWidth - maxwidth.offsetWidth;
                    }
                    puzzle.style.left = line + 'px'
                    onlyPuzzle.style.left = line + 'px'
                    document.ontouchend = function () {
                        if (line > 180 && line < 195) {
                            tips_right.className += ' wrongbox'
                            that.rightOrWrong = 'right'
                            that.productarr = that.productClonearr
                            setTimeout(function () {
                                tips_right.className = 'tips_right'
                            }, 2000)
                            setTimeout(function () {
                                that.btnRexShow = false
                                onlyPuzzle.style.left = 0
                                puzzle.style.left = -9 + 'px'
                                var bodyflow = document.getElementsByTagName('body')[0]
                                var htmlflow = document.getElementsByTagName('html')[0]
                                bodyflow.className = ''
                                htmlflow.className = ''
                            }, 2100)
                        } else {
                            drawimg.className += ' movebox'
                            tips.className += ' wrongbox'
                            setTimeout(function () {
                                onlyPuzzle.style.left = 0
                                puzzle.style.left = -9 + 'px'
                                that.btnright = false
                                drawimg.className = 'drawimg'
                            }, 1000)
                            setTimeout(function () {
                                tips.className = 'tips'
                            }, 2000)
                        }
                        document.ontouchmove = null
                        document.ontouchend = null
                    }
                }
            }
        }
    })
</script>
</body>
</html>


恩不错，正如你看到的，代码冗余，但是现在也没时间整理这个了，因为我有活儿要去干了，对了补充一下，为啥不用图片做拼图，因为canvas不会啊，所以我现在去深度学习canvas了，期待下一个版本吧

十月时光
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端适配（简单的js代码搞定）
weikehang的博客
01-15 4051
第一步：创建一个js文件 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { v
js实现移动端字体自适应（rem）
蜗牛的博客
04-19 2214
主要针对移动端做字体相应，相对于媒体查询要方便点，这里简单记录一下方便以后使用。 <script> function resizeFont() { //获取屏幕宽度 let clientWidth = document.documentElement.clientWidth || document.body.clientWidth; ...
手写flexible.js的原理实现，我终于明白移动端多端适配
weixin_43964148的博客
08-04 865
上周优化了个跑马灯，原因是跑马灯的长度太长了，每个item的节点比较多，所以即使限制最多只有50个item，也还是很长很长，有多长可以看看下面
vue实现滑块滑动校验
zuo_zuo_blog的博客
09-12 1828
1.子组件slider.vue <template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmWords}}</div> <div ref="moveDiv" @mousedown="mouseDownFn($event)" :cl
微信小程序12行js代码自己写个滑块功能
换日线的博客
07-14 449
效果图如下所示 .wxml <view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view> </view> <view class="bfb">{{percen}}%</vie
手写签名插件（PC端和移动端可用）
12-20
jQuery手写签名插件jSignature，jSignature是一个jQuery插件，它简化了创建签名捕获场的浏览器窗口，允许用户使用鼠标，笔，或手指画一个签名。jSignature捕捉签名矢量轮廓的笔触。虽然jSignature可以导出大位图...
vue.js版双向滑动区间选择器
01-20
Vue.js版双向滑动区间选择器是一款专为移动端设计的前端组件，旨在解决在不同设备和浏览器上输入范围时可能出现的兼容性问题，提供优秀的用户体验。这个组件基于流行的JavaScript前端框架Vue.js，使得开发者能够轻松...
Vue实现移动端左右滑动效果的方法
12-12
在Vue.js框架中，实现移动端的左右滑动效果可以借助第三方库vue-touch。vue-touch是一个为Vue.js设计的轻量级手势库，它提供了一系列的手势事件，包括滑动（swipe）、点击（tap）、双击（doubleTap）、捏合（pinch）...
vue使用canvas实现移动端手写签名
10-14
在Vue.js中实现移动端的手写签名功能，通常会结合HTML5的Canvas API来完成。Canvas提供了一个二维绘图表面，我们可以在这个表面上绘制图形、线条等。以下是一个详细的步骤和知识点： 1. **HTML结构**： 首先，我们...
移动端手写签名js
05-07
javascript移动端手写签名，通过canvas绘制，base64图片
滑块验证,PC端滑块验证
07-27
可用于滑块验证。 可用于PC端滑块验证。 PC端滑块验证。可用于滑块验证。 可用于PC端滑块验证。 PC端滑块验证。
兼容pc端和手机的滑块验证码
01-15
纯js滑块验证码，兼容pc及手机，包括初始化，验证错误及验证通过方法。
滑块验证码 同时支持PC电脑端和手机移动端
11-22
滑块验证码 同时支持PC电脑端和手机移动端。滑块验证码，拖拽效果，拖拽滑动验证码，从左边拖拽到右边实现验证。
vue+原生JS移动端手机号滑块验证滑动失灵
最新发布
weixin_48996679的博客
07-12 390
vue+原生JS移动端手机号滑块验证滑动失灵
纯js滑块验证，并适配手机，PC
小灰灰的博客
05-10 1194
【代码】纯js滑块验证，并适配手机，PC。
Java实现网页滑动验证与短信验证码案例精析
短信接口_短信验证码_短信验证码接口
03-07 4940
PC版滑动验证的实现 简介 滑动验证是基于人机识别技术开发的智能验证码产品。用户通过简单的右滑交互，无需思考即可通过验证。 资源引入说明 使用PC版滑动验证码，需要引入以下js资源，为保证服务功能最优，官方会定期迭代升级线上js资源，因此请避免使用本地文件导入js资源，以免后端版本更新而前端资源未更新造成冲突： &lt;!-- 国内使用 --&gt; &lt;script type...
时下最流行的滑块验证，防止机器人恶意刷数据库
张子艺
11-10 9803
/* * drag 1.0 * create by tony@jentian.com * date 2015-08-18 * 拖动滑块 */ /** * @param $ */ (function($){ $.fn.drag = function(options){ var x, drag = this, isMove = false, defaults =
JS手写slider组件（缩放拖拽）
~
07-23 1208
效果：点击观看 布局： <div id='box' className='drag-bar-box'> <div id='drag' className='drag-bar'> <div id='scaleleft' className='drag-block-left'></div> <div id='scaleright' className='drag-block-right
滑块验证，jquery实例的方法封装，验证登录，(支持PC端和移动端)
Baby_加油_的博客
02-02 5328
问题： 在工作中，为了防止别人刷接口，难免会遇到滑动验证。我在网上找个相关的代码，是经过jquery实例的方法封装，相对简单易学，我在这里进行了基本的解析 源码请看：码云链接 这里主要说一说jquery实例的封装 /* 封装基本架子 */ /* jQuery, window, document */ (function(t, i, s) { var l = function
如果用插件检测屏幕移动端和pc端
05-11
要检测屏幕是移动端还是PC端，可以使用一些现成的插件或者手写代码来实现。以下是一些常用的方法： 1. 使用现成的插件：例如，可以使用 Modernizr 插件来检测移动设备和桌面设备的特性支持情况。该插件会检测浏览器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值