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框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...
随机推荐
- liunx的磁盘管理的基本命令
df 查看磁盘占用率 du -sh 查看磁盘多大 sudo fdisk -l 查看硬盘信息 sudo mkfs -t ext3 /dev/sdb1 建立文件系统(相当于格式化) ...
- 用户态监控网络接口up、down事件
网上搜索(https://blog.csdn.net/qq123386926/article/details/50695725)可以直接使用netlink现成的接口实现: #include <s ...
- 【MVC】View的使用
/Views/_ViewStart.cshtml 文件会在其他视图文档被加载之前被载入,代码如下: @{ Layout = "~/Views/Shared/_Layout.cshtml&qu ...
- CGI之C语言篇
为什么要进行CGI编程? 在HTML中,当客户填写了表单,并按下了发送(submit)按钮后,表单的内容被发送到了服务器端,一般的,这时就需要有一个服务器端脚本来对表单的内容进行一些处理,或者是把它们 ...
- jquery 1.9里面已经删除了toggle(fn1, fn2)函数:
jquery 1.9里面已经删除了toggle(fn1, fn2)函数:引用Note: This method signature was deprecated in jQuery 1.8 and r ...
- MySQL命令行--导入导出数据库
MySQL命令行导出数据库: 1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录 如我输入的命令行:cd C:\Program Files\MySQL\MySQL Se ...
- FastAdmin 自己做的插件 SQL 有一个表没有生成成功
群里有群友问: 给插件建的install.sql 里有三个表,为啥会出现安装成功后没有错误提示,只生成了两个表的情况..这可能会是什么...原因 第一感觉和 FastAdmin 没有关系. 没生成表, ...
- ActiveMQ消息持久化存储策略
ActiveMQ的内核是Java编写的,也就是说如果服务端没有Java运行环境ActiveMQ是无法运行的.ActiveMQ启动时,启动脚本使用wrapper包装器来启动JVM.JVM相关的配置信息在 ...
- tomcat catalina.out切割脚本
shell脚本catalina.out 切割脚本...每天23.30切割.删除七天之前的日志这里3个tomcat实例(1)拷贝日志文件(2)清空日志文件*只能清空如果删除tomcat不重启不会生成新的 ...
- 日志挖掘(logminer)
转. 如何使用logminer分析Oracle 联机日志 笔者在工作中经常遇到这样的情况:为了追踪数据的变化,需要知道某个表或者表中的某行数据是什么时候被修改的,以及修改前的内容. ...