编程 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 相关文章推荐

jQuery Tab插件用于在Tab中显示iframe，附源码和详细说明

Jun 27 Javascript

页面加载完成后再执行JS的jquery写法以及区别说明

Feb 22 Javascript

jQuery实现hover合成事件的方法

Aug 06 Javascript

浅析JavaScript中浏览器的兼容问题

Apr 19 Javascript

浅谈toLowerCase和toLocaleLowerCase的区别

Aug 15 Javascript

html、css和jquery相结合实现简单的进度条效果实例代码

Oct 24 Javascript

bootstrap table配置参数例子

Jan 05 Javascript

JavaScript使用闭包模仿块级作用域操作示例

Jan 21 Javascript

vue+iview/elementUi实现城市多选

Mar 28 Javascript

vue+element实现表单校验功能

May 20 Javascript

Openlayers实现距离面积测量

Sep 28 Javascript

vue中如何添加百度统计代码

Dec 19 Vue.js

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