HTML实现倒计时插件

HTML代码

            <div class="smallBox"><div>手机号</div><div class="textinput"><input type="text" name="mobile" id="mobile"  placeholder="请输入手机号" ></div></div><div class="smallBox"><div class="code"><span>验证码</span> <span class="getCode" id="send">获取验证码</span></div><div class="textinput"><input type="text" name="code" placeholder="请输入验证码"></div></div>

JS代码

$(".getCode").click(function () {var phone = $("input[name='mobile']").val();if(phone=='' || phone== null){layer.msg("请输入手机号！");return;}if(!phone.match(/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1})|(16[0-9]{1}))+\d{8})$/)) {layer.msg("手机号码格式不正确！"); $("#mobile").focus(); return ; } //发送验证码$.ajax({type: "POST",//使用get方法访问后台或者postcontentType: "application/json", //必须这样写dataType: "json",//返回json格式的数据url:"<%=basePath%>rest/userregister/getCode.cs?mobile="+phone,//data:JSON.stringify(data),//schoolList是你要提交是json字符串success: function(data){//成功时会允许下面的函数，data为返回的数据，为数组类型if(data.ret==1){layer.msg("验证码发送成功");}else{layer.msg(data.msg);$(".getCode").css("pointer-events", "auto");clearInterval(timer);$(".getCode").text("获取验证码");return;}    }});var time = 60;var timer = setInterval(function(){time--;$(".getCode").text("（"+time+"）");$(".getCode").css("pointer-events", "none");if(time==0){$(".getCode").css("pointer-events", "auto");clearInterval(timer);$(".getCode").text("获取验证码");}},1000);
});

HTML实现倒计时插件相关推荐

jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
jQuery自适应倒计时插件
jQuery自适应倒计时插件在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
dedeCMS 静态页面的倒计时插件（原生VS自定义）
文章目录一.动画效果 · 修改前后对比二.修改文件的`路径`&&`名称`: 第一种方法:(自定义封装函数`daojishi()`) 首先: 然后: 第二种方法:(调用系统自带的函数 ...
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
html广告20s倒计时,简单时尚的jQuery倒计时插件
SyoTimer是一款简单时尚的jQuery倒计时插件.该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全.它的特点还有: 在计时器计时结束之后的回调函数中可以修改计时器的结构. 可以周期的 ...
榛子云短信-微信小程序60秒倒计时插件
为了帮助开发者更便捷的使用微信小程序的短信验证码功能,特别是初学者更好的使用,榛子云短信特地开发了60秒倒计时插件,效果: 使用方法 1.引入插件countdown.js var CountDown ...
漂亮实用的jQuery倒计时插件特效代码
原文:漂亮实用的jQuery倒计时插件特效代码源代码下载地址:http://www.zuidaima.com/share/1799598875675648.htm
jquery.countdown 倒计时插件的学习
1.第一种简单的使用第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
js/jq 倒计时插件（一）
//很多时候我们需要用到倒计时比如(一些发布会倒计时,秒杀倒计时,活动倒计时等),接下来将介绍两种倒计时插件的写法 //html结构 <!DOCTYPE html> <html la ...
html5 倒计时插件,基于HTML5 time元素的倒计时jquery插件
这是一款简单的基于HTML5 time元素的倒计时jquery插件.该jquery倒计时插件提供默认的翻牌样式,可以在所有支持HTML5 time元素的浏览器中正常工作. 安装可以通过npm来安装j ...

HTML实现倒计时插件

HTML实现倒计时插件相关推荐

最新文章

热门文章