JQ-用户注册用到的图形验证码,短信验证码点击事件,切换active类
// 点击切换图形验证码 页面加载完后执行,类似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类的更多相关文章
- 云片-语音验证码--短信验证码 - PHP接口
///////////////////////语音验证///////////////////////////// /** * 发送短信(语音验证码)云片语音服务 * @param $apikey ...
- Android EditText方框验证码 短信验证码攻略
本文由xiawe_i提供. xiawe_i的博客地址是: http://www.jianshu.com/u/fa9f03a240c6 项目中有这样一个需求: 验证码页是四个方框,输入验证码方框颜色改变 ...
- Android EditText方框验证码 短信验证码的实现
package com.loaderman.securitycodedemo; import android.graphics.Color; import android.support.v7.app ...
- day101:MoFang:模型构造器ModelSchema&注册功能之手机号唯一验证/保存用户注册信息/发送短信验证码
目录 1.模型构造器:ModelSchema 1.SQLAlchemySchema 2.SQLAlchemyAutoSchema 2.注册功能基本实现 1.关于手机号码的唯一性验证 2.保存用户注册信 ...
- Django商城项目笔记No.5用户部分-注册接口-短信验证码
Django商城项目笔记No.4用户部分-注册接口-短信验证码 短信验证码也保存在redis里(sms_code_15101234567) 在views中新增SMSCodeView类视图,并且写出步骤 ...
- Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结
Atitit. 破解 拦截 绕过 网站 手机 短信 验证码 方式 v2 attilax 总结 1. 验证码的前世今生11.1. 第一代验证码 图片验证码11.2. 第二代验证码 用户操作 ,比如 ...
- 一百一十九:CMS系统之将短信验证码和图形验证码放到memcached缓存中
将两个验证码的视图都放到common蓝图下 from flask import Blueprint, request, make_responsefrom exts import alidayufro ...
- 四:java调接口实现发送手机短信验证码功能
1.点击获取验证码之前的样式: 2.输入正确的手机号后点击获取验证码之后的样式: 3.如果手机号已经被注册的样式: 4.如果一个手机号一天发送超过3次就提示不能发送: 二:前台的注册页面的代码:reg ...
- Laravel5中使用阿里大于(鱼)发送短信验证码
在做用户注册和个人中心的安全管理时,我实现借助第三方短信平台(阿里大于(鱼))在Laravel框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...
随机推荐
- sourceinsight - imsoft.cnblogs
显示空格的问题,options->document options->visible space 前面的对勾去掉就好了 sourceinsight中文显示乱码问题彻底解决办法:http:/ ...
- 2017 ECL-FINAL J.Straight Master
题目链接:http://codeforces.com/gym/101775/problem/J 思路:序列差分一下,然后用得到的查分序列乱搞就可以了 注意差分序列第一项等于a[i],之后n-1项为ch ...
- web 常用网址及资源
一.web教程 w3school在线教程 菜鸟教程 二.学习路线 2017前端学习路线图,内附完整前端自学视频教程+工具经验-黑马程序员技术交流社区 三.工具 盘搜 百度地图 查物流 金山词霸 必应词 ...
- day 2 Linux Shell笔记
------------------------------------------------------------------- -------------------------------- ...
- Select2 用法
http://www.cnblogs.com/wuhuacong/p/4761637.html 2.这个做详细参考 http://www.jianshu.com/p/c5ab74b91b2e 3.ht ...
- apache airflow docker 运行简单试用
airflow 是一个编排.调度和监控workflow的平台,由Airbnb开源,现在在Apache Software Foundation 孵化. airflow 将workflow编排为tasks ...
- revit API 生成墙图元
由于Revit的版本问题,在网上找的生成墙图元的代码,在我机器上的Revit 2016中编译不能通过,通过多次调试,终于找到在revit 2016中使用API生成墙图元的代码,现在贴出来. 下面的代码 ...
- es 之 Symbol
ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证 ...
- Hadoop和云计算
什么是Hadoop? Hadoop代表的就是基于异步存储(HDFS)的并行计算(Map-Reduce). 首先Hdsf/ Kudu他的存储是分布式的存储,hive(map-reduce).impala ...
- Angular 4 延缓加载组件
1. 创建App ng new lazySample --routing 在app组件中的定义路由 2. 创建“Lazy” Module ng g module lazy --flat ng g co ...