jquery图形密码实现方法


Posted in Javascript onMarch 11, 2015

本文实例讲述了jquery图形密码实现方法。分享给大家供大家参考。具体实现方法如下:

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    var n=0,y=['4','8','12','13','14','15','16'];

    for(var i=1;i<=16;i++){

        var Box='<span id="box_'+i+'" class="box" num="0"></span>';

        $('#lower').append(Box);

        if(i<=4){

            $('#box_'+i+'').animate({left:100*i-100+"px"}, 0)

                           .show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"300px"}, 800).attr("num",i);

        }else if(i<=8){

            $('#box_'+i+'').animate({left:100*i-500+"px"}, 0)

                           .show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"200px"}, 800).attr("num",i);

        }else if(i<=12){

            $('#box_'+i+'').animate({left:100*i-900+"px"}, 0)

                           .show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"100px"}, 800).attr("num",i);

        }else{

            $('#box_'+i+'').animate({left:100*i-1300+"px"}, 0)

                           .show(0).delay(i*400-400).animate({width:"90px",height:"90px",top:"0px"}, 800).attr("num",i);

        }

    };

    $('#lower span').bind("click",function(){

        $(this).addClass("select");

        var code=$(this).attr("num");

        for (var j=0; j<y.length; j++){

            if(code==y[j]){

                y = jQuery.grep(y, function(n, i){

                  return (n != code);

                });

                n=n+1;

            }else{

                n=n+0;

            }

        };

        if($('.select').length==7){

            if(n==7){

                $('#lower').empty().append('<a href="#"></a>');

                $('#lower a').fadeIn(800);

            }else{

                $('#page').delay(1000).append('<div id="tips"><p>密码错了,重来吧!</p></div>');

                $('#tips').slideDown(500).delay(2000).slideUp(500);

                $('#lower span').removeClass("select");

                n=0;

                y=['4','8','12','13','14','15','16'];

            }

        }   

    });

});

</script>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery一句话全选/取消全选
Mar 01 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
详解Vue单元测试case写法
May 24 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 #Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 #Javascript
jQuery实现统计输入文字个数的方法
Mar 11 #Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 #Javascript
jquery实现表格本地排序的方法
Mar 11 #Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 #Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 #Javascript
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
javascript回到顶部特效
2016/07/30 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
详解python算法常用技巧与内置库
2020/10/17 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
优秀学生干部个人事迹材料
2014/06/02 职场文书
转让协议书范本
2014/09/13 职场文书
党员个人总结自评
2015/02/14 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
员工升职自我评价
2019/03/26 职场文书
详解Redis复制原理
2021/06/04 Redis