编程 Javascript

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>

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

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

- Author -

艾米

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript void(0)的妙用

Oct 21 Javascript

jQuery中position()方法用法实例

Jan 16 Javascript

Ext JS动态加载JavaScript创建窗体的方法

Jun 23 Javascript

jquery结合html实现中英文页面切换

Nov 29 Javascript

Canvas 绘制粒子动画背景

Feb 15 Javascript

uploader秒传图片到服务器完整代码

Apr 22 Javascript

关于前后端json数据的发送与接收详解

Jul 30 Javascript

vuejs使用递归组件实现树形目录的方法

Sep 30 Javascript

es6新特性之 class 基本用法解析

May 05 Javascript

layui的表单验证支持ajax判断用户名是否重复的实例

Sep 06 Javascript

vue 实现把路由单独分离出来

Aug 13 Javascript

JavaScript手写数组的常用函数总结

Nov 22 Javascript

基于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