// 点击切换图形验证码 页面加载完后执行,类似window.onload
$(function () {
var imgCaptcha = $(".img-captcha");
imgCaptcha.click(function () {
imgCaptcha.attr("src", "/account/register/img/captcha"+"?random="+Math.random());
});
}); // 点击发送短信验证码
$(function () {
var smsCaptcha=$('.short-captcha'); // 获取点击的标签
function send_sms() {
var telephone = $('input[name="telephone"]').val(); // 获取input标签name='telephone',用户输入的手机号码
$.get({
'url': '/account/register/sms/captcha/', // 请求url并传data数据给后端(django)request.GET.get("telephone")
'data': {"telephone": telephone},
'success': function () {
var count=30;
smsCaptcha.unbind("click"); // 点击一次后,取消点击事件
smsCaptcha.addClass("disabled"); // 点击后增加classname,改变样式
var timer=setInterval(function () {
smsCaptcha.text(count);
count--;
if (count<0){
clearInterval(timer);
smsCaptcha.removeClass("disabled");
smsCaptcha.text("发送短信验证码");
// 时间到了,再次绑定点击事件
// smsCaptcha.click(send_sms); // 第二回点击,快速点击能够请求三次,发三条短信??
smsCaptcha.one("click", send_sms) // 触发一次click事件,每次只发一次短信
}
},1000);
},
'fail': function () {
alert('error')
}
})
}
// smsCaptcha.click(send_sms); // 第一回,就算连续点击只能点击一次,发一条短信
smsCaptcha.one("click", send_sms) // one(event, function), it's safe to use this way.
});

 切换active类

$(function () {
// http://127.0.0.1:8000/path/path1/?xx=xxx
var url1 = window.location.href;
// http://127.0.0.1:8000/path/path1/
var url = url1.split('?')[0];
// http:
var protocol = window.location.protocol;
// 127.0.0.1:8000
var host = window.location.host;
// http://127.0.0.1:8000
var domain = protocol + '//' + host;
// /path/path1/
var path = url.replace(domain,'');
var menuLis = $(".menu li"); // li列表
for(var index=0;index<menuLis.length;index++){
var li = $(menuLis[index]);
var a = li.children("a");
var href1 = a.attr('href'); // /path/path1/?xx=xxx
var href = href1.split('?')[0]; // /path/path1/
if(href === path){ // 浏览器url和a标签url比较,相同则表示设置为选中 active
li.addClass('active');
}
}
});

JQ-用户注册用到的图形验证码,短信验证码点击事件,切换active类的更多相关文章

  1. 云片-语音验证码--短信验证码 - PHP接口

    ///////////////////////语音验证///////////////////////////// /**  * 发送短信(语音验证码)云片语音服务  * @param  $apikey ...

  2. Android EditText方框验证码 短信验证码攻略

    本文由xiawe_i提供. xiawe_i的博客地址是: http://www.jianshu.com/u/fa9f03a240c6 项目中有这样一个需求: 验证码页是四个方框,输入验证码方框颜色改变 ...

  3. Android EditText方框验证码 短信验证码的实现

    package com.loaderman.securitycodedemo; import android.graphics.Color; import android.support.v7.app ...

  4. day101:MoFang:模型构造器ModelSchema&注册功能之手机号唯一验证/保存用户注册信息/发送短信验证码

    目录 1.模型构造器:ModelSchema 1.SQLAlchemySchema 2.SQLAlchemyAutoSchema 2.注册功能基本实现 1.关于手机号码的唯一性验证 2.保存用户注册信 ...

  5. Django商城项目笔记No.5用户部分-注册接口-短信验证码

    Django商城项目笔记No.4用户部分-注册接口-短信验证码 短信验证码也保存在redis里(sms_code_15101234567) 在views中新增SMSCodeView类视图,并且写出步骤 ...

  6. Atitit. 破解  拦截 绕过 网站 手机 短信 验证码  方式 v2 attilax 总结

    Atitit. 破解  拦截 绕过 网站 手机 短信 验证码  方式 v2 attilax 总结 1. 验证码的前世今生11.1. 第一代验证码 图片验证码11.2. 第二代验证码  用户操作 ,比如 ...

  7. 一百一十九:CMS系统之将短信验证码和图形验证码放到memcached缓存中

    将两个验证码的视图都放到common蓝图下 from flask import Blueprint, request, make_responsefrom exts import alidayufro ...

  8. 四:java调接口实现发送手机短信验证码功能

    1.点击获取验证码之前的样式: 2.输入正确的手机号后点击获取验证码之后的样式: 3.如果手机号已经被注册的样式: 4.如果一个手机号一天发送超过3次就提示不能发送: 二:前台的注册页面的代码:reg ...

  9. Laravel5中使用阿里大于(鱼)发送短信验证码

    在做用户注册和个人中心的安全管理时,我实现借助第三方短信平台(阿里大于(鱼))在Laravel框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...

随机推荐

  1. 批量解帧视频文件cpp

    前言 将多个视频文件进行解帧. 实现过程 1.批量获取文件路径: 2.对某个视频文件进行解帧: 代码 /************************************************ ...

  2. chapter02 svm对手写体数字的数码图像进行识别

    #coding=utf8 # 从sklearn.datasets里导入手写体数字加载器. from sklearn.datasets import load_digits # 从sklearn.cro ...

  3. Fzu软工第一次作业-准备篇

    (0)一些想说的话 我叫陈浩,是16级计算机一个很普通的学生.我是补选选软工实践这门课的.选软工实践这门课我想了很久.因为学长学姐告诉我这是一门很锻炼人又很辛苦的课程,需要大量的时间和精力.然而如今的 ...

  4. 数据库表结构转成设计书,PowerDesigner 表格导出为excel

    数据库中的表导入到PowerDesigner中并转为excel文档 1.打开PowerDesigner12,在菜单中按照如下方式进行操作 file->Reverse Engineer->D ...

  5. 保存csv时, 不保留index

    pd.to_csv('your.csv', index=False)

  6. signal()信号操作

    一.函数描述 #include <signal.h> typedef void (*sighandler_t)(int);sighandler_t signal(int signum, s ...

  7. 解决 php提交表单到当前页面,刷新会重复提交 的问题

    http://blog.csdn.net/u012466451/article/details/68952280

  8. FastAdmin 教程草稿大纲

    FastAdmin 教程草稿大纲 计划 FastAdmin 教程大纲 FastAdmin 环境搭建 phpStudy 2018 安装 一键 CRUD 教程 环境变量配置 环境安装 命令行安装 列出所需 ...

  9. 【转】每天一个linux命令(45):free 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/25/2831814.html free命令可以显示Linux系统中空闲的.已用的物理内存及swap ...

  10. 后台调用前台JS(查看客户端IE版本)

    1.前端代码    </form>    //注意放在form下面<script>    function readRegedit() {        var obj = n ...