效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title jquery表单获取短信验证码代码/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js//script script $(function(){//获取短信验证码var validCode=true$('。msgs ').click(function(){ var time=30；定义变量代码=$(this)；if(有效代码){有效代码=false代码。addCLaSS(' msg S1 ')；var t=setInterval(function(){ time-；code.html(时间)秒');if(time==0){ clearInterval(t)；code.html('重新获取');validCode=truecode。移除CLaSS(' msg S1 ')；} },1000)} })}))/脚本样式类型='text/css '表单{ margin:200px auto宽度宽度：500px}标签{ font-size :14 px颜色： # 555线高：40 px右边距：10 px}输入{ width:212px高度：38 px边框样式：无；padding:0 4pxborder:1px固体# C8C8C8右边距：10 pxoutline:none}。msgs { display : inline-block；宽度width :104 pxcolor : # fffffont-size :12 px；border:1px固体# 0697DA文本对齐：居中；高度：30 px线高：30 px背景技术# 0697DAcursor:pointer指针指针；}表单。味精S1 {背景： # E6E 6；color : # 818080 border :1 px固体# CCCCCC；}/样式/标题格式标签验证码/标签输入类型='text' span class='msgs '获取短信验证码/span/表单/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！