jquery/React/Vue验证码插件

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量631 收藏 2
点赞数 1
文章标签： javascript reactjs vue.js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41457482/article/details/117061898
版权

pp：今天在项目中遇到写拖动图片进行验证的需求，网上查找的插件库都需要有偿下载，所以就自己动手写了一个，放上来供有需要的人做参考，有疑问也欢迎留言，乐于做一个奉献的前端小傻狗~

1、先上预览图
1.1 最开始的样子

1.png

1.2拖动滑块 图片显示

2.png

1.3把滑块拖动到相应位置 图片隐藏

微信图片_20191023205607.png
3.png

2、代码结构图 ps：此插件用到字体文件 不知道怎么插入文件 所以把名字放上来自己去下载 也可发邮箱转发给你

微信图片_20191023205319.png

3、html代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        #resetpwdVerify{
            position: relative;
            top: 300px;
            left: 50%;
        }
    </style>
</head>

<body>
    <div id="resetpwdVerify"></div>
    <script src="./js/jquery.min.js"></script>
    <script>
        function initVerify() {
            $('#resetpwdVerify').html('');
            var that = this;
            $('#resetpwdVerify').slideVerify({
                type: 2,       //类型
                vOffset: 5,    //误差量，根据需求自行调整
                vSpace: 5, //间隔
                imgName: ['1.jpg', '2.jpg', '3.jpg', '4.jpg'],
                imgSize: {
                    width: '360px',
                    height: '200px',
                },
                blockSize: {
                    width: '40px',
                    height: '40px',
                },
                barSize: {
                    width: '360px',
                    height: '40px',
                },
                ready: function () {
                },
                success: function () {
                },
                error: function () {
                }
            });
        }
        $(function () {
            initVerify()
        });
        ; (function ($, window, document, undefined) {
            //定义Slide的构造函数
            var Slide = function (ele, opt) {
                this.$element = ele,
                    this.defaults = {
                        num: 1,
                        type: 1,
                        vOffset: 5,
                        vSpace: 5,
                        imgName: ['1.jpg', '2.jpg', '3.jpg', '4.jpg'],
                        imgSize: {
                            width: '360px',
                            height: '200px',
                        },
                        blockSize: {
                            width: '50px',
                            height: '50px',
                        },
                        barSize: {
                            width: '360px',
                            height: '40px',
                        },
                        ready: function () { },
                        success: function () { },
                        error: function () { }

                    },
                    this.options = $.extend({}, this.defaults, opt)
            };
            //定义Slide的方法
            Slide.prototype = {
                init: function () {
                    var _this = this;
                    //加载页面
                    this.loadDom();
                    this.options.ready();
                    this.$element[0].onselectstart = document.body.ondrag = function () {
                        return false;
                    };

                    //按下
                    this.htmlDoms.move_block.on('touchstart', function (e) {
                        _this.start(e);
                    });

                    this.htmlDoms.move_block.on('mousedown', function (e) {
                        _this.start(e);
                    });

                    //拖动
                    window.addEventListener("touchmove", function (e) {
                        _this.move(e);
                    });
                    window.addEventListener("mousemove", function (e) {
                        _this.move(e);
                    });

                    //鼠标松开
                    window.addEventListener("touchend", function () {
                        _this.end();
                    });
                    window.addEventListener("mouseup", function () {
                        _this.end();
                    });

                    //刷新
                    _this.$element.find('.verify-refresh').on('click', function () {
                        _this.refresh();
                    });
                },
                //初始化加载
                loadDom: function () {
                    this.img_rand = Math.floor(Math.random() * this.options.imgName.length);            //随机的背景图片
                    var panelHtml = '';
                    var tmpHtml = '';
                    if (this.options.type != 1) {
                        panelHtml += '<div class="verify-img-panel"><div  class="verify-refresh"><i class="iconfont icon-refresh"></i></div><div class="verify-gap"></div></div>';
                        tmpHtml = '<div  class="verify-sub-block"></div>';
                    }
                    panelHtml += '<div class="verify-bar-area"><span  class="verify-msg">向右滑动完成验证</span><div class="verify-left-bar"><span  class="verify-msg"></span><div  class="verify-move-block"><i  class="verify-icon iconfont icon-right"></i>' + tmpHtml + '</div></div></div>';
                    this.$element.append(panelHtml);

                    this.htmlDoms = {
                        gap: this.$element.find('.verify-gap'),
                        sub_block: this.$element.find('.verify-sub-block'),
                        img_panel: this.$element.find('.verify-img-panel'),
                        bar_area: this.$element.find('.verify-bar-area'),
                        move_block: this.$element.find('.verify-move-block'),
                        left_bar: this.$element.find('.verify-left-bar'),
                        msg: this.$element.find('.verify-msg'),
                        icon: this.$element.find('.verify-icon'),
                        refresh: this.$element.find('.verify-refresh')
                    };
                    this.status = false;    //鼠标状态
                    this.setSize = this.resetSize(this);    //重新设置宽度高度
                    this.htmlDoms.gap.css({ 'width': this.options.blockSize.width, 'height': this.options.blockSize.height });
                    this.htmlDoms.sub_block.css({ 'width': this.options.blockSize.width, 'height': this.options.blockSize.height });
                    this.htmlDoms.img_panel.css({ 'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background-size': this.setSize.img_width + ' ' + this.setSize.img_height });
                    this.htmlDoms.img_panel.css({ 'background': 'url(./img/' + this.options.imgName[this.img_rand] + ')' });
                    this.htmlDoms.bar_area.css({ 'width': this.setSize.bar_width, 'height': this.options.barSize.height, 'line-height': this.options.barSize.height });
                    this.htmlDoms.move_block.css({ 'width': this.options.barSize.height, 'height': this.options.barSize.height });
                    this.htmlDoms.left_bar.css({ 'width': this.options.barSize.height, 'height': this.options.barSize.height });
                    this.randSet();
                },
                //鼠标按下
                start: function (e) {
                    this.htmlDoms.msg.text('');
                    this.htmlDoms.move_block.css('background-color', '#52ccba');
                    this.htmlDoms.left_bar.css('border-color', '#52ccba');
                    this.htmlDoms.icon.css('color', '#fff');
                    e.stopPropagation();
                    this.status = true;
                    $('.verify-img-panel').show();
                    $('.verify-sub-block').show();
                    if (this.defaults.num == 1) {
                        this.refresh();
                        this.defaults.num += 1;
                    }
                },
                //鼠标移动
                move: function (e) {
                    if (this.status) {
                        if (!e.touches) {    //兼容移动端
                            var x = e.clientX;
                        } else {     //兼容PC端
                            var x = e.touches[0].pageX;
                        }
                        var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
                        var move_block_left = x - bar_area_left; //小方块相对于父元素的left值

                        if (this.options.type != 1) {        //图片滑动
                            if (move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width) / 2) - 2) {
                                move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width) / 2) - 2;
                            }
                        } else {     //普通滑动
                            if (move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height) / 2) + 3) {
                                this.$element.find('.verify-msg:eq(1)').text('松开验证');
                                move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height) / 2) + 3;
                            } else {
                                this.$element.find('.verify-msg:eq(1)').text('');
                            }
                        }

                        if (move_block_left <= 0) {
                            move_block_left = parseInt(parseInt(this.options.blockSize.width) / 2);
                        }
                        //拖动后小方块的left值
                        this.htmlDoms.move_block.css('left', move_block_left - parseInt(parseInt(this.options.blockSize.width) / 2) + "px");
                        this.htmlDoms.left_bar.css('width', move_block_left - parseInt(parseInt(this.options.blockSize.width) / 2) + "px");
                    }
                },
                //鼠标松开
                end: function () {
                    var _this = this;
                    //判断是否重合
                    if (this.status) {
                        if (this.options.type != 1) { //图片滑动
                            var vOffset = parseInt(this.options.vOffset);
                            if (parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
                                this.htmlDoms.move_block.css('background-color', '#52ccba');
                                this.htmlDoms.left_bar.css({ 'border-color': '#52ccba', 'background-color': '#d2f4ef' });
                                this.htmlDoms.icon.css('color', '#fff');
                                this.htmlDoms.icon.removeClass('icon-right');
                                this.htmlDoms.icon.addClass('icon-check');
                                this.htmlDoms.refresh.hide();
                                this.htmlDoms.move_block.unbind('mousedown touchstart');
                                this.options.success();
                                $('.verify-img-panel').hide();
                                $('.verify-sub-block').hide();
                                this.defaults.num = 1;
                            } else {
                                this.refresh();
                                this.htmlDoms.move_block.css('background-color', '#d9534f');
                                this.htmlDoms.left_bar.css('border-color', '#d9534f');
                                this.htmlDoms.icon.css('color', '#fff');
                                this.htmlDoms.icon.removeClass('icon-right');
                                this.htmlDoms.icon.addClass('icon-close');
                                setTimeout(function () {
                                    _this.htmlDoms.move_block.animate({ 'left': '0px' }, 'fast');
                                    _this.htmlDoms.left_bar.animate({ 'width': '40px' }, 'fast');
                                    _this.htmlDoms.left_bar.css({ 'border-color': '#ddd' });

                                    _this.htmlDoms.move_block.css('background-color', '#fff');
                                    _this.htmlDoms.icon.css('color', '#000');
                                    _this.htmlDoms.icon.removeClass('icon-close');
                                    _this.htmlDoms.icon.addClass('icon-right');
                                    _this.$element.find('.verify-msg:eq(0)').text('向右滑动完成验证');
                                }, 400);
                                this.options.error();
                            }
                        } else {    //普通滑动
                            if (parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
                                this.htmlDoms.move_block.css('background-color', '#52ccba');
                                this.htmlDoms.left_bar.css({ 'color': '#4cae4c', 'border-color': '#52ccba', 'background-color': '#d2f4ef' });
                                this.htmlDoms.icon.css('color', '#fff');
                                this.htmlDoms.icon.removeClass('icon-right');
                                this.htmlDoms.icon.addClass('icon-check');
                                this.htmlDoms.refresh.hide();
                                this.htmlDoms.move_block.unbind('mousedown');
                                this.htmlDoms.move_block.unbind('touchstart');
                                this.$element.find('.verify-msg:eq(1)').text('验证成功');
                                this.options.success();
                                $('.verify-img-panel').hide();
                                $('.verify-sub-block').hide();
                                this.defaults.num = 1;
                            } else {
                                this.refresh();
                                this.htmlDoms.move_block.css('background-color', '#d9534f');
                                this.htmlDoms.left_bar.css('border-color', '#d9534f');
                                this.htmlDoms.icon.css('color', '#fff');
                                this.htmlDoms.icon.removeClass('icon-right');
                                this.htmlDoms.icon.addClass('icon-close');
                                setTimeout(function () {
                                    _this.htmlDoms.move_block.animate({ 'left': '0px' }, 'fast');
                                    _this.htmlDoms.left_bar.animate({ 'width': '40px' }, 'fast');
                                    _this.htmlDoms.left_bar.css({ 'border-color': '#ddd' });
                                    _this.htmlDoms.move_block.css('background-color', '#fff');
                                    _this.htmlDoms.icon.css('color', '#000');
                                    _this.htmlDoms.icon.removeClass('icon-close');
                                    _this.htmlDoms.icon.addClass('icon-right');
                                    _this.$element.find('.verify-msg:eq(0)').text('向右滑动解锁');
                                }, 400);
                                this.options.error();
                            }
                        }
                        this.status = false;
                    }
                },
                resetSize: function (obj) {
                    var img_width, img_height, bar_width, bar_height;  //图片的宽度、高度，移动条的宽度、高度
                    var parentWidth = obj.$element.parent().width() || $(window).width();
                    var parentHeight = obj.$element.parent().height() || $(window).height();
                    if (obj.options.imgSize.width.indexOf('%') != -1) {
                        img_width = parseInt(obj.options.imgSize.width) / 100 * parentWidth + 'px';
                    } else {
                        img_width = obj.options.imgSize.width;
                    }
                    if (obj.options.imgSize.height.indexOf('%') != -1) {
                        img_height = parseInt(obj.options.imgSize.height) / 100 * parentHeight + 'px';
                    } else {
                        img_height = obj.options.imgSize.height;
                    }
                    if (obj.options.barSize.width.indexOf('%') != -1) {
                        bar_width = parseInt(obj.options.barSize.width) / 100 * parentWidth + 'px';
                    } else {
                        bar_width = obj.options.barSize.width;
                    }
                    if (obj.options.barSize.height.indexOf('%') != -1) {
                        bar_height = parseInt(obj.options.barSize.height) / 100 * parentHeight + 'px';
                    } else {
                        bar_height = obj.options.barSize.height;
                    }
                    return { img_width: img_width, img_height: img_height, bar_width: bar_width, bar_height: bar_height };
                },
                //随机出生点位
                randSet: function () {
                    var rand1 = Math.floor(Math.random() * 9 + 1);
                    var rand2 = Math.floor(Math.random() * 9 + 1);
                    var top = rand1 * parseInt(this.setSize.img_height) / 15 + parseInt(this.setSize.img_height) * 0.1;
                    var left = rand2 * parseInt(this.setSize.img_width) / 15 + parseInt(this.setSize.img_width) * 0.1;
                    this.$element.find('.verify-img-panel').css('margin-bottom', this.options.vSpace + 'px');
                    this.$element.find('.verify-gap').css({ 'top': top, 'left': left });
                    this.$element.find('.verify-sub-block').css({ 'top': '-' + (parseInt(this.setSize.img_height) - top + this.options.vSpace + 2) + 'px', 'background-image': 'url(./img/' + this.options.imgName[this.img_rand] + ')', 'background-size': this.setSize.img_width + ' ' + this.setSize.img_height, 'background-position-y': '-' + top + 'px', 'background-position-x': '-' + left + 'px' });
                },
                //刷新
                refresh: function () {
                    this.randSet();
                    this.img_rand = Math.floor(Math.random() * this.options.imgName.length);            //随机的背景图片
                    this.$element.find('.verify-img-panel').css({ 'background': 'url(./img/' + this.options.imgName[this.img_rand] + ')', 'background-size': this.setSize.img_width + ' ' + this.setSize.img_height });
                    this.$element.find('.verify-sub-block').css({ 'background-image': 'url(./img/' + this.options.imgName[this.img_rand] + ')', 'background-size': this.setSize.img_width + ' ' + this.setSize.img_height });
                },
                //获取left值
                getLeft: function (node) {
                    var left = $(node).offset().left;
                    return left;
                }
            };
            //在插件中使用slideVerify对象
            $.fn.slideVerify = function (options, callbacks) {
                var slide = new Slide(this, options);
                slide.init();
            };

        })(jQuery, window, document);
    </script>
</body>

</html>
3、css代码
/*常规验证码*/
.verify-code {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 5px;
    border: 1px solid #ddd;
}

.cerify-code-panel {
    height:100%;
    overflow:hidden;
}

.verify-code-area {
    float:left;
}

.verify-input-area {
    float: left;
    width: 60%;
    padding-right: 10px;
    
}

.verify-change-area {
    line-height: 30px;
    float: left;
}

.varify-input-code {
    display:inline-block; 
    width: 100%;
    height: 25px;
}

.verify-change-code {
    color: #337AB7;
    cursor: pointer;
}

.verify-btn {
    width: 200px;
    height: 30px;
    background-color: #337AB7;
    color:#FFFFFF;
    border:none;
    margin-top: 10px;
}

/*滑动验证码*/
.verify-bar-area {
    position: relative;
    background: #FFFFFF;
    text-align: center;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
}
 
.verify-bar-area .verify-move-block {
    position: absolute;
    top: 0px;
    left: 0;
    background: #fff;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    box-shadow: 0 0 2px #888888;
    -webkit-border-radius: 1px;
}

.verify-bar-area .verify-move-block:hover {
    background-color: #1991fa;
    color: #FFFFFF;
}

.verify-bar-area .verify-left-bar {
    position: absolute;
    top: -1px;
    left: -1px;
    background: #f0fff0;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ddd;
}

.verify-img-panel {
    margin:0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #ddd;
    border-radius: 3px;
    position: relative;
    display: none;
    position: absolute;
    top: -207px;
    z-index: 2;
}

.verify-img-panel .verify-refresh {
    width: 25px;
    height: 25px;
    text-align:center;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    top: -6px;
    right: 9px;
    z-index: 2;
}

.verify-img-panel .icon-refresh {
    font-size: 20px;
    color: #fff;
}

.verify-img-panel .verify-gap {
    background-color: #fff;
    position: relative;
    z-index: 2;
    border:1px solid #fff;
}

.verify-bar-area .verify-move-block .verify-sub-block {
    position: absolute;
    text-align: center;
    z-index: 3;
    border: 1px solid #fff;
    display: none;
}

.verify-bar-area .verify-move-block .verify-icon {
    font-size: 18px;
    display: none;
}

.verify-bar-area .verify-msg {
    z-index : 3;
}

/*字体图标的css*/
@font-face {font-family: "iconfont";
  src: url('./fontsiconfont.eot?t=1508229193188'); /* IE9*/
  src: url('./fontsiconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('./fontsiconfont.ttf?t=1508229193188') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./fontsiconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-check:before { content: "\e645"; }

.icon-close:before { content: "\e646"; }

.icon-right:before { content: "\e6a3"; }

.icon-refresh:before { content: "\e6a4"; }

ps：此插件可运用到基于任何库的项目中，我已经在react项目中使用了此插件，效果一样。

-前端-小傻狗-
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
javaweb项目源码网络购物中心项目源码.zip
04-01
5. **前端技术**：项目的视图层可能使用HTML、CSS和JavaScript来构建，可能结合了Bootstrap、jQuery等前端库，以及Vue.js或React.js等现代前端框架，用于提升用户体验和交互性。 6. **安全控制**：在用户登录、注册...
纯前端验证码插件
11-28
纯前端验证码插件：包含普通验证码、算术验证码、普通滑动验证码、带图片滑动验证码、点选验证码等
开源推荐：react-native-sms-verifycode——高效验证码输入组件
gitblog_00091的博客
06-18 297
开源推荐：react-native-sms-verifycode——高效验证码输入组件 项目地址:https://gitcode.com/shixiaoquan/react-native-sms-verifycode 验证码是应用中常见的安全验证手段之一，尤其是在登录或注册场景下，其重要性不言而喻。一个好的验证码输入体验不仅能够提升用户体验，还能增加应用程序的安全性和专业度。今天我们要向大家推荐的...
Vue项目开发中一些常见问题
团长的博客
10-11 9371
问题汇总 问题:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ npm install -g cnpm --registry=https://registry.npm.taobao.org // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些 y...
前端知识体系1：【css/js/vue/es6/手写/安全/优化】
weixin_39818813的博客
01-03 780
vue 2升级vue3 1.升级依赖 cnpm install vue@next vue-loader@next @vue/compiler-sfc vue-style-loader -S 2.修改不兼容代码
前端组件/库打包利器rollup使用与配置实战
奇舞周刊
02-15 5734
目前主流的前端框架vue和react都采用rollup来打包，为了探索rollup的奥妙，接下来就让我们一步步来探索，并基于rollup搭建一个库打包脚手架，来发布自己的库和组件。前言写r...
Vue中 实现国际化
明天也要努力的博客
06-12 849
1. 前言 前端框架无数，其中几种热门的框架都有相匹配的国际化插件工具，如下： vue + vue-i18n angular + angular-translate react + react-intl jquery + jquery.i18n.property 2. 国际化实现 2.1 安装插件 首先在项目中安装 vue-i18n 依赖包，这里使用NPM进行安装，如果没有科学上网请使用CNPM进行安装。 npm install vue-i18n --save-dev 2.2 引入 vue-i18
Vue和React对比
weixin_33809981的博客
08-23 106
Vue和React对比 Vue也已经升级到2.0版本了，到现在为止（2016/11/19）比较流行的MVVM框架有AngularJS（也有人认为其为MVC）、ReactJS和VueJS，这三个框架中，以我现在的情况来说（AngularJS2还没有去接触），ReactJS和VueJS的对比应该是比较适合的，感觉这哥俩就是好基友，不管是单向数据流、组件化思想、还是构建大型应用的路由和状态管理都有...
前端开发应知网站(强烈推荐)
热门推荐
吴小迪的博客
03-31 12万+
作为一名前端开发者（所有程序员）最起码遇到bug就算不会解决也应该会搜解决问题的答案。 一般笔者会先在百度搜（关键词一定要输入正确） 如果没搜到会再去bing里面看看 还没有的话就去github的Issues里面再看看 如果还不行就只能自己去看官方文档然后自己研究了。 只是知道搜解决问题的方法这是最基础的，遇到问题才会去想办法解决，而作为一名...
vue 官方推荐的好用的三方库
taotaobaobei的博客
12-31 3万+
自述文件 非常棒的存储库徽标 很棒的Vue.js 太棒了 与Vue.js相关的精彩内容精选清单 资源资源 官方资源 外部资源 工作门户 社区 会议活动 播客 YouTube频道 官方例子 讲解 例子 图书 博客文章 培训班 纪录片 使用Vue.js的项目 开源的 商业产品 应用/网站 互动体验 企业用途 A11y 组件和库 UI组件 表 通知 装载机 进度条 工具提示 覆盖 视差 图示 选框 菜单 减号加输入 轮播 图表 时间 日历 地图 音频视频 无限滚动 拉到刷新 降价促销 PDF格式 树 图形
【圣诞树源码】积分资源
04-02
开发者可能使用了像jQuery这样的库来简化DOM操作，或者利用现代框架如React或Vue来构建更复杂的用户界面。 2. **动态效果**：为了让圣诞树更具吸引力，可能会用到CSS3的动画效果，比如过渡和关键帧动画，让灯光闪烁...
PHP音乐管理系统源码
06-04
JavaScript库如JQuery或现代框架如React、Vue.js可用于构建播放器。 7. **权限控制与认证**：系统应具备用户注册、登录功能，并实现权限控制，如管理员与普通用户的差异化访问。了解session和cookie机制以及如何...
jQuery移动端输入数字跳格特效代码
03-20
在移动设备上，用户输入数字时，为了提升用户体验，经常需要用到一种输入数字跳格的特效。...在实际应用中，还可以考虑使用更现代的技术，如React、Vue等前端框架，结合jQuery的插件，来构建更为复杂的移动端输入组件。
AJAX 验证码
05-22
**AJAX 验证码技术详解** ...在实际项目中，可以根据需求选择合适的实现方式，如使用插件库（如jQuery）、前端框架（如React、Vue）或自定义实现。重要的是要确保验证流程的稳定性和安全性，避免验证码被绕过或滥用。
九-react面试
m0_49225338的博客
09-02 1031
面试题 公司经验 与后端沟通配合 前后端都要充分了解项目的需求 后端只提供能力（如数据库能力、消息能力、应用协同能力等等） 前端组织业务（如组织Auth、组织数据POST/GET/DELETE） 接口设计（出接口文档），前后端沟通设计接口，前端需要后台返回什么样的数据（格式），后台需要前端传递什么参数（哪些参数是必须的，哪些参数是可选的，采用get还是post，哪些数据需要前端先进行校验，哪些需要双方都校验）。共同制定出整个程序所有的接口说明，形成文档。前后台按照约定好的接口进行开发 项目遇到了的难点及解决
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 650
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 79
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
2024前端面试必备：HTML5/CSS3/JS/TS/Vue/React兼容与样式深度解析
"这篇资料是2024年的前端面试题总结，涵盖了HTML5、CSS3、JavaScript、TypeScript4、Vue和React18等重要技术领域的知识点，旨在帮助求职者准备面试。" **HTML5** HTML5是现代网页开发的基础，它引入了许多新的标签...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值