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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
Vue项目中设置背景图片方法
Feb 21 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
理解javascript async的用法
2017/08/22 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
单位人事专员介绍信
2014/01/11 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
postgresql中如何执行sql文件
2023/05/08 PostgreSQL