// 点击切换图形验证码 页面加载完后执行,类似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. liunx的磁盘管理的基本命令

    df     查看磁盘占用率 du -sh    查看磁盘多大 sudo fdisk -l   查看硬盘信息 sudo mkfs -t ext3 /dev/sdb1    建立文件系统(相当于格式化) ...

  2. 用户态监控网络接口up、down事件

    网上搜索(https://blog.csdn.net/qq123386926/article/details/50695725)可以直接使用netlink现成的接口实现: #include <s ...

  3. 【MVC】View的使用

    /Views/_ViewStart.cshtml 文件会在其他视图文档被加载之前被载入,代码如下: @{ Layout = "~/Views/Shared/_Layout.cshtml&qu ...

  4. CGI之C语言篇

    为什么要进行CGI编程? 在HTML中,当客户填写了表单,并按下了发送(submit)按钮后,表单的内容被发送到了服务器端,一般的,这时就需要有一个服务器端脚本来对表单的内容进行一些处理,或者是把它们 ...

  5. jquery 1.9里面已经删除了toggle(fn1, fn2)函数:

    jquery 1.9里面已经删除了toggle(fn1, fn2)函数:引用Note: This method signature was deprecated in jQuery 1.8 and r ...

  6. MySQL命令行--导入导出数据库

    MySQL命令行导出数据库:   1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录 如我输入的命令行:cd C:\Program Files\MySQL\MySQL Se ...

  7. FastAdmin 自己做的插件 SQL 有一个表没有生成成功

    群里有群友问: 给插件建的install.sql 里有三个表,为啥会出现安装成功后没有错误提示,只生成了两个表的情况..这可能会是什么...原因 第一感觉和 FastAdmin 没有关系. 没生成表, ...

  8. ActiveMQ消息持久化存储策略

    ActiveMQ的内核是Java编写的,也就是说如果服务端没有Java运行环境ActiveMQ是无法运行的.ActiveMQ启动时,启动脚本使用wrapper包装器来启动JVM.JVM相关的配置信息在 ...

  9. tomcat catalina.out切割脚本

    shell脚本catalina.out 切割脚本...每天23.30切割.删除七天之前的日志这里3个tomcat实例(1)拷贝日志文件(2)清空日志文件*只能清空如果删除tomcat不重启不会生成新的 ...

  10. 日志挖掘(logminer)

    转. 如何使用logminer分析Oracle   联机日志         笔者在工作中经常遇到这样的情况:为了追踪数据的变化,需要知道某个表或者表中的某行数据是什么时候被修改的,以及修改前的内容. ...