jquery实现表单获取短信验证码代码


Posted in Javascript onMarch 13, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 #Javascript
VUE实现日历组件功能
Mar 13 #Javascript
JS正则表达式判断有效数实例代码
Mar 13 #Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 #Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 #Javascript
干货!教大家如何选择Vue和React
Mar 13 #Javascript
JavaScript 数据类型详解
Mar 13 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
php动态生成JavaScript代码
2009/03/09 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
python+opencv实现动态物体识别
2018/01/09 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
python中round函数保留两位小数的方法
2020/12/04 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
企业出纳岗位职责
2014/03/12 职场文书
村主任个人对照检查材料
2014/10/01 职场文书