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 相关文章推荐
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
You might like
第十一节--重载
2006/11/16 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php 分库分表hash算法
2009/11/12 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Django admin美化插件suit使用示例
2017/12/12 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
Django对models里的objects的使用详解
2019/08/17 Python
浅析Python __name__ 是什么
2020/07/07 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
初中数学教学反思
2014/01/16 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
教室布置标语
2014/06/26 职场文书
健康状况证明模板
2014/10/23 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书