精华内容
下载资源
问答
  • 之前写了一篇博文,题目是《JavaScript实现拖动滑块验证》,里面都是用最简单的方式实现的。后来,群里大神推荐了一款unlock.js插件,称作幻灯片解锁插件。在这里附上它的github地址:...

    Write By Monkeyfly

    以下内容均为原创,如需转载请注明出处。

    前提

    • 之前写了一篇博文,题目是《JavaScript实现拖动滑块验证》,里面都是用最简单的方式实现的。后来,群里大神推荐了一款unlock.js插件,称作幻灯片解锁插件。在这里附上它的github地址:https://github.com/menthe/unlock.js
    • 在看了它内部的实现之后,虽然没完全看懂哈,但是基本功能都看的差不多了。然后就根据它的底层实现,自己学着将之前写的代码进行了封装,相当于进阶版
    • 做法:先根据需求定义好自己要用到的一些方法;其次将所有方法按照逻辑思维都依次罗列出来,先不填充方法体;然后根据需要互相调用方法;最后再根据要实现的功能填充之前定义好的方法。
    • 说实话,封装之后的代码看起来思路更加明确,代码层次清晰可见,不会将冗余的代码都放在一个function中包裹起来。同时也减少了代码复用,提高代码的利用效率。这是自己最直观的感受。
    • 刚开始尝试封装方法的时候,举步维艰,花费了很多时间,不过最终还是成功了。
    • 自己分析了一下,主要原因还是:思路不清晰;不懂得如何去封装;没有一个完整的逻辑思维结构;技术掌握不熟练

    注意:在这里首次尝试了字体图标iconfont的使用,如果没有字体文件(即iconfont.css)滑块上的样式就不会显示。

    引用方法:<link rel="stylesheet" href="font/iconfont.css">

    使用位置:滑块中的图标样式,即<i><i>标签

    使用方法:iconfont字体图标的使用方法–超简单!(点击链接查看)

    建议:

    • iconfont-阿里巴巴矢量图标库 中找到自己想要的字体图标,整合一下然后引入到自己的页面中就行。
    • <i><i>标签替换成 html中符号对应的字符转义详情查看这里
    • 移除掉<i><i>标签,将滑块的背景设置成一个base64格式加密过的图片或普通格式的图片。

    (优点:相比普通图片,占用资源少;缺点:图片对应的代码太长了)

    另外,在这里附上一个base64格式加密后的图片样式的使用方法:(可以自己尝试着使用)

    //其实这个图片显示的内容就是"<<"符号。
    .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;
            background-size: 13px;//不设置这个属性,背景图片会不成比例的显示
            border: 1px solid #ccc;
            cursor: move;
    }

    使用后的效果1:
    这里写图片描述

    使用后的效果2:
    这里写图片描述

    源码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滑块解锁封装js方法</title>
        <!--注:这里首次用到了iconfont的语法,即矢量图标-->
        <link rel="stylesheet" href="font/iconfont.css">
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                position: relative;
                width: 300px;
                height: 40px;
                margin: 0 auto;
                margin-top: 10px; 
                background-color: #e8e8e8;
                box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
            }
            .bgColor{
                position: absolute;
                left:0;
                top:0;
                width:40px;
                height: 40px;
                background-color: lightblue;
            }
            .txt{
                position: absolute;
                width: 100%;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #000;
                text-align: center;
            }
            .slider{
                position: absolute;
                left:0;
                top:0;
                width: 50px;
                height: 38px;
                border: 1px solid #ccc;
                background: #fff;
                text-align: center;
                cursor: move;
            }
            .slider>i{
                position: absolute;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
            }
            .slider.active>i{
                color:green;
            }
        </style>
    </head>
    <body>
        <div id="box" onselectstart="return false;">
            <div class="bgColor"></div>
            <div class="txt" >滑动解锁</div>
            <!--给i标签添加上相应字体图标的类名即可-->
            <div class="slider"><i class="iconfont icon-double-right"></i></div>
        </div>  
        <script>
            //一、定义了一个获取元素的方法
            function getEle(selector){
                return document.querySelector(selector);
            }
            //二、获取到需要用到的DOM元素
            var box = getEle("#box"),//容器
                bgColor = getEle(".bgColor"),//背景色
                txt = getEle(".txt"),//文本
                slider = getEle(".slider"),//滑块
                icon = getEle(".slider>i"),
                successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离
                downX,//用于存放鼠标按下时的位置
                isSuccess = false;//是否解锁成功的标志,默认不成功
    
            //三、给滑块添加鼠标按下事件
            slider.onmousedown = mousedownHandler;
    
            //3.1鼠标按下事件的方法实现
            function mousedownHandler(e){
                bgColor.style.transition = "";
                slider.style.transition = "";
                var e = e || window.event || e.which;
                downX = e.clientX;
                //在鼠标按下时,分别给鼠标添加移动和松开事件
                document.onmousemove = mousemoveHandler;
                document.onmouseup = mouseupHandler;
            };
    
            //四、定义一个获取鼠标当前需要移动多少距离的方法
            function getOffsetX(offset,min,max){
                if(offset < min){
                    offset = min;
                }else if(offset > max){
                    offset = max;
                }
                return offset;
            }
    
            //3.1.1鼠标移动事件的方法实现
            function mousemoveHandler(e){
                var e = e || window.event || e.which;
                var moveX = e.clientX;
                var offsetX = getOffsetX(moveX - downX,0,successMoveDistance);
                bgColor.style.width = offsetX + "px";
                slider.style.left = offsetX + "px";
    
                if(offsetX == successMoveDistance){
                    success();
                }
                //如果不设置滑块滑动时会出现问题(目前还不知道为什么)
                e.preventDefault();
            };
    
            //3.1.2鼠标松开事件的方法实现
            function mouseupHandler(e){
                if(!isSuccess){
                    bgColor.style.width = 0 + "px";
                    slider.style.left = 0 + "px";
                    bgColor.style.transition = "width 0.8s linear";
                    slider.style.transition = "left 0.8s linear";
                }
                document.onmousemove = null;
                document.onmouseup = null;
            };
    
            //五、定义一个滑块解锁成功的方法
            function success(){
                isSuccess = true;
                txt.innerHTML = "解锁成功";
                bgColor.style.backgroundColor ="lightgreen";
                slider.className = "slider active";
                icon.className = "iconfont icon-xuanzhong";
                //滑动成功时,移除鼠标按下事件和鼠标移动事件
                slider.onmousedown = null;
                document.onmousemove = null;
            };
        </script>
    </body>
    </html>

    动态效果展示:
    这里写图片描述

    展开全文
  • Win7实现快速启动栏并实现靠左边的终极操作方法解决)! 1、右击任务栏空白处(别点图标) ----- 工具栏 ----- 新建工具栏 ----- %userprofile%\AppData\Roaming\Microsoft\Internet Explorer\Quick ...

    Win7实现快速启动栏并实现靠左边的终极操作方法(已解决)!


    1、右击任务栏空白处(别点图标) ----- 工具栏  ----- 新建工具栏 ----- %userprofile%\AppData\Roaming\Microsoft\Internet Explorer\Quick Launch

    2、 右键Quick Launch,把显示文本和显示标题的勾去掉。

    3、右击任务栏空白处(别点图标)选属性,把锁定任务栏的勾去掉,在【任务栏按钮】中选择【始终合并,隐藏标签】(这太关键了!)

    4、呵!呵!可以拖动了吧!

    展开全文
  • 图片验证码的实现方法

    万次阅读 2019-06-17 12:45:58
    图片验证码是我们日常经常用到的,本文将介绍如何实现以及其原理,并没有过多注重css样式(有些简陋)。 实现 主要是利用canvas画布加上随机字母,以及适当的旋转,移动,颜色。这一块主要利用的是css3的内容。 ...

    前言

    图片验证码是我们日常经常用到的,本文将介绍如何实现以及其原理,并没有过多注重css样式(有些简陋)。如果对滑块验证码感兴趣的可以看这篇文章:滑块验证码实现及原理
    在这里插入图片描述

    实现

    主要是利用canvas画布加上随机字母,以及适当的旋转,移动,颜色。这一块主要利用的是css3的内容。

    对于代码看不懂的可以看注释,注释标注的很详细。

    <!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>图片验证码</title>
    </head>
    
    <body>
        <canvas id="canvas" width="120" height="40"></canvas>
        <input type="text" id="text">
        <input type="button" value="提交" id="bt">
        <script>
            var canvas = document.getElementById("canvas");//演员
            var context = canvas.getContext("2d");//舞台,getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
            var button = document.getElementById("bt");//获取按钮
            var input = document.getElementById("text");//获取输入框
            draw();
            canvas.onclick = function () {
                context.clearRect(0, 0, 120, 40);//在给定的矩形内清除指定的像素
                draw();
            }
            // 随机颜色函数
            function getColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
            function draw() {
                context.strokeRect(0, 0, 120, 40);//绘制矩形(无填充)
                var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
                // 绘制字母
                var arr = [] //定义一个数组用来接收产生的随机数
                var num //定义容器接收验证码
                for (var i = 0; i < 4; i++) {
                    var x = 20 + i * 20;//每个字母之间间隔20
                    var y = 20 + 10 * Math.random();//y轴方向位置为20-30随机
                    var index = Math.floor(Math.random() * aCode.length);//随机索引值
                    var txt = aCode[index];
                    context.font = "bold 20px 微软雅黑";//设置或返回文本内容的当前字体属性
                    context.fillStyle=getColor();//设置或返回用于填充绘画的颜色、渐变或模式,随机
                    context.translate(x,y);//重新映射画布上的 (0,0) 位置,字母不可以旋转移动,所以移动容器
                    var deg=90*Math.random()*Math.PI/180;//0-90度随机旋转
                    context.rotate(deg);// 	旋转当前绘图
                    context.fillText(txt, 0, 0);//在画布上绘制“被填充的”文本
                    context.rotate(-deg);//将画布旋转回初始状态
                    context.translate(-x,-y);//将画布移动回初始状态
                    arr[i] = txt //接收产生的随机数
                }
                num = arr[0] + arr[1] + arr[2] + arr[3] //将产生的验证码放入num
                // 绘制干扰线条
                for (var i = 0; i < 8; i++) {
                    context.beginPath();//起始一条路径,或重置当前路径
                    context.moveTo(Math.random() * 120, Math.random() * 40);//把路径移动到画布中的随机点,不创建线条
                    context.lineTo(Math.random() * 120, Math.random() * 40);//添加一个新点,然后在画布中创建从该点到最后指定点的线条
                    context.strokeStyle=getColor();//随机线条颜色
                    context.stroke();// 	绘制已定义的路径
                }
                // 绘制干扰点,和上述步骤一样,此处用长度为1的线代替点
                for (var i = 0; i < 20; i++) {
                    context.beginPath();
                    var x = Math.random() * 120;
                    var y = Math.random() * 40;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.strokeStyle=getColor();
                    context.stroke();
                }
    
                //点击按钮验证
                button.onclick = function () { 
                var text = input.value //获取输入框的值
                if (text === num) {
                    alert('验证通过')
                } else {
                    alert('验证失败')
                }
             }
                
            }
    
        </script>
    </body>
    
    </html>
    

    效果图

    在这里插入图片描述

    展开全文
  • idea如何实现实现方法快捷键(1)

    万次阅读 多人点赞 2019-01-07 16:54:38
    1、鼠标放在类的名称上,按住Alt+Enter键,如下图: 2、如下图:选择 【Implement methods】 3、如下图:全选,点击【ok】 4、如下图:已实现 实现类中的所有方法 ...

    1、鼠标放在类的名称上,按住Alt+Enter键,如下图:在这里插入图片描述
    2、如下图:选择 【Implement methods】
    在这里插入图片描述
    3、如下图:全选,点击【ok】
    在这里插入图片描述
    4、如下图:已实现 实现类中的所有方法
    在这里插入图片描述

    展开全文
  • Ajax是什么?及实现步骤和原理

    万次阅读 多人点赞 2018-07-05 22:00:38
    一、什么是Ajax? Ajax = 异步 JavaScript 和XML。 Ajax是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,...
  • 查找接口的实现类: IDEA 风格 ctrl + alt +B IDEA快速实现接口快捷方式 ...Ctrl + O 查看我们继承的类或者接口中的方法,以及我们要实现方法 Ctrl + Alt + b 查看接口实现类中方法(就是我们使用接...
  • 数据类型也只用到了String(五种基本数据类型:String、List、Hash、Set、ZSet),这篇文章写我怎么用Redis实现排行榜和钉钉消息读未读功能。 Redis客户端选型 了解过的小伙伴应该知道,我前面一篇文章也提到...
  • 蒙特卡洛方法 matlab 实现

    万次阅读 2015-01-28 18:29:43
    蒙特卡洛方法 matlab 实现 有 12594 次阅读 2010-10-22 14:12 |个人分类:MATLAB|系统分类:科研笔记|关键词:蒙特卡洛方法 matlab 蒙特卡罗(Monte Carlo)方法,也称为计算机随机模拟方法,是一种基于"随机数...
  • Mongodb自增id实现方法

    千次阅读 2016-10-27 07:05:23
    这篇文章主要介绍了Mongodb自增id实现方法,分析了MongoDB数据库自增ID的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了Mongodb自增id实现方法。分享给大家供大家参考,具体如下:...
  • 在C#里怎么重写已实现的接口

    千次阅读 2014-12-27 09:28:31
    本文通过虚拟函数来实现接口在继承类里的重写。实现语言为C#。 通常如果我们定义了一个接口如下: interface IMyInterface {  void Foo(int i); } 然后我们在类Base里实现了此接口,如下: ...
  • 本文将来讲解一下一种常见的线性数据结构—链表,因为链表和数组一样都是一种线性的数据结构,但是它俩的实现原理是完全不同的,所以在讲解链表之前,我们来回顾一下 数组 结构。
  • 具体实现方法麻烦点,需要在程序里调用 AT指令,这里不详述了,有兴趣的可以去找(也许还有别的办法). 看到这里,你可能已经想到了, 要把来电转移到哪个号码上才能实现--“电话关机”,“此号码停机”,“号码不存在”...
  • 集合这个概念应该大家在学习数学的时候都听过并且有学习过,它也是一种数据结构,我们还是需要用代码来实现集合的很多方法。 学习过ES6语法的小伙伴应该知道,ES6新增了一种 Set 数据结构,这就是集合,尽管官方已经...
  • 软件实现方法的思想:在进入区设置并检查一些标志 来标明是否有进程在临界区中,若有进程在临界区,则在进入区通过循环检查进行等待,进程离开临界区后则在退出区修改标志。入区通过循环检查进行等待,进程离开临界...
  • (2)实现addVertex()方法 (3)实现addEdge()方法 (4)实现toString()方法 (5)实现initColor()方法(内部方法) (6)实现breadthFirstSearch()方法 (7)实现depthFirstSearch()方法 七、结束语 一、什么是图...
  • 接口是否可以有实现方法

    万次阅读 多人点赞 2016-06-25 13:32:22
    首先看到这个标题,我想很多跟我一样的初学者是蒙B的,毕竟百度百科对Java接口是这么定义的:Java接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法实现,因此这些方法可以在不同的...
  • Java总结 多态和实现方法

    万次阅读 多人点赞 2018-08-27 15:19:41
    什么是多态? 概念:同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果,这就是多态性。 简单的说:就是用基类的引用指向子类的对象。 举个例子: 电脑上的F1按键,当不打开任何文件点击F!显示...
  • 栈结构是一种非常常见的数据结构,并且在很多场景下也被用到。其实栈结构跟数组结构很像,只是在数组的基础...数据结构——栈一、什么是栈二、栈结构的方法三、用代码实现一个栈结构(1)创建一个构造函数(2)实现push
  • PHP+Ajax 异步通讯实现用户名邮箱验证是否注册PHP+Ajax 异步通讯实现用户名邮箱验证是否注册
  • 队列结构也是平时非常常见的一种受限的线性数据结构。它跟栈结构一样都是受限的数据结构,区别就是...数据结构——队列一、什么是队列二、队列结构的方法三、用代码实现一个队列结构(1)创建一个构造函数(2)实现enq
  • 上一篇文章讲解了链表的相关知识,并用代码实现了一个链表结构。那么本文将介绍一下另一种特殊的链表结构,叫做 双向链表。 顾名思义,普通的链表都是从 head 开始往后遍历...数据结构——双向链表一、什么是双向链表二
  • InnoDB---读提交隔离级别的实现

    千次阅读 2017-04-19 14:18:44
    对于读提交隔离级别的实现方式,从逻辑上需要明确两个部分,一是加锁部分二是解锁部分。加锁,对应的是获取数据,确保在指定的隔离级别下读取到应该读到的数据。解锁则意味着要在适当的时机释放锁且不影响隔离级别...
  • (6)实现isEmpty()方法 (7)实现size()方法 (8)实现resize()方法 (9)实现isPrime()方法 (10)实现toPrime()方法 (11)给put()方法增加扩容功能 (12)给del()方法增加减容功能 七、结束语 一、什么是哈希表 ...
  • 系统消息推送读未读实现想法

    千次阅读 2020-04-09 18:09:02
    1.暴力一点方法是,反正通知表里有用户所有的消息,直接读取完,然后通过是否读字段就能够找到正确的所有未读消息了,这..这么简单吗? 2.其实有思考过使用时间或者另建一张保存有最新读到哪条消息的表,但...
  • 实现Java阻塞有哪些方法

    千次阅读 2019-01-22 16:47:25
    如果线程遇到了IO阻塞,无能为力,因为IO是操作系统实现的,Java代码并没有办法直接接触到操作系统。以下是详细的唤醒方法: 1. sleep() 方法 sleep(毫秒),指定以毫秒为单位的时间,使线程在该时间内进入线程阻塞...
  •   在学习《大话设计模式》的时候经常会遇到多态,但什么是多态?为什么要使用多态?什么时候用多塔?多态是如何实现的?使用多态有什么好处?我们将根据以上五个问题展开激烈的讨论。 什么是多态?   多态,...
  • 基于移动终端的增强现实技术方案(已实现

    千次阅读 热门讨论 2014-07-13 12:09:22
    本人在研究生学习期间...现简单介绍本系统实现的过程,仅供参考: 系统的主要框架如下: 系统的主要模块如下: 由于考虑到图像处理算法即注册算法模块比较复杂,耗时且运行效率低。因此将该模块的实现置于Native
  • Android悬浮窗的实现

    万次阅读 多人点赞 2018-05-31 17:19:27
    *本篇文章授权微信公众号 guolin_blog (郭霖)独家发布 现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现...
  • Android 8.1 系统多网口实现方法 分享一篇本人专利技术,提交申请,转发请备注,谢谢! 软件开发交流群 基于 Android 8.1 系统下 Ethernet 多网口动态获取 IP ,设置 IP 功能的实现方法,通过修改 Android 8.1 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,855,599
精华内容 742,239
关键字:

已实现的方法是什么