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 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
mongodb和php的用法详解
2019/03/25 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
jquery实现submit提交表单
2015/02/03 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python交互界面的退出方法
2019/02/16 Python
python 伯努利分布详解
2020/02/25 Python
护理专业毕业生推荐信
2013/10/31 职场文书
银行实习生的自我评价
2014/01/13 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
教师考察材料范文
2014/06/03 职场文书
课外科技活动总结
2014/08/27 职场文书
三严三实对照检查材料
2014/09/22 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫