jquery实现表单获取短信验证码代码
更新时间：2017年03月13日 14:49:40 作者：艾米
本文主要分享了jquery实现表单获取短信验证码的代码。具有很好的参考价值。下面跟着小编一起来看下吧
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery表单获取短信验证码代码</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
//获取短信验证码
var validCode=true;
$(".msgs").click (function () {
var time=30;
var code=$(this);
if (validCode) {
validCode=false;
code.addClass("msgs1");
var t=setInterval(function () {
time--;
code.html(time+"秒");
if (time==0) {
clearInterval(t);
code.html("重新获取");
validCode=true;
code.removeClass("msgs1");
}
},1000)
}
})
})
</script>
<style type="text/css">
form{margin:200px auto;width:500px;}
label{font-size:14px;color:#555;line-height:40px;margin-right:10px;}
input{width:212px;height:38px;border-style:none;padding:0 4px;border:1px solid #C8C8C8;margin-right:10px;outline:none;}
.msgs{display:inline-block;width:104px;color:#fff;font-size:12px;border:1px solid #0697DA;text-align:center;height:30px;line-height:30px;background:#0697DA;cursor:pointer;}
form .msgs1{background:#E6E6E6;color:#818080;border:1px solid #CCCCCC;}
</style>
</head>
<body>
<form>
<label>验 证 码</label>
<input type="text">
<span class="msgs">获取短信验证码</span>
</form>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
最近一年多一直在做前端的东西，由于老板在追求一些年轻动感的效果，让页面元素不能仅仅是简单的隐藏显示，所以经常会使用一些动画效果，发现jQuery的动画真心好用啊，把常用的几个总结一下，希望不再每次使用的时候还去翻API2013-10-10
这篇文章主要介绍了jQuery操作元素的内容和样式,结合完整实例形式分析了jquery针对页面元素内容与样式相关操作技巧,需要的朋友可以参考下2020-01-01
本文是基于jquery代码实现的添加和删除输入文本框标签代码，非常不错，具有参考借鉴，需要的朋友一起看下吧2016-05-05
这篇文章主要介绍了jQuery动态星级评分效果实现方法,涉及jquery动态操作页面元素样式的相关技巧,效果华丽大气,是一款非常优秀的特效源码,需要的朋友可以参考下2015-08-08
jQuery Migrate是应用迁移辅助插件，是用于高级版本兼容低级版本辅助插件。这篇文章主要介绍了jQuery Migrate 插件用法 ,需要的朋友可以参考下2019-05-05
据jQuery官方博客5月3日的最新消息，jQuery 1.6 正式版已经可以下载使用。jQuery 1.6 版本包括了对属性(Attribute)模型的重要重写，还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。2011-05-05
下面小编就为大家带来一篇jQuery原理系列-css选择器的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要为大家详细介绍了jquery横向纵向鼠标滚轮全屏切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了jquery 实现复选框的全选操作实例代码的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了jQuery实现开关灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论