// 点击切换图形验证码 页面加载完后执行,类似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. sourceinsight - imsoft.cnblogs

    显示空格的问题,options->document options->visible space 前面的对勾去掉就好了 sourceinsight中文显示乱码问题彻底解决办法:http:/ ...

  2. 2017 ECL-FINAL J.Straight Master

    题目链接:http://codeforces.com/gym/101775/problem/J 思路:序列差分一下,然后用得到的查分序列乱搞就可以了 注意差分序列第一项等于a[i],之后n-1项为ch ...

  3. web 常用网址及资源

    一.web教程 w3school在线教程 菜鸟教程 二.学习路线 2017前端学习路线图,内附完整前端自学视频教程+工具经验-黑马程序员技术交流社区 三.工具 盘搜 百度地图 查物流 金山词霸 必应词 ...

  4. day 2 Linux Shell笔记

    ------------------------------------------------------------------- -------------------------------- ...

  5. Select2 用法

    http://www.cnblogs.com/wuhuacong/p/4761637.html 2.这个做详细参考 http://www.jianshu.com/p/c5ab74b91b2e 3.ht ...

  6. apache airflow docker 运行简单试用

    airflow 是一个编排.调度和监控workflow的平台,由Airbnb开源,现在在Apache Software Foundation 孵化. airflow 将workflow编排为tasks ...

  7. revit API 生成墙图元

    由于Revit的版本问题,在网上找的生成墙图元的代码,在我机器上的Revit 2016中编译不能通过,通过多次调试,终于找到在revit 2016中使用API生成墙图元的代码,现在贴出来. 下面的代码 ...

  8. es 之 Symbol

    ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证 ...

  9. Hadoop和云计算

    什么是Hadoop? Hadoop代表的就是基于异步存储(HDFS)的并行计算(Map-Reduce). 首先Hdsf/ Kudu他的存储是分布式的存储,hive(map-reduce).impala ...

  10. Angular 4 延缓加载组件

    1. 创建App ng new lazySample --routing 在app组件中的定义路由 2. 创建“Lazy” Module ng g module lazy --flat ng g co ...