js仿百度贴吧验证码特效实例代码

今天看到有百度验证码挺有意思的，就把它仿下来了。

利用JS实现当选择满4个后自动对比，本文中采用静态对比的方法看你是否全部选择对。然后提示【答案正确！】或【答案错误!】，

以后有空再去做成程序，先分享给大家！

效果图如下：

源代码如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>js仿百度贴吧验证码特效</title> 
    <style> 
    div{margin:0;padding:0;} 
    .com{width:246px;font-size:12px;padding:12px;border:1px solid #ccc;} 
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}

.j_captcha_input{border:1px solid #ccc;}

.val_add b,.input_show span,.val_input a b{background:url(http://images/20140113213606506.png) no-repeat -500px -500px;}

.input_show{height:36px;margin-bottom:5px;} 
    .input_show span{background-position:0 0;display: inline-block;height: 36px;margin-right: 5px;vertical-align: middle;width: 150px;}

.val_add{border:1px solid #CCC;word-break: break-all;margin:0 20px 5px 0;} 
    .val_add b{border-right:1px solid #ddd;height: 34px;width: 45px;float:left;}

.val_add .delete{background:url(http://images/20140113213531521.png) no-repeat 0 0 #ccc;border-right:0 none;cursor:pointer;width: 40px;}

.ation i{font-style:normal;color:#ff0000;}

.val_input{width:190px;margin-top:5px;} 
    .val_input a{display:block;float:left;margin:0 5px 5px 0;width:54px;height:40px;border:1px solid #e0e0e0;border-bottom-color:#bfbfbf;outline:0;background:-ms-linear-gradient(top,#fff,#f5f5f5);background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f5f5f5));background:-moz-linear-gradient(top,#fff,#fafafa);filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#F5F5F5);zoom:1}

.val_input a b{width:54px;height:40px;cursor:pointer;zoom:1;display:block;}

.val_input #v_0{background-position:0 -36px} 
    .val_input #v_1{background-position:-53px -36px}/*-56px -41px;*/ 
    .val_input #v_2{background-position:-97px -36px} 
    .val_input #v_3{background-position:0 -87px} 
    .val_input #v_4{background-position:-53px -87px} 
    .val_input #v_5{background-position:-97px -87px} 
    .val_input #v_6{background-position:0 -133px} 
    .val_input #v_7{background-position:-53px -133px} 
    .val_input #v_8{background-position:-97px -133px} 
    </style> 
    </head> 
    <body> 
    <div class="com"> 
      <div class="val_add clearfix" id="val_add"> 
          <b></b> 
          <b></b> 
          <b></b> 
          <b></b> 
          <b class="delete" title="清除" onclick="dele();"></b> 
      </div> 
      <div class="input_show"><span></span><a>看不清?</a></div> 
      <div class="ation">点击框内文字输入上图中<i>汉字或拼音</i>对应汉字</div> 
      <div class="val_input clearfix" id="val_input"> 
          <a href="javascript:;"><b id="v_0"></b></a> 
          <a href="javascript:;"><b id="v_1"></b></a> 
          <a href="javascript:;"><b id="v_2"></b></a> 
          <a href="javascript:;"><b id="v_3"></b></a> 
          <a href="javascript:;"><b id="v_4"></b></a> 
          <a href="javascript:;"><b id="v_5"></b></a> 
          <a href="javascript:;"><b id="v_6"></b></a> 
          <a href="javascript:;"><b id="v_7"></b></a> 
          <a href="javascript:;"><b id="v_8"></b></a> 
      </div> 
    </div> 
    <script>

function getid(id) { 
        return document.getElementById(id); 
    }

//获取属性样式 
    function getStyle(id,prop){  
        var obj=getid(id); 
        var ie = !+"\v1";//简单判断ie6~8 
        if(prop=="backgroundPosition"){//IE6~8不兼容backgroundPosition写法，识别backgroundPositionX/Y 
            if(ie){      
                return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY; 
            } 
        } 
        if (obj.currentStyle) { 
            return obj.currentStyle[prop];      
        } 
        else if (window.getComputedStyle) { 
            proppropprop = prop.replace (/([A-Z])/g, "-$1");            
            proppropprop = prop.toLowerCase ();      
             return document.defaultView.getComputedStyle (obj,null)[prop];      
        } 
    }

var anslist = ["","","",""];//储存容器 
    var crent="-56px -92px,-100px -138px,-100px -92px,-3px -138px"; //正确答案容器 
    var flag=0;//从第0个开始算起到当到第3个时自动对比答案 
    var adbs=getid("val_add").getElementsByTagName("b"); 
    function addans(va){ 
        for(var i=0;i<anslist.length;i++) 
        { 
            if(anslist[i]=="") 
            {        
                anslist[i]=va; 
                adbs[i].style.cssText="background-position:"+anslist[i]; 
                flag=i; 
                break; 
            } 
        } 
        if(flag==3) 
        { 
            if(anslist==crent) 
            { 
                alert("答案正确!"); 
            } 
            else 
            { 
                alert("答案错误!"); 
                dele(); 
            } 
        } 
    }

//清除原有值 
    function dele(){ 
        flag=0; 
        for(var i=0;i<adbs.length;i++) 
            adbs[i].style.cssText=""; 
        anslist = ["","","",""]; 
    }

//绑定九宫格验证码的点击事件 
    function addEvt(tab,ct,type){ 
        var ctab = getid(tab).getElementsByTagName("b"); 
        //var cdiv = getid(ct).getElementsByTagName(type); 
        for(var i = 0;i<ctab.length;i++) 
        {  
            ctab[i].onclick =function std(){             
                //alert(this.id); 
                var st=getStyle(this.id,"backgroundPosition"); 
                var ststd=st.split(" ");//属性中间的空间作为分隔符如：background-position:215px 215px; getStyle方法取得值是215px 215px; 
                var st1,st2=""; 
                /*-53px -36px,-56px -41px;经对比九宫格与显示选择的答案x差-3，y差-5*/ 
                st1= parseInt(std[0].replace("px"))-3; 
                st2= parseInt(std[1].replace("px"))-5;           
                addans(st1+"px "+st2+"px"); 
            }

} 
    } 
    addEvt("val_input"); 
    </script> 
    </body> 
    </html>

出处:http://www.86y.org/art_detail.aspx?id=682

赞 (0)

相关推荐

  • node.js WEB开发中图片验证码的实现方法

    用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿

  • jsp引用servlet生成的验证码代码演示

    此演示代码主要包括以下三部分:1.checkCode.java:用于生成验证码2.checkCodeServler3.check.jsp 验证 下面是checkCode.java的内容: 复制代码 代码如下: //用于获取四位随机数     private char mapTable[] = {'0','1','2','3','4','5','6','7','8','9'}; //生成验证码,并返回随机生成的数字     public String getEnsure(int width, in

  • Js实现手机发送验证码时按钮延迟操作

    实例代码记录: <script type="text/javascript"> function start_sms_button(obj){ var count = 1 ; var sum = 30; var i = setInterval(function(){ if(count > 10){ obj.attr('disabled',false); obj.val('发送验证码'); clearInterval(i); }else{ obj.val('剩余'+pa

  • JS扩展Z-Blog图片验证码的单击自动刷新与评论内容自动保存

    在script/common.js最后加入下面的话可以实现图片验证码的自动刷新与评论内容自动保存(ForIE) 由于Z-Blog的JS扩展机制不够好,在不重建的情况下扩展东西只能用window.onload(IE). 既然用了window.onload,那就干脆用window.clipboardData了. 大家是不是期盼这两个功能很久了?没有了Ajax的,这两个功能就太重要太重要太重要了. 实际这个函数因为先天缺陷并不完美,下一版,构想在每一页下面加上一句话读一次LoadExtraScript

  • 基于Ajax用户名验证、服务条款加载、验证码生成的实现方法

    基于Ajax用户名验证、服务条款加载、验证码生成的实现方法

     Ajax(asynchronous javascript and xml)异步的javascript和xml. 是为了解决传统的web应用中"发送请求-等待响应"这种模式的弊端,(浏览器在发送完请求后,只能等待服务器的响应,用户不能做其他的操作,浏览器发送完请求,会抛弃整个页面,等待服务器返回新的页面,也就是说,浏览器和服务器之间交互的数据量很大,不能做到按需获取数据)而创建的技术,该技术的本质是:通过一个浏览器内置的一个对象(XmlHttpRequest)异步地向服务器发送请求.

  • JSP彩色验证码的实例代码

    image.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":

  • jsp 生成验证码代码

    调用方法:在jsp页面用图像标签便可以直接调用如下是标签代码<img border=0 src="image.jsp">,只需要把该代码发在验证码要显示的区域就可以了) <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %> <%! public static Strin

  • Jsp生成页面验证码的方法[附代码]

    image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下:  复制代码 代码如下: <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc) { Random ran

  • 实现jsp验证码的简单小例子

    复制代码 代码如下: <%@ page language="java" pageEncoding="gbk"%><%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %><%!Color getRandColor(int fc,int bc){//给定范围

  • js实现发送验证码后的倒计时功能

    之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用 特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=

  • js生成的验证码的实现与技术分析

    分享给大家一段js生成验证码并验证的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

  • JSP彩色验证码

    生成有4个随机数字和杂乱背景的图片,数字和背景颜色会改变,服务器端刷新(用history.go(-1)也会变)原型参考ALIBABA  http://china.alibaba.com/member/showimage 产生验证码图片的文件-----image.jsp <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"

  • js生成验证码并直接在前端判断

    js生成验证码并直接在前端判断 <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定义验证码 var code2; //在全局 定义验证码 function cr

  • picturebox加载图片的三种方法与网站验证码的抓取

    第一种:(此方法比较笨) 在页面上隐藏几个需要改变页面上图片的picturebox,比如下面的picFrom 在需要改变图片的方法处先定义: System.Resources.ResourceManager resources = new System.Resources.ResourceManager(typeof(Form1)); 然后就可以改变了(比如picTo的图片要改变成picFrom的图片) this.picTo.Image = ((System.Drawing.Image)(res

  • js点击文本框后才加载验证码实例代码

    经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title

随机推荐