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

js实现DIV的一些简单控制

Jun 04 Javascript

语义化 H1 标签

Jan 14 Javascript

用JS判别浏览器种类以及IE版本的几种方法小结

Aug 02 Javascript

node.js Sequelize实现单实例字段或批量自增、自减

Dec 08 Javascript

浅谈Angular.js中使用$watch监听模型变化

Jan 10 Javascript

完美实现js拖拽效果 return false用法详解

Jul 28 Javascript

vue中使用codemirror的实例详解

Nov 01 Javascript

Vue 组件修改根实例的数据的方法

Apr 02 Javascript

Vue响应式原理Observer、Dep、Watcher理解

Jun 06 Javascript

vue 获取视频时长的实例代码

Aug 20 Javascript

React Hook用法示例详解（6个常见hook）

Apr 28 Javascript

vue实现可以快进后退的跑马灯组件

Apr 08 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