zoukankan      html  css  js  c++  java
  • 图片验证码

    html:

    <div id="code1">
    <input class="text-input" type="text" name="code1" placeholder="验证码"/>
    <img src="" alt="" class="captcha" onclick="get_captcha();" align="验证码" title="看不清?换一张" style="cursor:pointer;position: absolute;right:0; 85px;height:40px;top:5px;"/>
    </div>
    <div id="next">登录</div>
    JQ:
    //点击登录
    $('#next').click(function(){
      var captcha_code = $('[name = "code1"]').val();
    var captcha_id = $('.captcha').attr('data-id');
    var telphone = $('[name = "telphone"]').val();
    var pwd = $('[name = "pwd"]').val();
    //登录接口
    $.post("/sign",{
    captcha_id:captcha_id,
    captcha_code:captcha_code,
    login: telphone,
    password: pwd,
    web:true //网页登录
    },function(data){
    if(data.status == 200){
    $("#next").css({'background-color':'#3B5999','opacity':'0.5'});
    $("#next").text('载入中...');
    if(parame == 'index'){ //索引
    window.location.href = '/index.html?login='+telphone+'&access_token='+data.data.access_token;
    }
    }
    else{
    alert(data.error);
    }
    })
    //获取验证码图片
    function get_captcha(){
    $.get(
    '/captcha/captchaid',function(data){
    $('.captcha').attr('src','/captcha/captcha?id=' + data.data);
    $('.captcha').attr('data-id',data.data);
    }
    );
    }
  • 相关阅读:
    HTML5存储
    HTML5全局属性和事件
    HTML5媒体(音频/视频)
    HTML5标签canvas制作动画
    HTML5标签canvas图像处理
    开发kendo-ui弹窗组件
    HTML5标签canvas制作平面图
    javascript匿名函数
    Javascript富文本编辑器
    快速排序算法(python版本)
  • 原文地址:https://www.cnblogs.com/mo-cha/p/6210331.html
Copyright © 2011-2022 走看看