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创建div 实现代码
Apr 27 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php查询ip所在地的方法
2014/12/05 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
js运动应用实例解析
2015/12/28 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python树的同构学习笔记
2019/09/14 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python 音频生成器的实现示例
2019/12/24 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
优秀毕业生找工作自荐信
2014/06/23 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
车辆挂靠协议书
2016/03/23 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS