页面效果,给手机发送验证码

简介:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang= "en" >
<head>
     <meta http-equiv= "Content-Type"  content= "text/html; charset=UTF-8" >
     <title>定时发送验证码</title>
     <script type= "text/javascript" >
     var  wait =  5 ;
       function  send(o) {
         if (wait== 5 ){
          //向服务器发送请求,给手机发送验证码
              // $.post("<%=path%>/simple/user/sendCode/mobile", 
              //   {
                 //     "mobile" : "${user.mobile}",
                 //     "number" : 2
                 // }, 
                 // function(data) {
                 //       if(data,message=="success"){
                 //         alert("验证码发送成功,请注意查收!");
                 //     }else{
                 //         alert("验证码发送失败,请稍后重试!");
                 //     } 
                 // });
                 
             }
             if  (wait ==  0 ) {
                 o.removeAttribute( "disabled" );
                 o.value =  "手机获取" ;
                 wait =  5 ;
             else  {
                 o.setAttribute( "disabled" true );
                 o.value = wait +  "s后可重新发送" ;
                 wait--;
                 setTimeout( function () {
                     send(o);
                 },  1000 )
             }
         }
     </script>
</head>
<body>
     < label  for = "mobile" >手机号:</ label >
     <input id= "mobile"  />
     <input type= "submit"  class = "sub_verify"  onclick= "send(this);"  value= "手机获取"  />
</html>

效果:

wKiom1b8lnSRGu0zAAAHF0F2GP0297.png


wKiom1b8lnTTLk-GAAAHHMyLqMY816.png



本文转自 兴趣e族 51CTO博客,原文链接:http://blog.51cto.com/simplelife/1758757
相关文章
|
2月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
2月前
|
网络协议 JavaScript 前端开发
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名2
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名
872 0
|
8月前
|
移动开发 小程序 Android开发
小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示
小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示
127 0
|
11月前
|
SQL Java
如何使用阿里云短信服务实现登录页面,手机验证码登录?1
如何使用阿里云短信服务实现登录页面,手机验证码登录?
308 0
|
10月前
|
小程序
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
2月前
|
网络协议 JavaScript 前端开发
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名1
使用正则表达式验证身份证号、QQ号、手机号、邮箱、地址、邮编、银行卡号、学号、车牌号、快递单号、验证码、ISBN号、网址、IPV4地址、IPV6地址、出生年月日、姓名
224 0
|
9天前
|
缓存 NoSQL Java
案例 采用Springboot默认的缓存方案Simple在三层架构中完成一个手机验证码生成校验的程序
案例 采用Springboot默认的缓存方案Simple在三层架构中完成一个手机验证码生成校验的程序
58 5
|
7天前
|
JavaScript
技术心得:根据不同访问设备跳转到PC页面或手机页面
技术心得:根据不同访问设备跳转到PC页面或手机页面
|
2月前
|
安全 iOS开发
浏海屏手机在部分页面通过[[UIApplication sharedApplication] delegate].window.safeAreaInsets.bottom得到底部安全区高度为0问题
浏海屏手机在部分页面通过[[UIApplication sharedApplication] delegate].window.safeAreaInsets.bottom得到底部安全区高度为0问题
26 0
|
2月前
|
UED
禁止手机侧滑返回上一个页面的三种方法
禁止手机侧滑返回上一个页面的三种方法
37 0